')
+ .should('contain', 'tester: {
+ cy.get('.instance .instance:nth-child(2) .arrow-wrapper').click()
+ cy.get('.instance .instance .instance:nth-child(1) .item-name').click()
+ cy.get('.right .data-wrapper')
+ .should('contain', '$attrs')
+ .should('contain', 'attr:"some-attr"')
+ })
+})
diff --git a/vue-devtools/cypress/integration/events-tab.js b/vue-devtools/cypress/integration/events-tab.js
new file mode 100644
index 0000000000000000000000000000000000000000..d7fbbcc2a0dc40095fdff723eed4bd76c0b91a13
--- /dev/null
+++ b/vue-devtools/cypress/integration/events-tab.js
@@ -0,0 +1,37 @@
+import { suite } from '../utils/suite'
+
+suite('events tab', () => {
+ it('should display new events counter', () => {
+ cy.get('#target').iframe().then(({ get }) => {
+ get('.btn-emit-event').click({ force: true })
+ get('.btn-emit-event1').click({ force: true })
+ get('.btn-emit-event2').click({ force: true })
+ })
+ cy.get('.events-tab .tag').contains(3)
+ cy.get('.events-tab').click()
+ cy.get('.events-tab .tag').should('not.be.visible')
+ })
+
+ it('should display events', () => {
+ cy.get('.history .entry').should('have.length', 3)
+ })
+
+ it('should add event', () => {
+ cy.get('#target').iframe().then(({ get }) => {
+ get('.btn-emit-log-event').click({ force: true })
+ })
+ cy.get('.history .entry').should('have.length', 4)
+ })
+
+ it('should search events', () => {
+ cy.get('.left .search input').clear().type('event')
+ cy.get('.history .entry[data-active="true"]').should('have.length', 3)
+ cy.get('.left .search input').clear().type('')
+ cy.get('.history .entry[data-active="true"]').should('have.length', 1)
+ cy.get('.left .search input').clear().type('/^event$/')
+ cy.get('.history .entry[data-active="true"]').should('have.length', 1)
+ cy.get('.left .search input').clear()
+ cy.get('.button.reset').click()
+ cy.get('.history .entry[data-active="true"]').should('have.length', 0)
+ })
+})
diff --git a/vue-devtools/cypress/integration/vuex-edit.js b/vue-devtools/cypress/integration/vuex-edit.js
new file mode 100644
index 0000000000000000000000000000000000000000..1f3bc21ed5c35e98b39b9453301778a25a29622f
--- /dev/null
+++ b/vue-devtools/cypress/integration/vuex-edit.js
@@ -0,0 +1,111 @@
+import { suite } from '../utils/suite'
+
+suite('vuex edit', () => {
+ it('should edit state using the decrease button', () => {
+ cy.get('.vuex-tab').click()
+ cy.get('[data-id="load-vuex-state"]').click()
+
+ // using the decrease button
+ cy.get('.state .data-field').eq(0)
+ .find('.actions .vue-ui-button').eq(1)
+ .click({ force: true })
+
+ cy.get('.vuex-state-inspector').within(() => {
+ cy.get('.key').contains('count').parent().contains('-1')
+ })
+
+ cy.get('.state .data-field').eq(0)
+ .find('.actions .vue-ui-button').eq(1)
+ .click({ force: true })
+
+ cy.get('.vuex-state-inspector').within(() => {
+ cy.get('.key').contains('count').parent().contains('-2')
+ })
+
+ cy.get('#target').iframe().then(({ get }) => {
+ get('#counter p').contains('-2')
+ })
+ })
+
+ it('should edit state using the increase button', () => {
+ // using the increase button
+ cy.get('.state .data-field').eq(0).click()
+ .find('.actions .vue-ui-button').eq(2)
+ .click({ force: true })
+
+ cy.get('.vuex-state-inspector').within(() => {
+ cy.get('.key').contains('count').parent().contains('-1')
+ })
+
+ cy.get('.state .data-field').eq(0).click()
+ .find('.actions .vue-ui-button').eq(2)
+ .click({ force: true })
+
+ cy.get('.vuex-state-inspector').within(() => {
+ cy.get('.key').contains('count').parent().contains('0')
+ })
+
+ cy.get('#target').iframe().then(({ get }) => {
+ get('#counter p').contains('0')
+ })
+ })
+
+ it('should edit state using the edit input', () => {
+ // using the edit input
+ cy.get('.state .data-field').eq(0).click()
+ .find('.actions .vue-ui-button').eq(0).click({ force: true })
+ cy.get('.edit-input').type('12')
+ cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
+
+ cy.wait(200)
+ cy.get('#target').iframe().then(({ get }) => {
+ get('#counter p').contains('12')
+ })
+
+ // change count back to 1
+ cy.get('.state .data-field').eq(0).click()
+ .find('.actions .vue-ui-button').eq(0).click({ force: true })
+ cy.get('.edit-input').type('0')
+ cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
+
+ cy.wait(200)
+ cy.get('#target').iframe().then(({ get }) => {
+ get('#counter p').contains('0')
+ })
+ })
+
+ it('should edit state nested field', () => {
+ // using the decrease button
+ cy.get('.data-field > .children > .data-field').eq(4)
+ .find('.actions .vue-ui-button').eq(1)
+ .click({ force: true })
+ .click({ force: true })
+
+ cy.wait(200)
+ cy.get('#target').iframe().then(({ get }) => {
+ get('#vuex-object pre').contains('-2')
+ })
+
+ // using the increase button
+ cy.get('.data-field > .children > .data-field').eq(4)
+ .find('.actions .vue-ui-button').eq(2)
+ .click({ force: true })
+ .click({ force: true })
+
+ cy.wait(200)
+ cy.get('#target').iframe().then(({ get }) => {
+ get('#vuex-object pre').contains('0')
+ })
+
+ // using the input
+ cy.get('.data-field > .children > .data-field').eq(4)
+ .find('.actions .vue-ui-button').eq(0).click({ force: true })
+ cy.get('.edit-input').eq(1).type('12')
+ cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
+
+ cy.wait(200)
+ cy.get('#target').iframe().then(({ get }) => {
+ get('#vuex-object pre').contains('12')
+ })
+ })
+})
diff --git a/vue-devtools/cypress/integration/vuex-tab.js b/vue-devtools/cypress/integration/vuex-tab.js
new file mode 100644
index 0000000000000000000000000000000000000000..9ab0214f1d52c568a2bcca479c8cca2491cbd47c
--- /dev/null
+++ b/vue-devtools/cypress/integration/vuex-tab.js
@@ -0,0 +1,214 @@
+import { suite } from '../utils/suite'
+
+suite('vuex tab', () => {
+ it('should display mutations history', () => {
+ cy.get('#target').iframe().then(({ get }) => {
+ get('.increment')
+ .click({ force: true })
+ .click({ force: true })
+ get('.decrement').click({ force: true })
+ get('#counter p').contains('1')
+ })
+ cy.get('.vuex-tab').click()
+ cy.get('.history .entry').should('have.length', 6)
+ cy.get('[data-id="load-vuex-state"]').click()
+ cy.get('.recording-vuex-state').should('not.be.visible')
+ cy.get('.loading-vuex-state').should('not.be.visible')
+ cy.get('.vuex-state-inspector')
+ .should('contain', 'type:"DECREMENT"')
+ .should('contain', 'count:1')
+ cy.get('.history .entry').eq(5).should('have.class', 'inspected').should('have.class', 'active')
+ })
+
+ it('should filter state & getters', () => {
+ cy.get('.right .search input').clear().type('cou')
+ cy.get('.data-field').should('have.length', 2)
+ cy.get('.right .search input').clear().type('no value')
+ cy.get('.data-field').should('have.length', 0)
+ cy.get('.right .search input').clear()
+ })
+
+ it('should filter history', () => {
+ cy.get('.left .search input').clear().type('inc')
+ cy.get('.history .entry[data-active="true"]').should('have.length', 2)
+ cy.get('.history .entry[data-active="true"].inspected').should('have.length', 0)
+ cy.get('.history .entry[data-active="true"].active').should('have.length', 0)
+
+ cy.get('.left .search input').clear().type('/dec/i')
+ cy.get('.history .entry[data-active="true"]').should('have.length', 1)
+ cy.get('.history .entry[data-active="true"].inspected').should('have.length', 0)
+ cy.get('.history .entry[data-active="true"].active').should('have.length', 0)
+
+ cy.get('.left .search input').clear().type('/dec)/i')
+ cy.get('.history .entry[data-active="true"]').should('have.length', 5)
+ cy.get('.history .entry[data-active="true"].inspected').should('have.length', 0)
+ cy.get('.history .entry[data-active="true"].active').should('have.length', 1)
+
+ cy.get('.left .search input').clear()
+ })
+
+ it('should inspect state', () => {
+ cy.get('.history .entry .mutation-type').eq(2).click()
+ cy.get('.history .entry').eq(2)
+ .should('have.class', 'inspected')
+ .should('not.have.class', 'active')
+ cy.get('.recording-vuex-state').should('not.be.visible')
+ cy.get('.loading-vuex-state').should('not.be.visible')
+ cy.get('.vuex-state-inspector').then((el) => {
+ expect(el.text()).to.include('type:"INCREMENT"')
+ expect(el.text()).to.include('count:2')
+ expect(el.text()).to.include('Error from getter')
+ })
+ cy.get('.data-field .key').contains('lastCountPayload').click()
+ cy.get('.vuex-state-inspector').then((el) => {
+ expect(el.text()).to.include('a:1')
+ expect(el.text()).to.include('b:Object')
+ })
+ cy.get('#target').iframe().then(({ get }) => {
+ get('#counter p').contains('1')
+ })
+ })
+
+ it('should time-travel', () => {
+ cy.get('.history .entry[data-index="4"] .entry-actions .action-time-travel').click({ force: true })
+ cy.get('.history .entry[data-index="4"]')
+ .should('have.class', 'inspected')
+ .should('have.class', 'active')
+ cy.get('#target').iframe().then(({ get }) => {
+ get('#counter p').contains('2')
+ })
+
+ cy.get('.history .entry[data-index="3"] .mutation-type').click({ force: true })
+ cy.get('.history .entry[data-index="3"]')
+ .should('have.class', 'inspected')
+ .should('not.have.class', 'active')
+ cy.get('.history .entry[data-index="4"]')
+ .should('not.have.class', 'inspected')
+ .should('have.class', 'active')
+ cy.get('.recording-vuex-state').should('not.be.visible')
+ cy.get('.loading-vuex-state').should('not.be.visible')
+ cy.get('.recording-vuex-state').should('not.be.visible')
+ cy.get('.vuex-state-inspector').then((el) => {
+ expect(el.text()).to.include('type:"INCREMENT"')
+ expect(el.text()).to.include('count:1')
+ })
+ cy.get('#target').iframe().then(({ get }) => {
+ get('#counter p').contains('2')
+ })
+ cy.get('.history .entry[data-index="3"] .entry-actions .action-time-travel').click({ force: true })
+ cy.get('.history .entry[data-index="3"]')
+ .should('have.class', 'inspected')
+ .should('have.class', 'active')
+ cy.get('.history .entry[data-index="4"]')
+ .should('not.have.class', 'inspected')
+ .should('not.have.class', 'active')
+ cy.get('#target').iframe().then(({ get }) => {
+ get('#counter p').contains('1')
+ })
+
+ // Base state
+ cy.get('.history .entry[data-index="0"] .mutation-type').click({ force: true })
+ cy.get('.history .entry[data-index="0"]')
+ .should('have.class', 'inspected')
+ .should('not.have.class', 'active')
+ cy.get('.vuex-state-inspector').then((el) => {
+ expect(el.text()).to.include('count:0')
+ })
+ cy.get('#target').iframe().then(({ get }) => {
+ get('#counter p').contains('1')
+ })
+ cy.get('.history .entry[data-index="2"] .entry-actions .action-time-travel').click({ force: true })
+ cy.get('.history .entry[data-index="2"]')
+ .should('have.class', 'inspected')
+ .should('have.class', 'active')
+ cy.get('#target').iframe().then(({ get }) => {
+ get('#counter p').contains('0')
+ })
+ })
+
+ it('should revert', () => {
+ cy.get('.history .entry[data-index="5"] .mutation-type').click({ force: true })
+ cy.get('.history .entry[data-index="5"]').find('.action-revert').click({ force: true })
+ cy.get('.history .entry[data-active="true"]').should('have.length', 5)
+ cy.get('.history .entry[data-index="4"]')
+ .should('have.class', 'inspected')
+ .should('have.class', 'active')
+ cy.get('.vuex-state-inspector').then((el) => {
+ expect(el.text()).to.include('count:2')
+ })
+ cy.get('#target').iframe().then(({ get }) => {
+ get('#counter p').contains('2')
+ })
+ })
+
+ it('should commit', () => {
+ cy.get('.history .entry[data-index="4"] .action-commit').click({ force: true })
+ cy.get('.history .entry[data-active="true"]').should('have.length', 1)
+ cy.get('.history .entry[data-index="0"]')
+ .should('have.class', 'inspected')
+ .should('have.class', 'active')
+ cy.get('.vuex-state-inspector').then((el) => {
+ expect(el.text()).to.include('count:2')
+ })
+ cy.get('#target').iframe().then(({ get }) => {
+ get('#counter p').contains('2')
+ })
+ })
+
+ it('should display getters', () => {
+ cy.get('.vuex-state-inspector').within(() => {
+ cy.get('.key').contains('count').parent().contains('2')
+ cy.get('.key').contains('isPositive').parent().contains('true')
+ })
+ cy.get('#target').iframe().then(({ get }) => {
+ get('.decrement')
+ .click({ force: true })
+ .click({ force: true })
+ .click({ force: true })
+ get('#counter p').contains('-1')
+ })
+ cy.get('.history .entry[data-index="3"]').click({ force: true })
+ cy.get('.recording-vuex-state').should('not.be.visible')
+ cy.get('.loading-vuex-state').should('not.be.visible')
+ cy.get('.vuex-state-inspector').within(() => {
+ cy.get('.key').contains('count').parent().contains('-1')
+ cy.get('.key').contains('isPositive').parent().contains('false')
+ })
+ })
+
+ it('should toggle recording', () => {
+ cy.get('.toggle-recording')
+ .click()
+ .contains('Paused')
+ cy.get('.toggle-recording .svg-icon').should('not.have.class', 'enabled')
+ // should not record
+ cy.get('#target').iframe().then(({ get }) => {
+ get('.increment').click({ force: true })
+ })
+ cy.get('.history .entry[data-active="true"]').should('have.length', 4)
+ })
+
+ it('should copy vuex state', () => {
+ cy.get('.export').click()
+ cy.get('.export .message')
+ .contains('(Copied to clipboard!)')
+ .should('not.be.visible', { timeout: 5000 })
+ })
+
+ it('should import vuex state', () => {
+ cy.get('.import').click()
+ cy.get('.import-state').should('be.visible')
+ cy.get('.import-state textarea').clear().type('{{}invalid: json}')
+ cy.get('.message.invalid-json').should('be.visible')
+ cy.get('.import-state textarea').clear().type('{{}"count":42,"date":"[native Date Fri Dec 22 2017 10:12:04 GMT+0100 (CET)]","nested":{{}"foo":"meow"},"instant":{{}"hey":"hi"}}')
+ cy.wait(500)
+ cy.get('.message.invalid-json').should('not.be.visible')
+ cy.wait(500)
+ cy.get('.vuex-state-inspector').then((el) => {
+ expect(el.text()).to.include('count:42')
+ expect(el.text()).to.include(`date:${new Date('Fri Dec 22 2017 10:12:04 GMT+0100 (CET)')}`)
+ })
+ cy.get('.import').click()
+ cy.get('.import-state').should('not.be.visible')
+ })
+})
diff --git a/vue-devtools/cypress/plugins/index.js b/vue-devtools/cypress/plugins/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..1cb1467bfff5c4cd7b95260bfd072c0691287faf
--- /dev/null
+++ b/vue-devtools/cypress/plugins/index.js
@@ -0,0 +1,24 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (_on, _config) => {
+ // `on` is used to hook into various events Cypress emits
+ // `config` is the resolved Cypress config
+
+ // on('before:browser:launch', (browser = {}, args) => {
+ // if (browser.name === 'chrome') {
+ // args.push('--disable-site-isolation-trials')
+ // return args
+ // }
+ // })
+}
diff --git a/vue-devtools/cypress/support/commands.js b/vue-devtools/cypress/support/commands.js
new file mode 100644
index 0000000000000000000000000000000000000000..336ac74b8e4e347aeace1bd6396efee0b2aa8b7e
--- /dev/null
+++ b/vue-devtools/cypress/support/commands.js
@@ -0,0 +1,48 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+Cypress.Commands.add('vueCheckInit', () => {
+ cy.get('.message .text').should('be.visible', { timeout: 10000 }).then((el) => {
+ expect(el.text()).to.include('Ready. Detected Vue')
+ })
+ cy.get('.instance').eq(0).contains('Root')
+})
+
+// Add iframe support until becomes part of the framework
+Cypress.Commands.add('iframe', { prevSubject: 'element' }, ($iframe) => {
+ const get = selector => cy.wait(500).wrap($iframe.contents().find(selector))
+
+ const el = $iframe[0]
+ const iframeDoc = el.contentDocument || el.contentWindow.document
+ if (iframeDoc.readyState === 'complete') {
+ return Cypress.Promise.resolve({ body: $iframe.contents().find('body'), get })
+ }
+ return new Cypress.Promise((resolve) => {
+ $iframe.on('load', () => {
+ resolve({ body: $iframe.contents().find('body'), get })
+ })
+ })
+})
diff --git a/vue-devtools/cypress/support/index.js b/vue-devtools/cypress/support/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d68db96df2697e0835f5c490db0c2cc81673f407
--- /dev/null
+++ b/vue-devtools/cypress/support/index.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/vue-devtools/cypress/utils/suite.js b/vue-devtools/cypress/utils/suite.js
new file mode 100644
index 0000000000000000000000000000000000000000..d1eb6f127cb398dd18b30bf3137a1e3c72c09485
--- /dev/null
+++ b/vue-devtools/cypress/utils/suite.js
@@ -0,0 +1,9 @@
+export function suite(description, tests) {
+ describe(description, () => {
+ before(() => {
+ cy.visit('/')
+ cy.vueCheckInit()
+ })
+ tests()
+ })
+}
diff --git a/vue-devtools/dist/.gitkeep b/vue-devtools/dist/.gitkeep
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/vue-devtools/eslint.config.js b/vue-devtools/eslint.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..82cafd35fdef93815a0bea93671c21b22811bd84
--- /dev/null
+++ b/vue-devtools/eslint.config.js
@@ -0,0 +1,43 @@
+const antfu = require('@antfu/eslint-config').default
+
+module.exports = antfu({
+ ignores: [
+ '**/dist',
+ ],
+}, {
+ rules: {
+ 'curly': ['error', 'all'],
+ 'node/prefer-global/process': 'off',
+ },
+}, {
+ files: [
+ 'packages/shell-dev*/**',
+ ],
+ rules: {
+ 'no-console': 'off',
+ 'unused-imports/no-unused-vars': 'off',
+ 'vue/require-explicit-emits': 'off',
+ 'vue/custom-event-name-casing': 'off',
+ 'vue/no-deprecated-functional-template': 'off',
+ 'vue/no-deprecated-filter': 'off',
+ 'vue/no-unused-refs': 'off',
+ 'vue/require-component-is': 'off',
+ 'vue/return-in-computed-property': 'off',
+ },
+}, {
+ files: [
+ 'packages/shell-host/**',
+ ],
+ rules: {
+ 'no-console': 'off',
+ },
+}, {
+ files: [
+ 'package.json',
+ 'packages/*/package.json',
+ 'packages/*/manifest.json',
+ ],
+ rules: {
+ 'style/eol-last': 'off',
+ },
+})
diff --git a/vue-devtools/extension-zips.js b/vue-devtools/extension-zips.js
new file mode 100644
index 0000000000000000000000000000000000000000..b678ce9ce26ad0471dfd3c733b7fc188cd197f7f
--- /dev/null
+++ b/vue-devtools/extension-zips.js
@@ -0,0 +1,142 @@
+// require modules
+const fs = require('node:fs')
+const path = require('node:path')
+const process = require('node:process')
+const archiver = require('archiver')
+
+const IS_CI = !!(process.env.CIRCLECI || process.env.GITHUB_ACTIONS)
+const ProgressBar = !IS_CI ? require('progress') : {}
+const readDirGlob = !IS_CI ? require('readdir-glob') : {}
+
+const INCLUDE_GLOBS = [
+ 'build/**',
+ 'icons/**',
+ 'popups/**',
+ 'devtools.html',
+ 'devtools-background.html',
+ 'manifest.json',
+ 'package.json',
+]
+// SKIP_GLOBS makes glob searches more efficient
+const SKIP_DIR_GLOBS = ['node_modules', 'src']
+
+function bytesToSize(bytes) {
+ const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+ if (bytes === 0) {
+ return '0 Byte'
+ }
+ const i = Number.parseInt(Math.floor(Math.log(bytes) / Math.log(1024)))
+ return `${Math.round(bytes / 1024 ** i, 2)} ${sizes[i]}`
+}
+
+(async () => {
+ await writeZip('devtools-chrome.zip', 'shell-chrome')
+ await writeZip('devtools-firefox.zip', 'shell-firefox')
+
+ async function writeZip(fileName, packageDir) {
+ // create a file to stream archive data to.
+ const output = fs.createWriteStream(path.join(__dirname, 'dist', fileName))
+ const archive = archiver('zip', {
+ zlib: { level: 9 }, // Sets the compression level.
+ })
+
+ if (!IS_CI) {
+ const status = {
+ total: 0,
+ cFile: '...',
+ cSize: '0 Bytes',
+ tBytes: 0,
+ tSize: '0 Bytes',
+ }
+
+ async function parseFileStats() {
+ return new Promise((resolve, reject) => {
+ const globber = readDirGlob(path.join('packages', packageDir), { pattern: INCLUDE_GLOBS, skip: SKIP_DIR_GLOBS, mark: true, stat: true })
+ globber.on('match', (match) => {
+ if (!match.stat.isDirectory()) {
+ status.total++
+ }
+ })
+ globber.on('error', (err) => {
+ reject(err)
+ })
+ globber.on('end', () => {
+ resolve()
+ })
+ })
+ }
+ await parseFileStats().catch((err) => {
+ console.error(err)
+ process.exit(1)
+ })
+
+ const bar = new ProgressBar(`${fileName} @ :tSize [:bar] :current/:total :percent +:cFile@:cSize`, {
+ width: 18,
+ incomplete: ' ',
+ total: status.total,
+ })
+ bar.tick(0, status)
+
+ archive.on('entry', (entry) => {
+ if (!entry.stats.isDirectory()) {
+ const n = entry.name
+ status.written++
+ status.cFile = n.length > 14
+ ? `...${n.slice(n.length - 11)}`
+ : n
+ status.cSize = bytesToSize(entry.stats.size)
+ status.tBytes += entry.stats.size
+ status.tSize = bytesToSize(status.tBytes)
+ bar.tick(1, status)
+ }
+ })
+ }
+
+ const end = new Promise((resolve) => {
+ // listen for all archive data to be written
+ // 'close' event is fired only when a file descriptor is involved
+ output.on('close', () => {
+ if (archive.pointer() < 1000) {
+ console.warn(`Zip file (${fileName}) is only ${archive.pointer()} bytes`)
+ }
+ resolve()
+ })
+ })
+
+ // This event is fired when the data source is drained no matter what was the data source.
+ // It is not part of this library but rather from the NodeJS Stream API.
+ // @see: https://nodejs.org/api/stream.html#stream_event_end
+ output.on('end', () => {
+ 'nothing'
+ })
+
+ // good practice to catch warnings (ie stat failures and other non-blocking errors)
+ archive.on('warning', (err) => {
+ if (err.code !== 'ENOENT') {
+ // throw error
+ console.error(err)
+ process.exit(1)
+ }
+ })
+
+ // good practice to catch this error explicitly
+ archive.on('error', (err) => {
+ console.error(err)
+ process.exit(1)
+ })
+
+ // pipe archive data to the file
+ archive.pipe(output)
+
+ INCLUDE_GLOBS.forEach((glob) => {
+ // append files from a glob pattern
+ archive.glob(glob, { cwd: path.join('packages', packageDir), skip: SKIP_DIR_GLOBS })
+ })
+
+ // finalize the archive (ie we are done appending files but streams have to finish yet)
+ // 'close', 'end' or 'finish' may be fired right after calling this method so register to them beforehand
+ archive.finalize()
+
+ await end
+ }
+})()
diff --git a/vue-devtools/lerna.json b/vue-devtools/lerna.json
new file mode 100644
index 0000000000000000000000000000000000000000..a2cb47c994851c14059bff03bdcc56e9687e5725
--- /dev/null
+++ b/vue-devtools/lerna.json
@@ -0,0 +1,11 @@
+{
+ "npmClient": "yarn",
+ "useWorkspaces": true,
+ "version": "6.0.0-beta.2",
+ "packages": [
+ "packages/*"
+ ],
+ "ignoreChanges": [
+ "**/*.md"
+ ]
+}
diff --git a/vue-devtools/media/chrome-webstore/screenshot1-size.png b/vue-devtools/media/chrome-webstore/screenshot1-size.png
new file mode 100644
index 0000000000000000000000000000000000000000..c34fad7959b10ffa6f7fc4fc4b047d06a6050555
--- /dev/null
+++ b/vue-devtools/media/chrome-webstore/screenshot1-size.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e3874b539d5004ce2941d13255d4b546ba466237ef6d10f5adbba031e5455cb1
+size 129791
diff --git a/vue-devtools/media/chrome-webstore/screenshot1.png b/vue-devtools/media/chrome-webstore/screenshot1.png
new file mode 100644
index 0000000000000000000000000000000000000000..abadd382dc793db6ad456766e89a27f3b198fa7b
--- /dev/null
+++ b/vue-devtools/media/chrome-webstore/screenshot1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9ac3cbf7afbade2a16a77c36b5866cc0404544533121016ccf46bab3c7f8c5ee
+size 120080
diff --git a/vue-devtools/media/chrome-webstore/screenshot2-size.png b/vue-devtools/media/chrome-webstore/screenshot2-size.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5a4f2439d08b8ce54104116c4c6d82c8e0ef453
Binary files /dev/null and b/vue-devtools/media/chrome-webstore/screenshot2-size.png differ
diff --git a/vue-devtools/media/chrome-webstore/screenshot2.png b/vue-devtools/media/chrome-webstore/screenshot2.png
new file mode 100644
index 0000000000000000000000000000000000000000..036441016f17ec8d6bf6d1c24b8f5a4fb2e3a078
Binary files /dev/null and b/vue-devtools/media/chrome-webstore/screenshot2.png differ
diff --git a/vue-devtools/media/chrome-webstore/screenshot3-size.png b/vue-devtools/media/chrome-webstore/screenshot3-size.png
new file mode 100644
index 0000000000000000000000000000000000000000..9768258940c95b48a0b01fde2b3722bf40892567
Binary files /dev/null and b/vue-devtools/media/chrome-webstore/screenshot3-size.png differ
diff --git a/vue-devtools/media/chrome-webstore/screenshot3.png b/vue-devtools/media/chrome-webstore/screenshot3.png
new file mode 100644
index 0000000000000000000000000000000000000000..95359767a0de7c5cb3936524b5febb50d5f9b915
Binary files /dev/null and b/vue-devtools/media/chrome-webstore/screenshot3.png differ
diff --git a/vue-devtools/media/chrome-webstore/screenshot4-size.png b/vue-devtools/media/chrome-webstore/screenshot4-size.png
new file mode 100644
index 0000000000000000000000000000000000000000..574b26a93050a196d217bc66dcf7813ef3d9fe68
Binary files /dev/null and b/vue-devtools/media/chrome-webstore/screenshot4-size.png differ
diff --git a/vue-devtools/media/chrome-webstore/screenshot4.png b/vue-devtools/media/chrome-webstore/screenshot4.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ba8e411479c6a50186e1cbf045145db243bfeb3
Binary files /dev/null and b/vue-devtools/media/chrome-webstore/screenshot4.png differ
diff --git a/vue-devtools/media/screenshot-rounded.png b/vue-devtools/media/screenshot-rounded.png
new file mode 100644
index 0000000000000000000000000000000000000000..4fe55fe4f0984cf713befedac781985ce17789af
--- /dev/null
+++ b/vue-devtools/media/screenshot-rounded.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d9eecaf9087bdc6bea62f51695757239a41a455430b49a6946ab5513f6efb62f
+size 159951
diff --git a/vue-devtools/media/screenshot-shadow.png b/vue-devtools/media/screenshot-shadow.png
new file mode 100644
index 0000000000000000000000000000000000000000..57a7a65f12d94c394b6e2642e87c8d02552175e8
--- /dev/null
+++ b/vue-devtools/media/screenshot-shadow.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3a053a8234a79608e810346df0524a1ee5ce77bec29b83739ce2126d81c794ec
+size 165677
diff --git a/vue-devtools/media/screenshot.png b/vue-devtools/media/screenshot.png
new file mode 100644
index 0000000000000000000000000000000000000000..eef1e41a6c06d195a03decf22c1bde0841f4d87b
--- /dev/null
+++ b/vue-devtools/media/screenshot.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6a795f9c7e3d5915d7c8030a2b7514aaa068765af47543b3c2615c0ef0deac51
+size 152023
diff --git a/vue-devtools/package.json b/vue-devtools/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..3e31d92d9139feb29f662d1aa84352d376f2f45e
--- /dev/null
+++ b/vue-devtools/package.json
@@ -0,0 +1,76 @@
+{
+ "name": "vue-devtools",
+ "version": "6.6.3",
+ "private": true,
+ "description": "devtools for Vue.js!",
+ "workspaces": [
+ "packages/*"
+ ],
+ "author": "Evan You",
+ "license": "MIT",
+ "homepage": "https://github.com/vuejs/vue-devtools#readme",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/vuejs/vue-devtools.git"
+ },
+ "bugs": {
+ "url": "https://github.com/vuejs/vue-devtools/issues"
+ },
+ "engines": {
+ "node": ">=8.10"
+ },
+ "scripts": {
+ "dev:vue2": "concurrently \"cd packages/shell-dev-vue2 && yarn dev\" \"cd packages/shell-host && yarn dev\"",
+ "dev:vue3": "concurrently \"cd packages/shell-dev-vue3 && yarn dev\" \"cd packages/shell-host && yarn dev\"",
+ "dev:chrome": "cd packages/shell-chrome && webpack --watch",
+ "dev:chrome:prod": "cd packages/shell-chrome && cross-env NODE_ENV=production webpack --watch",
+ "dev:firefox": "cd packages/shell-firefox && webpack --watch",
+ "dev:electron": "cd packages/shell-electron && npm run dev",
+ "build": "lerna run build",
+ "build:watch": "lerna run build --scope @vue-devtools/app-backend* --scope @vue-devtools/shared-* --scope @vue/devtools-api && lerna run build:watch --stream --no-sort --concurrency 99",
+ "lint": "eslint .",
+ "run:firefox": "web-ext run -s packages/shell-firefox -a dist -i src -u http://localhost:8090/target.html",
+ "zip": "node ./extension-zips.js",
+ "sign:firefox": "node ./sign-firefox.js",
+ "release": "npm run test && node release.js && npm run build && npm run zip && npm run pub",
+ "release:beta": "cross-env RELEASE_CHANNEL=beta npm run release && npm run sign:firefox",
+ "pub": "npm run pub:electron && npm run pub:api",
+ "pub:electron": "cd packages/shell-electron && npm publish",
+ "pub:api": "cd packages/api && npm publish",
+ "test": "npm run lint && npm run test:types:front",
+ "test:types:front": "tsc --noEmit",
+ "test:e2e": "cross-env PORT=4040 start-server-and-test dev:shell http://localhost:4040 test:e2e:run",
+ "test:e2e:run": "cypress run --config baseUrl=http://localhost:4040",
+ "test:open": "cypress open --config baseUrl=http://localhost:8100",
+ "docs:dev": "cd packages/docs && vitepress dev src",
+ "docs:build": "cd packages/docs && vitepress build src",
+ "docs:serve": "cd packages/docs && vitepress serve src"
+ },
+ "devDependencies": {
+ "@antfu/eslint-config": "^2.19.1",
+ "@tailwindcss/postcss7-compat": "^2.0.4",
+ "@types/chrome": "^0.0.139",
+ "@types/speakingurl": "^13.0.3",
+ "archiver": "^5.3.0",
+ "autoprefixer": "^9.1.5",
+ "concurrently": "^5.1.0",
+ "cross-env": "^5.2.0",
+ "cypress": "^3.1.0",
+ "eslint": "^9.3.0",
+ "execa": "^4.0.3",
+ "inquirer": "^6.2.0",
+ "lerna": "^4.0.0",
+ "postcss-nested": "^4.2.1",
+ "rimraf": "^3.0.2",
+ "semver": "^5.5.1",
+ "start-server-and-test": "^1.7.1",
+ "svg-inline-loader": "^0.8.2",
+ "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+ "vue-loader": "^17.2.2",
+ "webpack-dev-server": "^4.15.1"
+ },
+ "resolutions": {
+ "cypress": "=3.4.1",
+ "webpack-dev-server": "^4.15.1"
+ }
+}
\ No newline at end of file
diff --git a/vue-devtools/packages/api/package.json b/vue-devtools/packages/api/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..772d56664b4efeac9bd9571beb7d3363fb73d0b6
--- /dev/null
+++ b/vue-devtools/packages/api/package.json
@@ -0,0 +1,37 @@
+{
+ "name": "@vue/devtools-api",
+ "version": "6.6.3",
+ "description": "Interact with the Vue devtools from the page",
+ "author": {
+ "name": "Guillaume Chau"
+ },
+ "license": "MIT",
+ "repository": {
+ "url": "https://github.com/vuejs/vue-devtools.git",
+ "type": "git",
+ "directory": "packages/api"
+ },
+ "sideEffects": false,
+ "main": "lib/cjs/index.js",
+ "browser": "lib/esm/index.js",
+ "module": "lib/esm/index.js",
+ "types": "lib/esm/index.d.ts",
+ "files": [
+ "lib/cjs",
+ "lib/esm"
+ ],
+ "publishConfig": {
+ "access": "public"
+ },
+ "scripts": {
+ "build": "rimraf lib && yarn build:esm && yarn build:cjs",
+ "build:esm": "tsc --module es2015 --outDir lib/esm -d",
+ "build:cjs": "tsc --module commonjs --outDir lib/cjs",
+ "build:watch": "yarn tsc --module es2015 --outDir lib/esm -d -w --sourceMap"
+ },
+ "devDependencies": {
+ "@types/node": "^20.11.16",
+ "@types/webpack-env": "^1.15.1",
+ "typescript": "^5.3.3"
+ }
+}
\ No newline at end of file
diff --git a/vue-devtools/packages/api/src/api/api.ts b/vue-devtools/packages/api/src/api/api.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ab46a7e4d9fee8ac921d2816014bdba48d0c5b55
--- /dev/null
+++ b/vue-devtools/packages/api/src/api/api.ts
@@ -0,0 +1,122 @@
+import type { ComponentBounds, Hookable } from './hooks.js'
+import type { Context } from './context.js'
+import type { ComponentInstance, ComponentState, StateBase } from './component.js'
+import type { App } from './app.js'
+import type { ID } from './util.js'
+
+export interface DevtoolsPluginApi {
+ on: Hookable
+ notifyComponentUpdate: (instance?: ComponentInstance) => void
+ addTimelineLayer: (options: TimelineLayerOptions) => void
+ addTimelineEvent: (options: TimelineEventOptions) => void
+ addInspector: (options: CustomInspectorOptions) => void
+ sendInspectorTree: (inspectorId: string) => void
+ sendInspectorState: (inspectorId: string) => void
+ selectInspectorNode: (inspectorId: string, nodeId: string) => void
+ getComponentBounds: (instance: ComponentInstance) => Promise
+ getComponentName: (instance: ComponentInstance) => Promise
+ getComponentInstances: (app: App) => Promise
+ highlightElement: (instance: ComponentInstance) => void
+ unhighlightElement: () => void
+ getSettings: (pluginId?: string) => TSettings
+ now: () => number
+ /**
+ * @private
+ */
+ setSettings: (values: TSettings) => void
+}
+
+export interface AppRecord {
+ id: string
+ name: string
+ instanceMap: Map
+ rootInstance: ComponentInstance
+}
+
+export interface TimelineLayerOptions {
+ id: string
+ label: string
+ color: number
+ skipScreenshots?: boolean
+ groupsOnly?: boolean
+ ignoreNoDurationGroups?: boolean
+ screenshotOverlayRender?: (event: TimelineEvent & ScreenshotOverlayEvent, ctx: ScreenshotOverlayRenderContext) => ScreenshotOverlayRenderResult | Promise
+}
+
+export interface ScreenshotOverlayEvent {
+ layerId: string
+ renderMeta: any
+}
+
+export interface ScreenshotOverlayRenderContext {
+ screenshot: ScreenshotData
+ events: (TimelineEvent & ScreenshotOverlayEvent)[]
+ index: number
+}
+
+export type ScreenshotOverlayRenderResult = HTMLElement | string | false
+
+export interface ScreenshotData {
+ time: number
+}
+
+export interface TimelineEventOptions {
+ layerId: string
+ event: TimelineEvent
+ all?: boolean
+}
+
+export interface TimelineEvent {
+ time: number
+ data: TData
+ logType?: 'default' | 'warning' | 'error'
+ meta?: TMeta
+ groupId?: ID
+ title?: string
+ subtitle?: string
+}
+
+export interface TimelineMarkerOptions {
+ id: string
+ time: number
+ color: number
+ label: string
+ all?: boolean
+}
+
+export interface CustomInspectorOptions {
+ id: string
+ label: string
+ icon?: string
+ treeFilterPlaceholder?: string
+ stateFilterPlaceholder?: string
+ noSelectionText?: string
+ actions?: {
+ icon: string
+ tooltip?: string
+ action: () => void | Promise
+ }[]
+ nodeActions?: {
+ icon: string
+ tooltip?: string
+ action: (nodeId: string) => void | Promise
+ }[]
+}
+
+export interface CustomInspectorNode {
+ id: string
+ label: string
+ children?: CustomInspectorNode[]
+ tags?: InspectorNodeTag[]
+}
+
+export interface InspectorNodeTag {
+ label: string
+ textColor: number
+ backgroundColor: number
+ tooltip?: string
+}
+
+export interface CustomInspectorState {
+ [key: string]: (StateBase | Omit)[]
+}
diff --git a/vue-devtools/packages/api/src/api/app.ts b/vue-devtools/packages/api/src/api/app.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9873b8c540405be79af9ecf67fdec492fd838188
--- /dev/null
+++ b/vue-devtools/packages/api/src/api/app.ts
@@ -0,0 +1 @@
+export type App = any // @TODO
diff --git a/vue-devtools/packages/api/src/api/component.ts b/vue-devtools/packages/api/src/api/component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b6d934865c0ffdcfd6a37a1da091e7e0aa12529
--- /dev/null
+++ b/vue-devtools/packages/api/src/api/component.ts
@@ -0,0 +1,89 @@
+import type { InspectorNodeTag } from './api.js'
+import type { ID } from './util.js'
+
+export type ComponentInstance = any // @TODO
+
+export interface ComponentTreeNode {
+ uid: ID
+ id: string
+ name: string
+ renderKey: string | number
+ inactive: boolean
+ isFragment: boolean
+ hasChildren: boolean
+ children: ComponentTreeNode[]
+ domOrder?: number[]
+ consoleId?: string
+ isRouterView?: boolean
+ macthedRouteSegment?: string
+ tags: InspectorNodeTag[]
+ autoOpen: boolean
+ meta?: any
+}
+
+export interface InspectedComponentData {
+ id: string
+ name: string
+ file: string
+ state: ComponentState[]
+ functional?: boolean
+}
+
+export interface StateBase {
+ key: string
+ value: any
+ editable?: boolean
+ objectType?: 'ref' | 'reactive' | 'computed' | 'other'
+ raw?: string
+}
+
+export interface ComponentStateBase extends StateBase {
+ type: string
+}
+
+export interface ComponentPropState extends ComponentStateBase {
+ meta?: {
+ type: string
+ required: boolean
+ /** Vue 1 only */
+ mode?: 'default' | 'sync' | 'once'
+ }
+}
+
+export type ComponentBuiltinCustomStateTypes = 'function' | 'map' | 'set' | 'reference' | 'component' | 'component-definition' | 'router' | 'store'
+
+export interface ComponentCustomState extends ComponentStateBase {
+ value: CustomState
+}
+
+export interface CustomState {
+ _custom: {
+ type: ComponentBuiltinCustomStateTypes | string
+ objectType?: string
+ display?: string
+ tooltip?: string
+ value?: any
+ abstract?: boolean
+ file?: string
+ uid?: number
+ readOnly?: boolean
+ /** Configure immediate child fields */
+ fields?: {
+ abstract?: boolean
+ }
+ id?: any
+ actions?: {
+ icon: string
+ tooltip?: string
+ action: () => void | Promise
+ }[]
+ /** internal */
+ _reviveId?: number
+ }
+}
+
+export type ComponentState = ComponentStateBase | ComponentPropState | ComponentCustomState
+
+export interface ComponentDevtoolsOptions {
+ hide?: boolean
+}
diff --git a/vue-devtools/packages/api/src/api/context.ts b/vue-devtools/packages/api/src/api/context.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4b6b255039270ad64b37bec8752317c0e3271307
--- /dev/null
+++ b/vue-devtools/packages/api/src/api/context.ts
@@ -0,0 +1,6 @@
+import type { AppRecord } from './api.js'
+
+export interface Context {
+ currentTab: string
+ currentAppRecord: AppRecord
+}
diff --git a/vue-devtools/packages/api/src/api/hooks.ts b/vue-devtools/packages/api/src/api/hooks.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8a88a619f7e1e93d0b74461348d70fc619a3cd21
--- /dev/null
+++ b/vue-devtools/packages/api/src/api/hooks.ts
@@ -0,0 +1,187 @@
+import type { ComponentDevtoolsOptions, ComponentInstance, ComponentTreeNode, InspectedComponentData } from './component.js'
+import type { App } from './app.js'
+import type { CustomInspectorNode, CustomInspectorState, TimelineEvent } from './api.js'
+
+// eslint-disable-next-line no-restricted-syntax
+export const enum Hooks {
+ TRANSFORM_CALL = 'transformCall',
+ GET_APP_RECORD_NAME = 'getAppRecordName',
+ GET_APP_ROOT_INSTANCE = 'getAppRootInstance',
+ REGISTER_APPLICATION = 'registerApplication',
+ WALK_COMPONENT_TREE = 'walkComponentTree',
+ VISIT_COMPONENT_TREE = 'visitComponentTree',
+ WALK_COMPONENT_PARENTS = 'walkComponentParents',
+ INSPECT_COMPONENT = 'inspectComponent',
+ GET_COMPONENT_BOUNDS = 'getComponentBounds',
+ GET_COMPONENT_NAME = 'getComponentName',
+ GET_COMPONENT_INSTANCES = 'getComponentInstances',
+ GET_ELEMENT_COMPONENT = 'getElementComponent',
+ GET_COMPONENT_ROOT_ELEMENTS = 'getComponentRootElements',
+ EDIT_COMPONENT_STATE = 'editComponentState',
+ GET_COMPONENT_DEVTOOLS_OPTIONS = 'getAppDevtoolsOptions',
+ GET_COMPONENT_RENDER_CODE = 'getComponentRenderCode',
+ INSPECT_TIMELINE_EVENT = 'inspectTimelineEvent',
+ TIMELINE_CLEARED = 'timelineCleared',
+ GET_INSPECTOR_TREE = 'getInspectorTree',
+ GET_INSPECTOR_STATE = 'getInspectorState',
+ EDIT_INSPECTOR_STATE = 'editInspectorState',
+ SET_PLUGIN_SETTINGS = 'setPluginSettings',
+}
+
+export interface ComponentBounds {
+ left: number
+ top: number
+ width: number
+ height: number
+}
+
+export interface HookPayloads {
+ [Hooks.TRANSFORM_CALL]: {
+ callName: string
+ inArgs: any[]
+ outArgs: any[]
+ }
+ [Hooks.GET_APP_RECORD_NAME]: {
+ app: App
+ name: string
+ }
+ [Hooks.GET_APP_ROOT_INSTANCE]: {
+ app: App
+ root: ComponentInstance
+ }
+ [Hooks.REGISTER_APPLICATION]: {
+ app: App
+ }
+ [Hooks.WALK_COMPONENT_TREE]: {
+ componentInstance: ComponentInstance
+ componentTreeData: ComponentTreeNode[]
+ maxDepth: number
+ filter: string
+ recursively: boolean
+ }
+ [Hooks.VISIT_COMPONENT_TREE]: {
+ app: App
+ componentInstance: ComponentInstance
+ treeNode: ComponentTreeNode
+ filter: string
+ }
+ [Hooks.WALK_COMPONENT_PARENTS]: {
+ componentInstance: ComponentInstance
+ parentInstances: ComponentInstance[]
+ }
+ [Hooks.INSPECT_COMPONENT]: {
+ app: App
+ componentInstance: ComponentInstance
+ instanceData: InspectedComponentData
+ }
+ [Hooks.GET_COMPONENT_BOUNDS]: {
+ componentInstance: ComponentInstance
+ bounds: ComponentBounds
+ }
+ [Hooks.GET_COMPONENT_NAME]: {
+ componentInstance: ComponentInstance
+ name: string
+ }
+ [Hooks.GET_COMPONENT_INSTANCES]: {
+ app: App
+ componentInstances: ComponentInstance[]
+ }
+ [Hooks.GET_ELEMENT_COMPONENT]: {
+ element: HTMLElement | any
+ componentInstance: ComponentInstance
+ }
+ [Hooks.GET_COMPONENT_ROOT_ELEMENTS]: {
+ componentInstance: ComponentInstance
+ rootElements: (HTMLElement | any)[]
+ }
+ [Hooks.EDIT_COMPONENT_STATE]: {
+ app: App
+ componentInstance: ComponentInstance
+ path: string[]
+ type: string
+ state: EditStatePayload
+ set: (object: any, path?: string | (string[]), value?: any, cb?: (object: any, field: string, value: any) => void) => void
+ }
+ [Hooks.GET_COMPONENT_DEVTOOLS_OPTIONS]: {
+ componentInstance: ComponentInstance
+ options: ComponentDevtoolsOptions
+ }
+ [Hooks.GET_COMPONENT_RENDER_CODE]: {
+ componentInstance: ComponentInstance
+ code: string
+ }
+ [Hooks.INSPECT_TIMELINE_EVENT]: {
+ app: App
+ layerId: string
+ event: TimelineEvent
+ all?: boolean
+ data: any
+ }
+ [Hooks.TIMELINE_CLEARED]: Record
+ [Hooks.GET_INSPECTOR_TREE]: {
+ app: App
+ inspectorId: string
+ filter: string
+ rootNodes: CustomInspectorNode[]
+ }
+ [Hooks.GET_INSPECTOR_STATE]: {
+ app: App
+ inspectorId: string
+ nodeId: string
+ state: CustomInspectorState
+ }
+ [Hooks.EDIT_INSPECTOR_STATE]: {
+ app: App
+ inspectorId: string
+ nodeId: string
+ path: string[]
+ type: string
+ state: EditStatePayload
+ set: (object: any, path?: string | (string[]), value?: any, cb?: (object: any, field: string, value: any) => void) => void
+ }
+ [Hooks.SET_PLUGIN_SETTINGS]: {
+ app: App
+ pluginId: string
+ key: string
+ newValue: any
+ oldValue: any
+ settings: any
+ }
+}
+
+export type EditStatePayload = {
+ value: any
+ newKey?: string | null
+ remove?: undefined | false
+} | {
+ value?: undefined
+ newKey?: undefined
+ remove: true
+}
+
+export type HookHandler = (payload: TPayload, ctx: TContext) => void | Promise
+
+export interface Hookable {
+ transformCall: (handler: HookHandler) => any
+ getAppRecordName: (handler: HookHandler) => any
+ getAppRootInstance: (handler: HookHandler) => any
+ registerApplication: (handler: HookHandler) => any
+ walkComponentTree: (handler: HookHandler) => any
+ visitComponentTree: (handler: HookHandler) => any
+ walkComponentParents: (handler: HookHandler) => any
+ inspectComponent: (handler: HookHandler) => any
+ getComponentBounds: (handler: HookHandler) => any
+ getComponentName: (handler: HookHandler) => any
+ getComponentInstances: (handler: HookHandler) => any
+ getElementComponent: (handler: HookHandler) => any
+ getComponentRootElements: (handler: HookHandler) => any
+ editComponentState: (handler: HookHandler) => any
+ getComponentDevtoolsOptions: (handler: HookHandler) => any
+ getComponentRenderCode: (handler: HookHandler) => any
+ inspectTimelineEvent: (handler: HookHandler) => any
+ timelineCleared: (handler: HookHandler) => any
+ getInspectorTree: (handler: HookHandler) => any
+ getInspectorState: (handler: HookHandler) => any
+ editInspectorState: (handler: HookHandler) => any
+ setPluginSettings: (handler: HookHandler) => any
+}
diff --git a/vue-devtools/packages/api/src/api/index.ts b/vue-devtools/packages/api/src/api/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..06510db1b45c2dfa9ffd7618d8ca746f1275c0c3
--- /dev/null
+++ b/vue-devtools/packages/api/src/api/index.ts
@@ -0,0 +1,6 @@
+export * from './api.js'
+export * from './app.js'
+export * from './component.js'
+export * from './context.js'
+export * from './hooks.js'
+export * from './util.js'
diff --git a/vue-devtools/packages/api/src/api/util.ts b/vue-devtools/packages/api/src/api/util.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6f4084947caf4e50c65bf9b499ace74cba24e90d
--- /dev/null
+++ b/vue-devtools/packages/api/src/api/util.ts
@@ -0,0 +1,5 @@
+export type ID = number | string
+
+export interface WithId {
+ id: ID
+}
diff --git a/vue-devtools/packages/api/src/const.ts b/vue-devtools/packages/api/src/const.ts
new file mode 100644
index 0000000000000000000000000000000000000000..102ad1d026193fffe22a3fdebc3f11df59ffaf40
--- /dev/null
+++ b/vue-devtools/packages/api/src/const.ts
@@ -0,0 +1,2 @@
+export const HOOK_SETUP = 'devtools-plugin:setup'
+export const HOOK_PLUGIN_SETTINGS_SET = 'plugin:settings:set'
diff --git a/vue-devtools/packages/api/src/env.ts b/vue-devtools/packages/api/src/env.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f5916ed2f277874d5601dafe2b941ffc982a057f
--- /dev/null
+++ b/vue-devtools/packages/api/src/env.ts
@@ -0,0 +1,28 @@
+import type { ApiProxy } from './proxy.js'
+import type { PluginDescriptor, SetupFunction } from './index.js'
+
+export interface PluginQueueItem {
+ pluginDescriptor: PluginDescriptor
+ setupFn: SetupFunction
+ proxy?: ApiProxy
+}
+
+interface GlobalTarget {
+ __VUE_DEVTOOLS_PLUGINS__?: PluginQueueItem[]
+ __VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__?: boolean
+}
+
+export function getDevtoolsGlobalHook(): any {
+ return (getTarget() as any).__VUE_DEVTOOLS_GLOBAL_HOOK__
+}
+
+export function getTarget(): GlobalTarget {
+ // @ts-expect-error navigator and windows are not available in all environments
+ return (typeof navigator !== 'undefined' && typeof window !== 'undefined')
+ ? window
+ : typeof globalThis !== 'undefined'
+ ? globalThis
+ : {}
+}
+
+export const isProxyAvailable = typeof Proxy === 'function'
diff --git a/vue-devtools/packages/api/src/index.ts b/vue-devtools/packages/api/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c929458de98c4e1abaf50d9f33ace77b06db6155
--- /dev/null
+++ b/vue-devtools/packages/api/src/index.ts
@@ -0,0 +1,56 @@
+import { getDevtoolsGlobalHook, getTarget, isProxyAvailable } from './env.js'
+import { HOOK_SETUP } from './const.js'
+import type { DevtoolsPluginApi } from './api/index.js'
+import { ApiProxy } from './proxy.js'
+import type { ExtractSettingsTypes, PluginDescriptor, PluginSettingsItem } from './plugin.js'
+
+export * from './api/index.js'
+export * from './plugin.js'
+export * from './time.js'
+export { PluginQueueItem } from './env.js'
+
+// https://github.com/microsoft/TypeScript/issues/30680#issuecomment-752725353
+type Cast = A extends B ? A : B
+type Narrowable =
+ | string
+ | number
+ | bigint
+ | boolean
+type Narrow = Cast })>
+
+// Prevent properties not in PluginDescriptor
+// We need this because of the `extends` in the generic TDescriptor
+type Exact = {
+ [K in keyof C]: K extends keyof T ? T[K] : never
+}
+
+export type SetupFunction = (api: DevtoolsPluginApi) => void
+
+export function setupDevtoolsPlugin<
+ TDescriptor extends Exact,
+ TSettings = ExtractSettingsTypes ? S : Record : Record>,
+>(pluginDescriptor: Narrow, setupFn: SetupFunction) {
+ const descriptor = pluginDescriptor as unknown as PluginDescriptor
+ const target = getTarget()
+ const hook = getDevtoolsGlobalHook()
+ const enableProxy = isProxyAvailable && descriptor.enableEarlyProxy
+ if (hook && (target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ || !enableProxy)) {
+ hook.emit(HOOK_SETUP, pluginDescriptor, setupFn)
+ }
+ else {
+ const proxy = enableProxy ? new ApiProxy(descriptor, hook) : null
+
+ const list = target.__VUE_DEVTOOLS_PLUGINS__ = target.__VUE_DEVTOOLS_PLUGINS__ || []
+ list.push({
+ pluginDescriptor: descriptor,
+ setupFn,
+ proxy,
+ })
+
+ if (proxy) {
+ setupFn(proxy.proxiedTarget as DevtoolsPluginApi)
+ }
+ }
+}
diff --git a/vue-devtools/packages/api/src/plugin.ts b/vue-devtools/packages/api/src/plugin.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f0871879361a5c7a85d2163c0db61ea89d6d2ab8
--- /dev/null
+++ b/vue-devtools/packages/api/src/plugin.ts
@@ -0,0 +1,51 @@
+import type { App } from './api/index.js'
+
+export interface PluginDescriptor {
+ id: string
+ label: string
+ app: App
+ packageName?: string
+ homepage?: string
+ componentStateTypes?: string[]
+ logo?: string
+ disableAppScope?: boolean
+ disablePluginScope?: boolean
+ /**
+ * Run the plugin setup and expose the api even if the devtools is not opened yet.
+ * Useful to record timeline events early.
+ */
+ enableEarlyProxy?: boolean
+ settings?: Record
+}
+
+export type PluginSettingsItem = {
+ label: string
+ description?: string
+} & ({
+ type: 'boolean'
+ defaultValue: boolean
+} | {
+ type: 'choice'
+ defaultValue: string | number
+ options: { value: string | number, label: string }[]
+ component?: 'select' | 'button-group'
+} | {
+ type: 'text'
+ defaultValue: string
+})
+
+type InferSettingsType<
+ T extends PluginSettingsItem,
+> = [T] extends [{ type: 'boolean' }]
+ ? boolean
+ : [T] extends [{ type: 'choice' }]
+ ? T['options'][number]['value']
+ : [T] extends [{ type: 'text' }]
+ ? string
+ : unknown
+
+export type ExtractSettingsTypes<
+ O extends Record,
+> = {
+ [K in keyof O]: InferSettingsType
+}
diff --git a/vue-devtools/packages/api/src/proxy.ts b/vue-devtools/packages/api/src/proxy.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1727060323e81bb233766e92b6cafb42074c79f7
--- /dev/null
+++ b/vue-devtools/packages/api/src/proxy.ts
@@ -0,0 +1,136 @@
+import type { Context, DevtoolsPluginApi, Hookable } from './api/index.js'
+import type { PluginDescriptor } from './plugin.js'
+import { HOOK_PLUGIN_SETTINGS_SET } from './const.js'
+import { now } from './time.js'
+
+interface QueueItem {
+ method: string
+ args: any[]
+ resolve?: (value?: any) => void
+}
+
+export class ApiProxy = DevtoolsPluginApi> {
+ target: TTarget | null
+ targetQueue: QueueItem[]
+ proxiedTarget: TTarget
+
+ onQueue: QueueItem[]
+ proxiedOn: Hookable
+
+ plugin: PluginDescriptor
+ hook: any
+ fallbacks: Record
+
+ constructor(plugin: PluginDescriptor, hook: any) {
+ this.target = null
+ this.targetQueue = []
+ this.onQueue = []
+
+ this.plugin = plugin
+ this.hook = hook
+
+ const defaultSettings: Record = {}
+ if (plugin.settings) {
+ for (const id in plugin.settings) {
+ const item = plugin.settings[id]
+ defaultSettings[id] = item.defaultValue
+ }
+ }
+ const localSettingsSaveId = `__vue-devtools-plugin-settings__${plugin.id}`
+ let currentSettings = Object.assign({}, defaultSettings)
+ try {
+ const raw = localStorage.getItem(localSettingsSaveId)
+ const data = JSON.parse(raw)
+ Object.assign(currentSettings, data)
+ }
+ catch (e) {
+ // noop
+ }
+
+ this.fallbacks = {
+ getSettings() {
+ return currentSettings
+ },
+ setSettings(value) {
+ try {
+ localStorage.setItem(localSettingsSaveId, JSON.stringify(value))
+ }
+ catch (e) {
+ // noop
+ }
+ currentSettings = value
+ },
+ now() {
+ return now()
+ },
+ }
+
+ if (hook) {
+ hook.on(HOOK_PLUGIN_SETTINGS_SET, (pluginId, value) => {
+ if (pluginId === this.plugin.id) {
+ this.fallbacks.setSettings(value)
+ }
+ })
+ }
+
+ this.proxiedOn = new Proxy({} as Hookable, {
+ get: (_target, prop: string) => {
+ if (this.target) {
+ return this.target.on[prop]
+ }
+ else {
+ return (...args) => {
+ this.onQueue.push({
+ method: prop,
+ args,
+ })
+ }
+ }
+ },
+ })
+
+ this.proxiedTarget = new Proxy({} as TTarget, {
+ get: (_target, prop: string) => {
+ if (this.target) {
+ return this.target[prop]
+ }
+ else if (prop === 'on') {
+ return this.proxiedOn
+ }
+ else if (Object.keys(this.fallbacks).includes(prop)) {
+ return (...args) => {
+ this.targetQueue.push({
+ method: prop,
+ args,
+ resolve: () => { /* noop */ },
+ })
+ return this.fallbacks[prop](...args)
+ }
+ }
+ else {
+ return (...args) => {
+ return new Promise((resolve) => {
+ this.targetQueue.push({
+ method: prop,
+ args,
+ resolve,
+ })
+ })
+ }
+ }
+ },
+ })
+ }
+
+ async setRealTarget(target: TTarget) {
+ this.target = target
+
+ for (const item of this.onQueue) {
+ this.target.on[item.method](...item.args)
+ }
+
+ for (const item of this.targetQueue) {
+ item.resolve(await this.target[item.method](...item.args))
+ }
+ }
+}
diff --git a/vue-devtools/packages/api/src/time.ts b/vue-devtools/packages/api/src/time.ts
new file mode 100644
index 0000000000000000000000000000000000000000..87f919c6bb35d60a3e7fe2f012fa06ee207073be
--- /dev/null
+++ b/vue-devtools/packages/api/src/time.ts
@@ -0,0 +1,24 @@
+let supported: boolean
+let perf: Performance
+
+export function isPerformanceSupported() {
+ if (supported !== undefined) {
+ return supported
+ }
+ if (typeof window !== 'undefined' && window.performance) {
+ supported = true
+ perf = window.performance
+ }
+ else if (typeof globalThis !== 'undefined' && (globalThis as any).perf_hooks?.performance) {
+ supported = true
+ perf = (globalThis as any).perf_hooks.performance
+ }
+ else {
+ supported = false
+ }
+ return supported
+}
+
+export function now() {
+ return isPerformanceSupported() ? perf.now() : Date.now()
+}
diff --git a/vue-devtools/packages/api/tsconfig.json b/vue-devtools/packages/api/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..51b26605431a259a65a3c1722acf31891350a5e4
--- /dev/null
+++ b/vue-devtools/packages/api/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ES2017",
+ "lib": ["ESNext", "DOM"],
+ "module": "ESNext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "types": ["node", "webpack-env"],
+ "strictBindCallApply": true,
+ "strictFunctionTypes": true,
+ "alwaysStrict": true,
+ // Strict
+ "noImplicitAny": false,
+ "noImplicitThis": true,
+ "removeComments": false,
+ "sourceMap": false,
+ "allowSyntheticDefaultImports": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "preserveWatchOutput": true
+ },
+ "include": ["src/**/*"],
+ "exclude": ["node_modules"]
+}
diff --git a/vue-devtools/packages/app-backend-api/package.json b/vue-devtools/packages/app-backend-api/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..a271ec9312ae7f863615ca757e61d0b75c9b7c83
--- /dev/null
+++ b/vue-devtools/packages/app-backend-api/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "@vue-devtools/app-backend-api",
+ "version": "0.0.0",
+ "private": true,
+ "main": "./lib/index.js",
+ "types": "./lib/index.d.ts",
+ "scripts": {
+ "build": "rimraf lib && yarn ts",
+ "build:watch": "yarn ts -w",
+ "ts": "tsc -d -outDir lib"
+ },
+ "dependencies": {
+ "@vue-devtools/shared-utils": "^0.0.0",
+ "@vue/devtools-api": "^6.0.0-beta.1"
+ },
+ "devDependencies": {
+ "@types/node": "^20.11.16",
+ "@types/webpack-env": "^1.15.1",
+ "typescript": "^5.3.3"
+ }
+}
diff --git a/vue-devtools/packages/app-backend-api/src/api.ts b/vue-devtools/packages/app-backend-api/src/api.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c08f96cd23b59301882e25245b779bdc03799905
--- /dev/null
+++ b/vue-devtools/packages/app-backend-api/src/api.ts
@@ -0,0 +1,398 @@
+import type {
+ Bridge,
+} from '@vue-devtools/shared-utils'
+import {
+ HookEvents,
+ PluginPermission,
+ StateEditor,
+ getPluginDefaultSettings,
+ getPluginSettings,
+ hasPluginPermission,
+ setPluginSettings,
+} from '@vue-devtools/shared-utils'
+import type {
+ App,
+ ComponentDevtoolsOptions,
+ ComponentInstance,
+ ComponentTreeNode,
+ CustomInspectorOptions,
+ DevtoolsPluginApi,
+ EditStatePayload,
+ HookPayloads,
+ TimelineEventOptions,
+ TimelineLayerOptions,
+ WithId,
+} from '@vue/devtools-api'
+import {
+ Hooks,
+ now,
+} from '@vue/devtools-api'
+import { DevtoolsHookable } from './hooks'
+import type { BackendContext } from './backend-context'
+import type { Plugin } from './plugin'
+import type { DevtoolsBackend } from './backend'
+import type { AppRecord } from './app-record'
+
+const pluginOn: DevtoolsHookable[] = []
+
+export class DevtoolsApi {
+ bridge: Bridge
+ ctx: BackendContext
+ backend: DevtoolsBackend
+ on: DevtoolsHookable
+ stateEditor: StateEditor = new StateEditor()
+
+ constructor(backend: DevtoolsBackend, ctx: BackendContext) {
+ this.backend = backend
+ this.ctx = ctx
+ this.bridge = ctx.bridge
+ this.on = new DevtoolsHookable(ctx)
+ }
+
+ async callHook(eventType: T, payload: HookPayloads[T], ctx: BackendContext = this.ctx) {
+ payload = await this.on.callHandlers(eventType, payload, ctx)
+ for (const on of pluginOn) {
+ payload = await on.callHandlers(eventType, payload, ctx)
+ }
+ return payload
+ }
+
+ async transformCall(callName: string, ...args) {
+ const payload = await this.callHook(Hooks.TRANSFORM_CALL, {
+ callName,
+ inArgs: args,
+ outArgs: args.slice(),
+ })
+ return payload.outArgs
+ }
+
+ async getAppRecordName(app: App, defaultName: string): Promise {
+ const payload = await this.callHook(Hooks.GET_APP_RECORD_NAME, {
+ app,
+ name: null,
+ })
+ if (payload.name) {
+ return payload.name
+ }
+ else {
+ return `App ${defaultName}`
+ }
+ }
+
+ async getAppRootInstance(app: App) {
+ const payload = await this.callHook(Hooks.GET_APP_ROOT_INSTANCE, {
+ app,
+ root: null,
+ })
+ return payload.root
+ }
+
+ async registerApplication(app: App) {
+ await this.callHook(Hooks.REGISTER_APPLICATION, {
+ app,
+ })
+ }
+
+ async walkComponentTree(instance: ComponentInstance, maxDepth = -1, filter: string = null, recursively = false) {
+ const payload = await this.callHook(Hooks.WALK_COMPONENT_TREE, {
+ componentInstance: instance,
+ componentTreeData: null,
+ maxDepth,
+ filter,
+ recursively,
+ })
+ return payload.componentTreeData
+ }
+
+ async visitComponentTree(instance: ComponentInstance, treeNode: ComponentTreeNode, filter: string = null, app: App) {
+ const payload = await this.callHook(Hooks.VISIT_COMPONENT_TREE, {
+ app,
+ componentInstance: instance,
+ treeNode,
+ filter,
+ })
+ return payload.treeNode
+ }
+
+ async walkComponentParents(instance: ComponentInstance) {
+ const payload = await this.callHook(Hooks.WALK_COMPONENT_PARENTS, {
+ componentInstance: instance,
+ parentInstances: [],
+ })
+ return payload.parentInstances
+ }
+
+ async inspectComponent(instance: ComponentInstance, app: App) {
+ const payload = await this.callHook(Hooks.INSPECT_COMPONENT, {
+ app,
+ componentInstance: instance,
+ instanceData: null,
+ })
+ return payload.instanceData
+ }
+
+ async getComponentBounds(instance: ComponentInstance) {
+ const payload = await this.callHook(Hooks.GET_COMPONENT_BOUNDS, {
+ componentInstance: instance,
+ bounds: null,
+ })
+ return payload.bounds
+ }
+
+ async getComponentName(instance: ComponentInstance) {
+ const payload = await this.callHook(Hooks.GET_COMPONENT_NAME, {
+ componentInstance: instance,
+ name: null,
+ })
+ return payload.name
+ }
+
+ async getComponentInstances(app: App) {
+ const payload = await this.callHook(Hooks.GET_COMPONENT_INSTANCES, {
+ app,
+ componentInstances: [],
+ })
+ return payload.componentInstances
+ }
+
+ async getElementComponent(element: HTMLElement | any) {
+ const payload = await this.callHook(Hooks.GET_ELEMENT_COMPONENT, {
+ element,
+ componentInstance: null,
+ })
+ return payload.componentInstance
+ }
+
+ async getComponentRootElements(instance: ComponentInstance) {
+ const payload = await this.callHook(Hooks.GET_COMPONENT_ROOT_ELEMENTS, {
+ componentInstance: instance,
+ rootElements: [],
+ })
+ return payload.rootElements
+ }
+
+ async editComponentState(instance: ComponentInstance, dotPath: string, type: string, state: EditStatePayload, app: App) {
+ const arrayPath = dotPath.split('.')
+ const payload = await this.callHook(Hooks.EDIT_COMPONENT_STATE, {
+ app,
+ componentInstance: instance,
+ path: arrayPath,
+ type,
+ state,
+ set: (object, path = arrayPath, value = state.value, cb?) => this.stateEditor.set(object, path, value, cb || this.stateEditor.createDefaultSetCallback(state)),
+ })
+ return payload.componentInstance
+ }
+
+ async getComponentDevtoolsOptions(instance: ComponentInstance): Promise {
+ const payload = await this.callHook(Hooks.GET_COMPONENT_DEVTOOLS_OPTIONS, {
+ componentInstance: instance,
+ options: null,
+ })
+ return payload.options || {}
+ }
+
+ async getComponentRenderCode(instance: ComponentInstance): Promise<{
+ code: string
+ }> {
+ const payload = await this.callHook(Hooks.GET_COMPONENT_RENDER_CODE, {
+ componentInstance: instance,
+ code: null,
+ })
+ return {
+ code: payload.code,
+ }
+ }
+
+ async inspectTimelineEvent(eventData: TimelineEventOptions & WithId, app: App) {
+ const payload = await this.callHook(Hooks.INSPECT_TIMELINE_EVENT, {
+ event: eventData.event,
+ layerId: eventData.layerId,
+ app,
+ data: eventData.event.data,
+ all: eventData.all,
+ })
+ return payload.data
+ }
+
+ async clearTimeline() {
+ await this.callHook(Hooks.TIMELINE_CLEARED, {})
+ }
+
+ async getInspectorTree(inspectorId: string, app: App, filter: string) {
+ const payload = await this.callHook(Hooks.GET_INSPECTOR_TREE, {
+ inspectorId,
+ app,
+ filter,
+ rootNodes: [],
+ })
+ return payload.rootNodes
+ }
+
+ async getInspectorState(inspectorId: string, app: App, nodeId: string) {
+ const payload = await this.callHook(Hooks.GET_INSPECTOR_STATE, {
+ inspectorId,
+ app,
+ nodeId,
+ state: null,
+ })
+ return payload.state
+ }
+
+ async editInspectorState(inspectorId: string, app: App, nodeId: string, dotPath: string, type: string, state: EditStatePayload) {
+ const arrayPath = dotPath.split('.')
+ await this.callHook(Hooks.EDIT_INSPECTOR_STATE, {
+ inspectorId,
+ app,
+ nodeId,
+ path: arrayPath,
+ type,
+ state,
+ set: (object, path = arrayPath, value = state.value, cb?) => this.stateEditor.set(object, path, value, cb || this.stateEditor.createDefaultSetCallback(state)),
+ })
+ }
+
+ now() {
+ return now()
+ }
+}
+
+export class DevtoolsPluginApiInstance implements DevtoolsPluginApi {
+ bridge: Bridge
+ ctx: BackendContext
+ plugin: Plugin
+ appRecord: AppRecord
+ backendApi: DevtoolsApi
+ on: DevtoolsHookable
+ private defaultSettings: TSettings
+
+ constructor(plugin: Plugin, appRecord: AppRecord, ctx: BackendContext) {
+ this.bridge = ctx.bridge
+ this.ctx = ctx
+ this.plugin = plugin
+ this.appRecord = appRecord
+ this.backendApi = appRecord.backend.api
+ this.defaultSettings = getPluginDefaultSettings(plugin.descriptor.settings)
+ this.on = new DevtoolsHookable(ctx, plugin)
+ pluginOn.push(this.on)
+ }
+
+ // Plugin API
+
+ async notifyComponentUpdate(instance: ComponentInstance = null) {
+ if (!this.enabled || !this.hasPermission(PluginPermission.COMPONENTS)) {
+ return
+ }
+
+ if (instance) {
+ this.ctx.hook.emit(HookEvents.COMPONENT_UPDATED, ...await this.backendApi.transformCall(HookEvents.COMPONENT_UPDATED, instance))
+ }
+ else {
+ this.ctx.hook.emit(HookEvents.COMPONENT_UPDATED)
+ }
+ }
+
+ addTimelineLayer(options: TimelineLayerOptions) {
+ if (!this.enabled || !this.hasPermission(PluginPermission.TIMELINE)) {
+ return false
+ }
+
+ this.ctx.hook.emit(HookEvents.TIMELINE_LAYER_ADDED, options, this.plugin)
+ return true
+ }
+
+ addTimelineEvent(options: TimelineEventOptions) {
+ if (!this.enabled || !this.hasPermission(PluginPermission.TIMELINE)) {
+ return false
+ }
+
+ this.ctx.hook.emit(HookEvents.TIMELINE_EVENT_ADDED, options, this.plugin)
+ return true
+ }
+
+ addInspector(options: CustomInspectorOptions) {
+ if (!this.enabled || !this.hasPermission(PluginPermission.CUSTOM_INSPECTOR)) {
+ return false
+ }
+
+ this.ctx.hook.emit(HookEvents.CUSTOM_INSPECTOR_ADD, options, this.plugin)
+ return true
+ }
+
+ sendInspectorTree(inspectorId: string) {
+ if (!this.enabled || !this.hasPermission(PluginPermission.CUSTOM_INSPECTOR)) {
+ return false
+ }
+
+ this.ctx.hook.emit(HookEvents.CUSTOM_INSPECTOR_SEND_TREE, inspectorId, this.plugin)
+ return true
+ }
+
+ sendInspectorState(inspectorId: string) {
+ if (!this.enabled || !this.hasPermission(PluginPermission.CUSTOM_INSPECTOR)) {
+ return false
+ }
+
+ this.ctx.hook.emit(HookEvents.CUSTOM_INSPECTOR_SEND_STATE, inspectorId, this.plugin)
+ return true
+ }
+
+ selectInspectorNode(inspectorId: string, nodeId: string) {
+ if (!this.enabled || !this.hasPermission(PluginPermission.CUSTOM_INSPECTOR)) {
+ return false
+ }
+
+ this.ctx.hook.emit(HookEvents.CUSTOM_INSPECTOR_SELECT_NODE, inspectorId, nodeId, this.plugin)
+ return true
+ }
+
+ getComponentBounds(instance: ComponentInstance) {
+ return this.backendApi.getComponentBounds(instance)
+ }
+
+ getComponentName(instance: ComponentInstance) {
+ return this.backendApi.getComponentName(instance)
+ }
+
+ getComponentInstances(app: App) {
+ return this.backendApi.getComponentInstances(app)
+ }
+
+ highlightElement(instance: ComponentInstance) {
+ if (!this.enabled || !this.hasPermission(PluginPermission.COMPONENTS)) {
+ return false
+ }
+
+ this.ctx.hook.emit(HookEvents.COMPONENT_HIGHLIGHT, instance.__VUE_DEVTOOLS_UID__, this.plugin)
+ return true
+ }
+
+ unhighlightElement() {
+ if (!this.enabled || !this.hasPermission(PluginPermission.COMPONENTS)) {
+ return false
+ }
+
+ this.ctx.hook.emit(HookEvents.COMPONENT_UNHIGHLIGHT, this.plugin)
+ return true
+ }
+
+ getSettings(pluginId?: string) {
+ return getPluginSettings(pluginId ?? this.plugin.descriptor.id, this.defaultSettings)
+ }
+
+ setSettings(value: TSettings, pluginId?: string) {
+ setPluginSettings(pluginId ?? this.plugin.descriptor.id, value)
+ }
+
+ now() {
+ return now()
+ }
+
+ private get enabled() {
+ return hasPluginPermission(this.plugin.descriptor.id, PluginPermission.ENABLED)
+ }
+
+ private hasPermission(permission: PluginPermission) {
+ return hasPluginPermission(this.plugin.descriptor.id, permission)
+ }
+}
diff --git a/vue-devtools/packages/app-backend-api/src/app-record.ts b/vue-devtools/packages/app-backend-api/src/app-record.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8aad57d040be55bbe23abe62b9ca1db3ea5e0813
--- /dev/null
+++ b/vue-devtools/packages/app-backend-api/src/app-record.ts
@@ -0,0 +1,34 @@
+import type { App, ComponentInstance } from '@vue/devtools-api'
+import type { DevtoolsBackend } from './backend'
+
+export interface AppRecordOptions {
+ app: App
+ version: string
+ types: { [key: string]: string | symbol }
+ meta?: any
+}
+
+export interface AppRecord {
+ id: string
+ name: string
+ options: AppRecordOptions
+ backend: DevtoolsBackend
+ lastInspectedComponentId: string
+ instanceMap: Map
+ rootInstance: ComponentInstance
+ componentFilter?: string
+ perfGroupIds: Map
+ iframe: string
+ meta: any
+ missingInstanceQueue: Set
+}
+
+/**
+ * Used in the frontend
+ */
+export interface SimpleAppRecord {
+ id: string
+ name: string
+ version: string
+ iframe: string
+}
diff --git a/vue-devtools/packages/app-backend-api/src/backend-context.ts b/vue-devtools/packages/app-backend-api/src/backend-context.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d878ec0631eae240af7ecb9a359d6796fe41a6ea
--- /dev/null
+++ b/vue-devtools/packages/app-backend-api/src/backend-context.ts
@@ -0,0 +1,73 @@
+import type { Bridge } from '@vue-devtools/shared-utils'
+import type {
+ CustomInspectorOptions,
+ ID,
+ TimelineEventOptions,
+ TimelineLayerOptions,
+ TimelineMarkerOptions,
+ WithId,
+} from '@vue/devtools-api'
+import type { AppRecord } from './app-record'
+import type { Plugin } from './plugin'
+import type { DevtoolsHook } from './global-hook'
+import type { DevtoolsBackend } from './backend'
+
+export interface BackendContext {
+ bridge: Bridge
+ hook: DevtoolsHook
+ backends: DevtoolsBackend[]
+ appRecords: AppRecord[]
+ currentTab: string
+ currentAppRecord: AppRecord
+ currentInspectedComponentId: string
+ plugins: Plugin[]
+ currentPlugin: Plugin
+ timelineLayers: TimelineLayer[]
+ nextTimelineEventId: number
+ timelineEventMap: Map
+ perfUniqueGroupId: number
+ customInspectors: CustomInspector[]
+ timelineMarkers: TimelineMarker[]
+}
+
+export interface TimelineLayer extends TimelineLayerOptions {
+ appRecord: AppRecord | null
+ plugin: Plugin
+ events: (TimelineEventOptions & WithId)[]
+}
+
+export interface TimelineMarker extends TimelineMarkerOptions {
+ appRecord: AppRecord | null
+}
+
+export interface CustomInspector extends CustomInspectorOptions {
+ appRecord: AppRecord
+ plugin: Plugin
+ treeFilter: string
+ selectedNodeId: string
+}
+
+export interface CreateBackendContextOptions {
+ bridge: Bridge
+ hook: DevtoolsHook
+}
+
+export function createBackendContext(options: CreateBackendContextOptions): BackendContext {
+ return {
+ bridge: options.bridge,
+ hook: options.hook,
+ backends: [],
+ appRecords: [],
+ currentTab: null,
+ currentAppRecord: null,
+ currentInspectedComponentId: null,
+ plugins: [],
+ currentPlugin: null,
+ timelineLayers: [],
+ nextTimelineEventId: 0,
+ timelineEventMap: new Map(),
+ perfUniqueGroupId: 0,
+ customInspectors: [],
+ timelineMarkers: [],
+ }
+}
diff --git a/vue-devtools/packages/app-backend-api/src/backend.ts b/vue-devtools/packages/app-backend-api/src/backend.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67e4975afe0d0b377a1e9e486739f7e3198dfa33
--- /dev/null
+++ b/vue-devtools/packages/app-backend-api/src/backend.ts
@@ -0,0 +1,36 @@
+import type { AppRecord } from './app-record'
+import { DevtoolsApi } from './api'
+import type { BackendContext } from './backend-context'
+
+export enum BuiltinBackendFeature {
+ /**
+ * @deprecated
+ */
+ FLUSH = 'flush',
+}
+
+export interface DevtoolsBackendOptions {
+ frameworkVersion: 1 | 2 | 3
+ features: (BuiltinBackendFeature | string)[]
+ setup: (api: DevtoolsApi) => void
+ setupApp?: (api: DevtoolsApi, app: AppRecord) => void
+}
+
+export function defineBackend(options: DevtoolsBackendOptions) {
+ return options
+}
+
+export interface DevtoolsBackend {
+ options: DevtoolsBackendOptions
+ api: DevtoolsApi
+}
+
+export function createBackend(options: DevtoolsBackendOptions, ctx: BackendContext): DevtoolsBackend {
+ const backend: DevtoolsBackend = {
+ options,
+ api: null,
+ }
+ backend.api = new DevtoolsApi(backend, ctx)
+ options.setup(backend.api)
+ return backend
+}
diff --git a/vue-devtools/packages/app-backend-api/src/global-hook.ts b/vue-devtools/packages/app-backend-api/src/global-hook.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5c07e85c55f4c7b9f7a484ea9e64c9ef83520fdd
--- /dev/null
+++ b/vue-devtools/packages/app-backend-api/src/global-hook.ts
@@ -0,0 +1,10 @@
+import type { AppRecordOptions } from './app-record'
+
+export interface DevtoolsHook {
+ emit: (event: string, ...payload: any[]) => void
+ on: (event: string, handler: T) => void
+ once: (event: string, handler: T) => void
+ off: (event?: string, handler?: T) => void
+ Vue?: any
+ apps: AppRecordOptions[]
+}
diff --git a/vue-devtools/packages/app-backend-api/src/hooks.ts b/vue-devtools/packages/app-backend-api/src/hooks.ts
new file mode 100644
index 0000000000000000000000000000000000000000..febecc222ac457e50a262f127459ab4a4b3cf19e
--- /dev/null
+++ b/vue-devtools/packages/app-backend-api/src/hooks.ts
@@ -0,0 +1,159 @@
+import { PluginPermission, SharedData, hasPluginPermission } from '@vue-devtools/shared-utils'
+import type { HookHandler, HookPayloads, Hookable } from '@vue/devtools-api'
+import { Hooks } from '@vue/devtools-api'
+import type { BackendContext } from './backend-context'
+import type { Plugin } from './plugin'
+
+type Handler = HookHandler
+
+export interface HookHandlerData {
+ handler: Handler
+ plugin: Plugin
+}
+
+export class DevtoolsHookable implements Hookable {
+ private handlers: Partial<{ [eventType in Hooks]: HookHandlerData[] }> = {}
+ private ctx: BackendContext
+ private plugin: Plugin
+
+ constructor(ctx: BackendContext, plugin: Plugin = null) {
+ this.ctx = ctx
+ this.plugin = plugin
+ }
+
+ private hook(eventType: T, handler: Handler, pluginPermision: PluginPermission = null) {
+ const handlers = (this.handlers[eventType] = this.handlers[eventType] || []) as HookHandlerData[]
+
+ if (this.plugin) {
+ const originalHandler = handler
+ handler = (...args) => {
+ // Plugin permission
+ if (!hasPluginPermission(this.plugin.descriptor.id, PluginPermission.ENABLED)
+ || (pluginPermision && !hasPluginPermission(this.plugin.descriptor.id, pluginPermision))
+ ) { return }
+
+ // App scope
+ if (!this.plugin.descriptor.disableAppScope
+ && this.ctx.currentAppRecord?.options.app !== this.plugin.descriptor.app) { return }
+
+ // Plugin scope
+ if (!this.plugin.descriptor.disablePluginScope
+ && (args[0] as any).pluginId != null && (args[0] as any).pluginId !== this.plugin.descriptor.id) { return }
+
+ return originalHandler(...args)
+ }
+ }
+
+ handlers.push({
+ handler,
+ plugin: this.ctx.currentPlugin,
+ })
+ }
+
+ async callHandlers(eventType: T, payload: HookPayloads[T], ctx: BackendContext) {
+ if (this.handlers[eventType]) {
+ const handlers = this.handlers[eventType] as HookHandlerData[]
+ for (let i = 0; i < handlers.length; i++) {
+ const { handler, plugin } = handlers[i]
+ try {
+ await handler(payload, ctx)
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(`An error occurred in hook '${eventType}'${plugin ? ` registered by plugin '${plugin.descriptor.id}'` : ''} with payload:`, payload)
+ console.error(e)
+ }
+ }
+ }
+ }
+ return payload
+ }
+
+ transformCall(handler: Handler) {
+ this.hook(Hooks.TRANSFORM_CALL, handler)
+ }
+
+ getAppRecordName(handler: Handler) {
+ this.hook(Hooks.GET_APP_RECORD_NAME, handler)
+ }
+
+ getAppRootInstance(handler: Handler) {
+ this.hook(Hooks.GET_APP_ROOT_INSTANCE, handler)
+ }
+
+ registerApplication(handler: Handler) {
+ this.hook(Hooks.REGISTER_APPLICATION, handler)
+ }
+
+ walkComponentTree(handler: Handler) {
+ this.hook(Hooks.WALK_COMPONENT_TREE, handler, PluginPermission.COMPONENTS)
+ }
+
+ visitComponentTree(handler: Handler) {
+ this.hook(Hooks.VISIT_COMPONENT_TREE, handler, PluginPermission.COMPONENTS)
+ }
+
+ walkComponentParents(handler: Handler) {
+ this.hook(Hooks.WALK_COMPONENT_PARENTS, handler, PluginPermission.COMPONENTS)
+ }
+
+ inspectComponent(handler: Handler) {
+ this.hook(Hooks.INSPECT_COMPONENT, handler, PluginPermission.COMPONENTS)
+ }
+
+ getComponentBounds(handler: Handler) {
+ this.hook(Hooks.GET_COMPONENT_BOUNDS, handler, PluginPermission.COMPONENTS)
+ }
+
+ getComponentName(handler: Handler) {
+ this.hook(Hooks.GET_COMPONENT_NAME, handler, PluginPermission.COMPONENTS)
+ }
+
+ getComponentInstances(handler: Handler) {
+ this.hook(Hooks.GET_COMPONENT_INSTANCES, handler, PluginPermission.COMPONENTS)
+ }
+
+ getElementComponent(handler: Handler) {
+ this.hook(Hooks.GET_ELEMENT_COMPONENT, handler, PluginPermission.COMPONENTS)
+ }
+
+ getComponentRootElements(handler: Handler) {
+ this.hook(Hooks.GET_COMPONENT_ROOT_ELEMENTS, handler, PluginPermission.COMPONENTS)
+ }
+
+ editComponentState(handler: Handler) {
+ this.hook(Hooks.EDIT_COMPONENT_STATE, handler, PluginPermission.COMPONENTS)
+ }
+
+ getComponentDevtoolsOptions(handler: Handler) {
+ this.hook(Hooks.GET_COMPONENT_DEVTOOLS_OPTIONS, handler, PluginPermission.COMPONENTS)
+ }
+
+ getComponentRenderCode(handler: Handler) {
+ this.hook(Hooks.GET_COMPONENT_RENDER_CODE, handler, PluginPermission.COMPONENTS)
+ }
+
+ inspectTimelineEvent(handler: Handler) {
+ this.hook(Hooks.INSPECT_TIMELINE_EVENT, handler, PluginPermission.TIMELINE)
+ }
+
+ timelineCleared(handler: Handler) {
+ this.hook(Hooks.TIMELINE_CLEARED, handler, PluginPermission.TIMELINE)
+ }
+
+ getInspectorTree(handler: Handler) {
+ this.hook(Hooks.GET_INSPECTOR_TREE, handler, PluginPermission.CUSTOM_INSPECTOR)
+ }
+
+ getInspectorState(handler: Handler) {
+ this.hook(Hooks.GET_INSPECTOR_STATE, handler, PluginPermission.CUSTOM_INSPECTOR)
+ }
+
+ editInspectorState(handler: Handler) {
+ this.hook(Hooks.EDIT_INSPECTOR_STATE, handler, PluginPermission.CUSTOM_INSPECTOR)
+ }
+
+ setPluginSettings(handler: Handler) {
+ this.hook(Hooks.SET_PLUGIN_SETTINGS, handler)
+ }
+}
diff --git a/vue-devtools/packages/app-backend-api/src/index.ts b/vue-devtools/packages/app-backend-api/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5e0448cd5891779ea6de8695871477fcf8d941e5
--- /dev/null
+++ b/vue-devtools/packages/app-backend-api/src/index.ts
@@ -0,0 +1,7 @@
+export * from './api'
+export * from './app-record'
+export * from './backend'
+export * from './backend-context'
+export * from './global-hook'
+export * from './hooks'
+export * from './plugin'
diff --git a/vue-devtools/packages/app-backend-api/src/plugin.ts b/vue-devtools/packages/app-backend-api/src/plugin.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f9df976c130b02e0ca7a20a9a6e13c0c24418bde
--- /dev/null
+++ b/vue-devtools/packages/app-backend-api/src/plugin.ts
@@ -0,0 +1,7 @@
+import type { PluginDescriptor, SetupFunction } from '@vue/devtools-api'
+
+export interface Plugin {
+ descriptor: PluginDescriptor
+ setupFn: SetupFunction
+ error: Error
+}
diff --git a/vue-devtools/packages/app-backend-api/tsconfig.json b/vue-devtools/packages/app-backend-api/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..becb763b20bbbd4557ba0717c957b4e3d3d6c81b
--- /dev/null
+++ b/vue-devtools/packages/app-backend-api/tsconfig.json
@@ -0,0 +1,29 @@
+{
+ "compilerOptions": {
+ "target": "ES2019",
+ "module": "commonjs",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "types": [
+ "node",
+ "webpack-env"
+ ],
+ "strictBindCallApply": true,
+ "strictFunctionTypes": true,
+ "alwaysStrict": true,
+ // Strict
+ "noImplicitAny": false,
+ "noImplicitThis": true,
+ "sourceMap": true,
+ "allowSyntheticDefaultImports": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "preserveWatchOutput": true
+ },
+ "include": [
+ "src/**/*"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
+}
diff --git a/vue-devtools/packages/app-backend-core/package.json b/vue-devtools/packages/app-backend-core/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..4249524c3b1e79b1d8e1123e32c95ac1ff724907
--- /dev/null
+++ b/vue-devtools/packages/app-backend-core/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "@vue-devtools/app-backend-core",
+ "version": "0.0.0",
+ "private": true,
+ "main": "./lib/index.js",
+ "types": "./lib/index.d.ts",
+ "scripts": {
+ "build": "rimraf lib && yarn ts",
+ "build:watch": "yarn ts -w",
+ "ts": "tsc -d -outDir lib"
+ },
+ "dependencies": {
+ "@vue-devtools/app-backend-api": "^0.0.0",
+ "@vue-devtools/app-backend-vue1": "^0.0.0",
+ "@vue-devtools/app-backend-vue2": "^0.0.0",
+ "@vue-devtools/app-backend-vue3": "^0.0.0",
+ "@vue-devtools/shared-utils": "^0.0.0",
+ "@vue/devtools-api": "^6.0.0-beta.1",
+ "lodash": "^4.17.21",
+ "speakingurl": "^14.0.1"
+ },
+ "devDependencies": {
+ "@types/node": "^20.11.16",
+ "@types/webpack-env": "^1.15.1",
+ "typescript": "^5.3.3"
+ }
+}
diff --git a/vue-devtools/packages/app-backend-core/src/app.ts b/vue-devtools/packages/app-backend-core/src/app.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9a43c35560bf5e5c2666cb2cc072954f43f56ddf
--- /dev/null
+++ b/vue-devtools/packages/app-backend-core/src/app.ts
@@ -0,0 +1,304 @@
+import type {
+ AppRecord,
+ AppRecordOptions,
+ BackendContext,
+ DevtoolsBackend,
+ SimpleAppRecord,
+} from '@vue-devtools/app-backend-api'
+import { BridgeEvents, SharedData, isBrowser } from '@vue-devtools/shared-utils'
+import type { App } from '@vue/devtools-api'
+import slug from 'speakingurl'
+import { JobQueue } from './util/queue'
+import { scan } from './legacy/scan'
+import { addBuiltinLayers, removeLayersForApp } from './timeline'
+import { availableBackends, getBackend } from './backend'
+import { hook } from './global-hook.js'
+import { sendComponentTreeData, sendSelectedComponentData } from './component.js'
+
+const jobs = new JobQueue()
+
+let recordId = 0
+
+type AppRecordResolver = (record: AppRecord) => void | Promise
+const appRecordPromises = new Map()
+
+export async function registerApp(options: AppRecordOptions, ctx: BackendContext) {
+ return jobs.queue('regiserApp', () => registerAppJob(options, ctx))
+}
+
+async function registerAppJob(options: AppRecordOptions, ctx: BackendContext) {
+ // Dedupe
+ if (ctx.appRecords.find(a => a.options.app === options.app)) {
+ return
+ }
+
+ if (!options.version) {
+ throw new Error('[Vue Devtools] Vue version not found')
+ }
+
+ // Find correct backend
+ const baseFrameworkVersion = Number.parseInt(options.version.substring(0, options.version.indexOf('.')))
+ for (let i = 0; i < availableBackends.length; i++) {
+ const backendOptions = availableBackends[i]
+ if (backendOptions.frameworkVersion === baseFrameworkVersion) {
+ // Enable backend if it's not enabled
+ const backend = getBackend(backendOptions, ctx)
+
+ await createAppRecord(options, backend, ctx)
+
+ break
+ }
+ }
+}
+
+async function createAppRecord(options: AppRecordOptions, backend: DevtoolsBackend, ctx: BackendContext) {
+ const rootInstance = await backend.api.getAppRootInstance(options.app)
+ if (rootInstance) {
+ if ((await backend.api.getComponentDevtoolsOptions(rootInstance)).hide) {
+ options.app._vueDevtools_hidden_ = true
+ return
+ }
+
+ recordId++
+ const name = await backend.api.getAppRecordName(options.app, recordId.toString())
+ const id = getAppRecordId(options.app, slug(name))
+
+ const [el]: HTMLElement[] = await backend.api.getComponentRootElements(rootInstance)
+
+ const instanceMapRaw = new Map()
+
+ const record: AppRecord = {
+ id,
+ name,
+ options,
+ backend,
+ lastInspectedComponentId: null,
+ instanceMap: new Proxy(instanceMapRaw, {
+ get(target, key: string) {
+ if (key === 'set') {
+ return (instanceId: string, instance: any) => {
+ target.set(instanceId, instance)
+ // The component was requested by the frontend before it was registered
+ if (record.missingInstanceQueue.has(instanceId)) {
+ record.missingInstanceQueue.delete(instanceId)
+ if (ctx.currentAppRecord === record) {
+ sendComponentTreeData(record, instanceId, record.componentFilter, null, false, ctx)
+ if (record.lastInspectedComponentId === instanceId) {
+ sendSelectedComponentData(record, instanceId, ctx)
+ }
+ }
+ }
+ }
+ }
+ return target[key].bind(target)
+ },
+ }),
+ rootInstance,
+ perfGroupIds: new Map(),
+ iframe: isBrowser && document !== el?.ownerDocument ? el?.ownerDocument?.location?.pathname : null,
+ meta: options.meta ?? {},
+ missingInstanceQueue: new Set(),
+ }
+
+ options.app.__VUE_DEVTOOLS_APP_RECORD__ = record
+ const rootId = `${record.id}:root`
+ record.instanceMap.set(rootId, record.rootInstance)
+ record.rootInstance.__VUE_DEVTOOLS_UID__ = rootId
+
+ // Timeline
+ addBuiltinLayers(record, ctx)
+
+ ctx.appRecords.push(record)
+
+ if (backend.options.setupApp) {
+ backend.options.setupApp(backend.api, record)
+ }
+
+ await backend.api.registerApplication(options.app)
+
+ ctx.bridge.send(BridgeEvents.TO_FRONT_APP_ADD, {
+ appRecord: mapAppRecord(record),
+ })
+
+ // Auto select first app
+ if (ctx.currentAppRecord == null) {
+ await selectApp(record, ctx)
+ }
+
+ if (appRecordPromises.has(options.app)) {
+ for (const r of appRecordPromises.get(options.app)) {
+ await r(record)
+ }
+ }
+ }
+ else if (SharedData.debugInfo) {
+ console.warn('[Vue devtools] No root instance found for app, it might have been unmounted', options.app)
+ }
+}
+
+export async function selectApp(record: AppRecord, ctx: BackendContext) {
+ ctx.currentAppRecord = record
+ ctx.currentInspectedComponentId = record.lastInspectedComponentId
+ ctx.bridge.send(BridgeEvents.TO_FRONT_APP_SELECTED, {
+ id: record.id,
+ lastInspectedComponentId: record.lastInspectedComponentId,
+ })
+}
+
+export function mapAppRecord(record: AppRecord): SimpleAppRecord {
+ return {
+ id: record.id,
+ name: record.name,
+ version: record.options.version,
+ iframe: record.iframe,
+ }
+}
+
+const appIds = new Set()
+
+export function getAppRecordId(app, defaultId?: string): string {
+ if (app.__VUE_DEVTOOLS_APP_RECORD_ID__ != null) {
+ return app.__VUE_DEVTOOLS_APP_RECORD_ID__
+ }
+ let id = defaultId ?? (recordId++).toString()
+
+ if (defaultId && appIds.has(id)) {
+ let count = 1
+ while (appIds.has(`${defaultId}_${count}`)) {
+ count++
+ }
+ id = `${defaultId}_${count}`
+ }
+
+ appIds.add(id)
+
+ app.__VUE_DEVTOOLS_APP_RECORD_ID__ = id
+ return id
+}
+
+export async function getAppRecord(app: any, ctx: BackendContext): Promise {
+ const record = app.__VUE_DEVTOOLS_APP_RECORD__ ?? ctx.appRecords.find(ar => ar.options.app === app)
+ if (record) {
+ return record
+ }
+ if (app._vueDevtools_hidden_) {
+ return null
+ }
+ return new Promise((resolve, reject) => {
+ let resolvers = appRecordPromises.get(app)
+ let timedOut = false
+ if (!resolvers) {
+ resolvers = []
+ appRecordPromises.set(app, resolvers)
+ }
+ let timer: any
+ const fn = (record) => {
+ if (!timedOut) {
+ clearTimeout(timer)
+ resolve(record)
+ }
+ }
+ resolvers.push(fn)
+ timer = setTimeout(() => {
+ timedOut = true
+ const index = resolvers.indexOf(fn)
+ if (index !== -1) {
+ resolvers.splice(index, 1)
+ }
+ if (SharedData.debugInfo) {
+ // eslint-disable-next-line no-console
+ console.log('Timed out waiting for app record', app)
+ }
+ reject(new Error(`Timed out getting app record for app`))
+ }, 60000)
+ })
+}
+
+export function waitForAppsRegistration() {
+ return jobs.queue('waitForAppsRegistrationNoop', async () => { /* NOOP */ })
+}
+
+export async function sendApps(ctx: BackendContext) {
+ const appRecords = []
+
+ for (const appRecord of ctx.appRecords) {
+ appRecords.push(appRecord)
+ }
+
+ ctx.bridge.send(BridgeEvents.TO_FRONT_APP_LIST, {
+ apps: appRecords.map(mapAppRecord),
+ })
+}
+
+function removeAppRecord(appRecord: AppRecord, ctx: BackendContext) {
+ try {
+ appIds.delete(appRecord.id)
+ const index = ctx.appRecords.indexOf(appRecord)
+ if (index !== -1) {
+ ctx.appRecords.splice(index, 1)
+ }
+ removeLayersForApp(appRecord.options.app, ctx)
+ ctx.bridge.send(BridgeEvents.TO_FRONT_APP_REMOVE, { id: appRecord.id })
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(e)
+ }
+ }
+}
+
+export async function removeApp(app: App, ctx: BackendContext) {
+ try {
+ const appRecord = await getAppRecord(app, ctx)
+ if (appRecord) {
+ removeAppRecord(appRecord, ctx)
+ }
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(e)
+ }
+ }
+}
+
+let scanTimeout: any
+
+export function _legacy_getAndRegisterApps(ctx: BackendContext, clear = false) {
+ setTimeout(() => {
+ try {
+ if (clear) {
+ // Remove apps that are legacy
+ ctx.appRecords.forEach((appRecord) => {
+ if (appRecord.meta.Vue) {
+ removeAppRecord(appRecord, ctx)
+ }
+ })
+ }
+
+ const apps = scan()
+
+ clearTimeout(scanTimeout)
+ if (!apps.length) {
+ scanTimeout = setTimeout(() => _legacy_getAndRegisterApps(ctx), 1000)
+ }
+
+ apps.forEach((app) => {
+ const Vue = hook.Vue
+ registerApp({
+ app,
+ types: {},
+ version: Vue?.version,
+ meta: {
+ Vue,
+ },
+ }, ctx)
+ })
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(`Error scanning for legacy apps:`)
+ console.error(e)
+ }
+ }
+ }, 0)
+}
diff --git a/vue-devtools/packages/app-backend-core/src/backend.ts b/vue-devtools/packages/app-backend-core/src/backend.ts
new file mode 100644
index 0000000000000000000000000000000000000000..af07e8244d954aa3a44328c26bcf33092ab8fdcb
--- /dev/null
+++ b/vue-devtools/packages/app-backend-core/src/backend.ts
@@ -0,0 +1,31 @@
+import type { BackendContext, DevtoolsBackend, DevtoolsBackendOptions } from '@vue-devtools/app-backend-api'
+import { createBackend } from '@vue-devtools/app-backend-api'
+
+import { backend as backendVue1 } from '@vue-devtools/app-backend-vue1'
+import { backend as backendVue2 } from '@vue-devtools/app-backend-vue2'
+import { backend as backendVue3 } from '@vue-devtools/app-backend-vue3'
+
+import { handleAddPerformanceTag } from './perf'
+
+export const availableBackends = [
+ backendVue1,
+ backendVue2,
+ backendVue3,
+]
+
+const enabledBackends: Map = new Map()
+
+export function getBackend(backendOptions: DevtoolsBackendOptions, ctx: BackendContext) {
+ let backend: DevtoolsBackend
+ if (!enabledBackends.has(backendOptions)) {
+ // Create backend
+ backend = createBackend(backendOptions, ctx)
+ handleAddPerformanceTag(backend, ctx)
+ enabledBackends.set(backendOptions, backend)
+ ctx.backends.push(backend)
+ }
+ else {
+ backend = enabledBackends.get(backendOptions)
+ }
+ return backend
+}
diff --git a/vue-devtools/packages/app-backend-core/src/component-pick.ts b/vue-devtools/packages/app-backend-core/src/component-pick.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ca23a94facb4b7e4b58c9e9407d14804424c29af
--- /dev/null
+++ b/vue-devtools/packages/app-backend-core/src/component-pick.ts
@@ -0,0 +1,114 @@
+import { BridgeEvents, isBrowser } from '@vue-devtools/shared-utils'
+import type { BackendContext, DevtoolsBackend } from '@vue-devtools/app-backend-api'
+import type { ComponentInstance } from '@vue/devtools-api'
+import { highlight, unHighlight } from './highlighter'
+
+export default class ComponentPicker {
+ ctx: BackendContext
+ selectedInstance: ComponentInstance
+ selectedBackend: DevtoolsBackend
+
+ constructor(ctx: BackendContext) {
+ this.ctx = ctx
+ this.bindMethods()
+ }
+
+ /**
+ * Adds event listeners for mouseover and mouseup
+ */
+ startSelecting() {
+ if (!isBrowser) {
+ return
+ }
+ window.addEventListener('mouseover', this.elementMouseOver, true)
+ window.addEventListener('click', this.elementClicked, true)
+ window.addEventListener('mouseout', this.cancelEvent, true)
+ window.addEventListener('mouseenter', this.cancelEvent, true)
+ window.addEventListener('mouseleave', this.cancelEvent, true)
+ window.addEventListener('mousedown', this.cancelEvent, true)
+ window.addEventListener('mouseup', this.cancelEvent, true)
+ }
+
+ /**
+ * Removes event listeners
+ */
+ stopSelecting() {
+ if (!isBrowser) {
+ return
+ }
+ window.removeEventListener('mouseover', this.elementMouseOver, true)
+ window.removeEventListener('click', this.elementClicked, true)
+ window.removeEventListener('mouseout', this.cancelEvent, true)
+ window.removeEventListener('mouseenter', this.cancelEvent, true)
+ window.removeEventListener('mouseleave', this.cancelEvent, true)
+ window.removeEventListener('mousedown', this.cancelEvent, true)
+ window.removeEventListener('mouseup', this.cancelEvent, true)
+
+ unHighlight()
+ }
+
+ /**
+ * Highlights a component on element mouse over
+ */
+ async elementMouseOver(e: MouseEvent) {
+ this.cancelEvent(e)
+
+ const el = e.target
+ if (el) {
+ await this.selectElementComponent(el)
+ }
+
+ unHighlight()
+ if (this.selectedInstance) {
+ highlight(this.selectedInstance, this.selectedBackend, this.ctx)
+ }
+ }
+
+ async selectElementComponent(el) {
+ for (const backend of this.ctx.backends) {
+ const instance = await backend.api.getElementComponent(el)
+ if (instance) {
+ this.selectedInstance = instance
+ this.selectedBackend = backend
+ return
+ }
+ }
+ this.selectedInstance = null
+ this.selectedBackend = null
+ }
+
+ /**
+ * Selects an instance in the component view
+ */
+ async elementClicked(e: MouseEvent) {
+ this.cancelEvent(e)
+
+ if (this.selectedInstance && this.selectedBackend) {
+ const parentInstances = await this.selectedBackend.api.walkComponentParents(this.selectedInstance)
+ this.ctx.bridge.send(BridgeEvents.TO_FRONT_COMPONENT_PICK, { id: this.selectedInstance.__VUE_DEVTOOLS_UID__, parentIds: parentInstances.map(i => i.__VUE_DEVTOOLS_UID__) })
+ }
+ else {
+ this.ctx.bridge.send(BridgeEvents.TO_FRONT_COMPONENT_PICK_CANCELED, null)
+ }
+
+ this.stopSelecting()
+ }
+
+ /**
+ * Cancel a mouse event
+ */
+ cancelEvent(e: MouseEvent) {
+ e.stopImmediatePropagation()
+ e.preventDefault()
+ }
+
+ /**
+ * Bind class methods to the class scope to avoid rebind for event listeners
+ */
+ bindMethods() {
+ this.startSelecting = this.startSelecting.bind(this)
+ this.stopSelecting = this.stopSelecting.bind(this)
+ this.elementMouseOver = this.elementMouseOver.bind(this)
+ this.elementClicked = this.elementClicked.bind(this)
+ }
+}
diff --git a/vue-devtools/packages/app-backend-core/src/component.ts b/vue-devtools/packages/app-backend-core/src/component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4033b792fb467ae18edbda42ed4ffcadd9ae11aa
--- /dev/null
+++ b/vue-devtools/packages/app-backend-core/src/component.ts
@@ -0,0 +1,169 @@
+import { BridgeEvents, SharedData, createThrottleQueue, parse, stringify } from '@vue-devtools/shared-utils'
+import type { AppRecord, BackendContext } from '@vue-devtools/app-backend-api'
+import { BuiltinBackendFeature } from '@vue-devtools/app-backend-api'
+import type { App, ComponentInstance, EditStatePayload } from '@vue/devtools-api'
+import { getAppRecord } from './app'
+
+const MAX_$VM = 10
+const $vmQueue = []
+
+export async function sendComponentTreeData(appRecord: AppRecord, instanceId: string, filter = '', maxDepth: number = null, recursively = false, ctx: BackendContext) {
+ if (!instanceId || appRecord !== ctx.currentAppRecord) {
+ return
+ }
+
+ // Flush will send all components in the tree
+ // So we skip individiual tree updates
+ if (
+ instanceId !== '_root'
+ && ctx.currentAppRecord.backend.options.features.includes(BuiltinBackendFeature.FLUSH)
+ ) {
+ return
+ }
+
+ const instance = getComponentInstance(appRecord, instanceId, ctx)
+ if (!instance) {
+ ctx.bridge.send(BridgeEvents.TO_FRONT_COMPONENT_TREE, {
+ instanceId,
+ treeData: null,
+ notFound: true,
+ })
+ }
+ else {
+ if (filter) {
+ filter = filter.toLowerCase()
+ }
+ if (maxDepth == null) {
+ maxDepth = instance === ctx.currentAppRecord.rootInstance ? 2 : 1
+ }
+ const data = await appRecord.backend.api.walkComponentTree(instance, maxDepth, filter, recursively)
+ const payload = {
+ instanceId,
+ treeData: stringify(data),
+ }
+ ctx.bridge.send(BridgeEvents.TO_FRONT_COMPONENT_TREE, payload)
+ }
+}
+
+export async function sendSelectedComponentData(appRecord: AppRecord, instanceId: string, ctx: BackendContext) {
+ if (!instanceId || appRecord !== ctx.currentAppRecord) {
+ return
+ }
+ const instance = getComponentInstance(appRecord, instanceId, ctx)
+ if (!instance) {
+ sendEmptyComponentData(instanceId, ctx)
+ }
+ else {
+ // Expose instance on window
+ if (typeof window !== 'undefined') {
+ const win = window as any
+ win.$vm = instance
+
+ // $vm0, $vm1, $vm2, ...
+ if ($vmQueue[0] !== instance) {
+ if ($vmQueue.length >= MAX_$VM) {
+ $vmQueue.pop()
+ }
+ for (let i = $vmQueue.length; i > 0; i--) {
+ win[`$vm${i}`] = $vmQueue[i] = $vmQueue[i - 1]
+ }
+ win.$vm0 = $vmQueue[0] = instance
+ }
+ }
+ if (SharedData.debugInfo) {
+ // eslint-disable-next-line no-console
+ console.log('[DEBUG] inspect', instance)
+ }
+ const parentInstances = await appRecord.backend.api.walkComponentParents(instance)
+ const payload = {
+ instanceId,
+ data: stringify(await appRecord.backend.api.inspectComponent(instance, ctx.currentAppRecord.options.app)),
+ parentIds: parentInstances.map(i => i.__VUE_DEVTOOLS_UID__),
+ }
+ ctx.bridge.send(BridgeEvents.TO_FRONT_COMPONENT_SELECTED_DATA, payload)
+ markSelectedInstance(instanceId, ctx)
+ }
+}
+
+export function markSelectedInstance(instanceId: string, ctx: BackendContext) {
+ ctx.currentInspectedComponentId = instanceId
+ ctx.currentAppRecord.lastInspectedComponentId = instanceId
+}
+
+export function sendEmptyComponentData(instanceId: string, ctx: BackendContext) {
+ ctx.bridge.send(BridgeEvents.TO_FRONT_COMPONENT_SELECTED_DATA, {
+ instanceId,
+ data: null,
+ })
+}
+
+export async function editComponentState(instanceId: string, dotPath: string, type: string, state: EditStatePayload, ctx: BackendContext) {
+ if (!instanceId) {
+ return
+ }
+ const instance = getComponentInstance(ctx.currentAppRecord, instanceId, ctx)
+ if (instance) {
+ if ('value' in state && state.value != null) {
+ state.value = parse(state.value, true)
+ }
+ await ctx.currentAppRecord.backend.api.editComponentState(instance, dotPath, type, state, ctx.currentAppRecord.options.app)
+ await sendSelectedComponentData(ctx.currentAppRecord, instanceId, ctx)
+ }
+}
+
+export async function getComponentId(app: App, uid: number, instance: ComponentInstance, ctx: BackendContext) {
+ try {
+ if (instance.__VUE_DEVTOOLS_UID__) {
+ return instance.__VUE_DEVTOOLS_UID__
+ }
+ const appRecord = await getAppRecord(app, ctx)
+ if (!appRecord) {
+ return null
+ }
+ const isRoot = appRecord.rootInstance === instance
+ return `${appRecord.id}:${isRoot ? 'root' : uid}`
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(e)
+ }
+ return null
+ }
+}
+
+export function getComponentInstance(appRecord: AppRecord, instanceId: string, _ctx: BackendContext) {
+ if (instanceId === '_root') {
+ instanceId = `${appRecord.id}:root`
+ }
+ const instance = appRecord.instanceMap.get(instanceId)
+ if (!instance) {
+ appRecord.missingInstanceQueue.add(instanceId)
+ if (SharedData.debugInfo) {
+ console.warn(`Instance uid=${instanceId} not found`)
+ }
+ }
+ return instance
+}
+
+export async function refreshComponentTreeSearch(ctx: BackendContext) {
+ if (!ctx.currentAppRecord.componentFilter) {
+ return
+ }
+ await sendComponentTreeData(ctx.currentAppRecord, '_root', ctx.currentAppRecord.componentFilter, null, false, ctx)
+}
+
+const updateTrackingQueue = createThrottleQueue(500)
+
+export function sendComponentUpdateTracking(instanceId: string, time: number, ctx: BackendContext) {
+ if (!instanceId) {
+ return
+ }
+
+ updateTrackingQueue.add(instanceId, () => {
+ const payload = {
+ instanceId,
+ time,
+ }
+ ctx.bridge.send(BridgeEvents.TO_FRONT_COMPONENT_UPDATED, payload)
+ })
+}
diff --git a/vue-devtools/packages/app-backend-core/src/flash.ts b/vue-devtools/packages/app-backend-core/src/flash.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8c9bdf38ab0ffbfa4b617faf758b6bef27b7c7c8
--- /dev/null
+++ b/vue-devtools/packages/app-backend-core/src/flash.ts
@@ -0,0 +1,35 @@
+import type { DevtoolsBackend } from '@vue-devtools/app-backend-api'
+import type { ComponentInstance } from '@vue/devtools-api'
+
+export async function flashComponent(instance: ComponentInstance, backend: DevtoolsBackend) {
+ const bounds = await backend.api.getComponentBounds(instance)
+ if (bounds) {
+ let overlay: HTMLDivElement = instance.__VUE_DEVTOOLS_FLASH
+ if (!overlay) {
+ overlay = document.createElement('div')
+ instance.__VUE_DEVTOOLS_FLASH = overlay
+ overlay.style.border = '2px rgba(65, 184, 131, 0.7) solid'
+ overlay.style.position = 'fixed'
+ overlay.style.zIndex = '99999999999998'
+ overlay.style.pointerEvents = 'none'
+ overlay.style.borderRadius = '3px'
+ overlay.style.boxSizing = 'border-box'
+ document.body.appendChild(overlay)
+ }
+ overlay.style.opacity = '1'
+ overlay.style.transition = null
+ overlay.style.width = `${Math.round(bounds.width)}px`
+ overlay.style.height = `${Math.round(bounds.height)}px`
+ overlay.style.left = `${Math.round(bounds.left)}px`
+ overlay.style.top = `${Math.round(bounds.top)}px`
+ requestAnimationFrame(() => {
+ overlay.style.transition = 'opacity 1s'
+ overlay.style.opacity = '0'
+ })
+ clearTimeout((overlay as any)._timer)
+ ;(overlay as any)._timer = setTimeout(() => {
+ document.body.removeChild(overlay)
+ instance.__VUE_DEVTOOLS_FLASH = null
+ }, 1000)
+ }
+}
diff --git a/vue-devtools/packages/app-backend-core/src/global-hook.ts b/vue-devtools/packages/app-backend-core/src/global-hook.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bbdcd3eaa7c3e2be4fc26b0d3cbd46064f454744
--- /dev/null
+++ b/vue-devtools/packages/app-backend-core/src/global-hook.ts
@@ -0,0 +1,5 @@
+import type { DevtoolsHook } from '@vue-devtools/app-backend-api'
+import { target } from '@vue-devtools/shared-utils'
+
+// hook should have been injected before this executes.
+export const hook: DevtoolsHook = target.__VUE_DEVTOOLS_GLOBAL_HOOK__
diff --git a/vue-devtools/packages/app-backend-core/src/highlighter.ts b/vue-devtools/packages/app-backend-core/src/highlighter.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6a2cb9247ac19eb7dc59c67e188e52b367be078e
--- /dev/null
+++ b/vue-devtools/packages/app-backend-core/src/highlighter.ts
@@ -0,0 +1,168 @@
+import { isBrowser } from '@vue-devtools/shared-utils'
+import type { BackendContext, DevtoolsBackend } from '@vue-devtools/app-backend-api'
+import type { ComponentBounds, ComponentInstance } from '@vue/devtools-api'
+import { JobQueue } from './util/queue'
+
+let overlay: HTMLDivElement
+let overlayContent: HTMLDivElement
+let currentInstance
+
+function createOverlay() {
+ if (overlay || !isBrowser) {
+ return
+ }
+ overlay = document.createElement('div')
+ overlay.style.backgroundColor = 'rgba(65, 184, 131, 0.35)'
+ overlay.style.position = 'fixed'
+ overlay.style.zIndex = '99999999999998'
+ overlay.style.pointerEvents = 'none'
+ overlay.style.borderRadius = '3px'
+ overlayContent = document.createElement('div')
+ overlayContent.style.position = 'fixed'
+ overlayContent.style.zIndex = '99999999999999'
+ overlayContent.style.pointerEvents = 'none'
+ overlayContent.style.backgroundColor = 'white'
+ overlayContent.style.fontFamily = 'monospace'
+ overlayContent.style.fontSize = '11px'
+ overlayContent.style.padding = '4px 8px'
+ overlayContent.style.borderRadius = '3px'
+ overlayContent.style.color = '#333'
+ overlayContent.style.textAlign = 'center'
+ overlayContent.style.border = 'rgba(65, 184, 131, 0.5) 1px solid'
+ overlayContent.style.backgroundClip = 'padding-box'
+}
+
+// Use a job queue to preserve highlight/unhighlight calls order
+// This prevents "sticky" highlights that are not removed because highlight is async
+const jobQueue = new JobQueue()
+
+export async function highlight(instance: ComponentInstance, backend: DevtoolsBackend, ctx: BackendContext) {
+ await jobQueue.queue('highlight', async () => {
+ if (!instance) {
+ return
+ }
+
+ const bounds = await backend.api.getComponentBounds(instance)
+ if (bounds) {
+ createOverlay()
+
+ // Name
+ const name = (await backend.api.getComponentName(instance)) || 'Anonymous'
+ const pre = document.createElement('span')
+ pre.style.opacity = '0.6'
+ pre.textContent = '<'
+ const text = document.createElement('span')
+ text.style.fontWeight = 'bold'
+ text.style.color = '#09ab56'
+ text.textContent = name
+ const post = document.createElement('span')
+ post.style.opacity = '0.6'
+ post.textContent = '>'
+
+ // Size
+ const size = document.createElement('span')
+ size.style.opacity = '0.5'
+ size.style.marginLeft = '6px'
+ size.appendChild(document.createTextNode((Math.round(bounds.width * 100) / 100).toString()))
+ const multiply = document.createElement('span')
+ multiply.style.marginLeft = multiply.style.marginRight = '2px'
+ multiply.textContent = '×'
+ size.appendChild(multiply)
+ size.appendChild(document.createTextNode((Math.round(bounds.height * 100) / 100).toString()))
+
+ currentInstance = instance
+
+ await showOverlay(bounds, [pre, text, post, size])
+ }
+
+ startUpdateTimer(backend, ctx)
+ })
+}
+
+export async function unHighlight() {
+ await jobQueue.queue('unHighlight', async () => {
+ overlay?.parentNode?.removeChild(overlay)
+ overlayContent?.parentNode?.removeChild(overlayContent)
+ currentInstance = null
+
+ stopUpdateTimer()
+ })
+}
+
+function showOverlay(bounds: ComponentBounds, children: Node[] = null) {
+ if (!isBrowser || !children.length) {
+ return
+ }
+
+ positionOverlay(bounds)
+ document.body.appendChild(overlay)
+
+ overlayContent.innerHTML = ''
+ children.forEach(child => overlayContent.appendChild(child))
+ document.body.appendChild(overlayContent)
+
+ positionOverlayContent(bounds)
+}
+
+function positionOverlay({ width = 0, height = 0, top = 0, left = 0 }) {
+ overlay.style.width = `${Math.round(width)}px`
+ overlay.style.height = `${Math.round(height)}px`
+ overlay.style.left = `${Math.round(left)}px`
+ overlay.style.top = `${Math.round(top)}px`
+}
+
+function positionOverlayContent({ height = 0, top = 0, left = 0 }) {
+ // Content position (prevents overflow)
+ const contentWidth = overlayContent.offsetWidth
+ const contentHeight = overlayContent.offsetHeight
+ let contentLeft = left
+ if (contentLeft < 0) {
+ contentLeft = 0
+ }
+ else if (contentLeft + contentWidth > window.innerWidth) {
+ contentLeft = window.innerWidth - contentWidth
+ }
+ let contentTop = top - contentHeight - 2
+ if (contentTop < 0) {
+ contentTop = top + height + 2
+ }
+ if (contentTop < 0) {
+ contentTop = 0
+ }
+ else if (contentTop + contentHeight > window.innerHeight) {
+ contentTop = window.innerHeight - contentHeight
+ }
+ overlayContent.style.left = `${~~contentLeft}px`
+ overlayContent.style.top = `${~~contentTop}px`
+}
+
+async function updateOverlay(backend: DevtoolsBackend, _ctx: BackendContext) {
+ if (currentInstance) {
+ const bounds = await backend.api.getComponentBounds(currentInstance)
+ if (bounds) {
+ const sizeEl = overlayContent.children.item(3)
+ const widthEl = sizeEl.childNodes[0] as unknown as Text
+ widthEl.textContent = (Math.round(bounds.width * 100) / 100).toString()
+ const heightEl = sizeEl.childNodes[2] as unknown as Text
+ heightEl.textContent = (Math.round(bounds.height * 100) / 100).toString()
+
+ positionOverlay(bounds)
+ positionOverlayContent(bounds)
+ }
+ }
+}
+
+let updateTimer
+
+function startUpdateTimer(backend: DevtoolsBackend, ctx: BackendContext) {
+ stopUpdateTimer()
+ updateTimer = setInterval(() => {
+ jobQueue.queue('updateOverlay', async () => {
+ await updateOverlay(backend, ctx)
+ })
+ }, 1000 / 30) // 30fps
+}
+
+function stopUpdateTimer() {
+ clearInterval(updateTimer)
+}
diff --git a/vue-devtools/packages/app-backend-core/src/hook.ts b/vue-devtools/packages/app-backend-core/src/hook.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c13558a6f5b9e0d05fb1a8560282cb9024f7ab9a
--- /dev/null
+++ b/vue-devtools/packages/app-backend-core/src/hook.ts
@@ -0,0 +1,746 @@
+// this script is injected into every page.
+
+/**
+ * Install the hook on window, which is an event emitter.
+ * Note because Chrome content scripts cannot directly modify the window object,
+ * we are evaling this function by inserting a script tag. That's why we have
+ * to inline the whole event emitter implementation here.
+ *
+ * @param {Window|global} target
+ */
+export function installHook(target, isIframe = false) {
+ const devtoolsVersion = '6.0'
+ let listeners = {}
+
+ function injectIframeHook(iframe) {
+ if ((iframe as any).__vdevtools__injected) {
+ return
+ }
+ try {
+ (iframe as any).__vdevtools__injected = true
+ const inject = () => {
+ try {
+ (iframe.contentWindow as any).__VUE_DEVTOOLS_IFRAME__ = iframe
+ const script = iframe.contentDocument.createElement('script')
+ script.textContent = `;(${installHook.toString()})(window, true)`
+ iframe.contentDocument.documentElement.appendChild(script)
+ script.parentNode.removeChild(script)
+ }
+ catch (e) {
+ // Ignore
+ }
+ }
+ inject()
+ iframe.addEventListener('load', () => inject())
+ }
+ catch (e) {
+ // Ignore
+ }
+ }
+
+ let iframeChecks = 0
+ function injectToIframes() {
+ if (typeof window === 'undefined') {
+ return
+ }
+
+ const iframes = document.querySelectorAll('iframe:not([data-vue-devtools-ignore])')
+ for (const iframe of iframes) {
+ injectIframeHook(iframe)
+ }
+ }
+ injectToIframes()
+ const iframeTimer = setInterval(() => {
+ injectToIframes()
+ iframeChecks++
+ if (iframeChecks >= 5) {
+ clearInterval(iframeTimer)
+ }
+ }, 1000)
+
+ if (Object.prototype.hasOwnProperty.call(target, '__VUE_DEVTOOLS_GLOBAL_HOOK__')) {
+ if (target.__VUE_DEVTOOLS_GLOBAL_HOOK__.devtoolsVersion !== devtoolsVersion) {
+ console.error(`Another version of Vue Devtools seems to be installed. Please enable only one version at a time.`)
+ }
+ return
+ }
+
+ let hook
+
+ if (isIframe) {
+ const sendToParent = (cb) => {
+ try {
+ const hook = (window.parent as any).__VUE_DEVTOOLS_GLOBAL_HOOK__
+ if (hook) {
+ return cb(hook)
+ }
+ else {
+ console.warn('[Vue Devtools] No hook in parent window')
+ }
+ }
+ catch (e) {
+ console.warn('[Vue Devtools] Failed to send message to parent window', e)
+ }
+ }
+
+ hook = {
+ devtoolsVersion,
+ // eslint-disable-next-line accessor-pairs
+ set Vue(value) {
+ sendToParent((hook) => {
+ hook.Vue = value
+ })
+ },
+
+ // eslint-disable-next-line accessor-pairs
+ set enabled(value) {
+ sendToParent((hook) => {
+ hook.enabled = value
+ })
+ },
+
+ on(event, fn) {
+ sendToParent(hook => hook.on(event, fn))
+ },
+
+ once(event, fn) {
+ sendToParent(hook => hook.once(event, fn))
+ },
+
+ off(event, fn) {
+ sendToParent(hook => hook.off(event, fn))
+ },
+
+ emit(event, ...args) {
+ sendToParent(hook => hook.emit(event, ...args))
+ },
+
+ cleanupBuffer(matchArg) {
+ return sendToParent(hook => hook.cleanupBuffer(matchArg)) ?? false
+ },
+ }
+ }
+ else {
+ hook = {
+ devtoolsVersion,
+ Vue: null,
+ enabled: undefined,
+ _buffer: [],
+ _bufferMap: new Map(),
+ _bufferToRemove: new Map(),
+ store: null,
+ initialState: null,
+ storeModules: null,
+ flushStoreModules: null,
+ apps: [],
+
+ _replayBuffer(event) {
+ const buffer = this._buffer
+ this._buffer = []
+ this._bufferMap.clear()
+ this._bufferToRemove.clear()
+
+ for (let i = 0, l = buffer.length; i < l; i++) {
+ const allArgs = buffer[i].slice(1)
+ allArgs[0] === event
+ // eslint-disable-next-line prefer-spread
+ ? this.emit.apply(this, allArgs)
+ : this._buffer.push(buffer[i])
+ }
+ },
+
+ on(event, fn) {
+ const $event = `$${event}`
+ if (listeners[$event]) {
+ listeners[$event].push(fn)
+ }
+ else {
+ listeners[$event] = [fn]
+ this._replayBuffer(event)
+ }
+ },
+
+ once(event, fn) {
+ const on = (...args) => {
+ this.off(event, on)
+ return fn.apply(this, args)
+ }
+ this.on(event, on)
+ },
+
+ off(event, fn) {
+ event = `$${event}`
+ if (!arguments.length) {
+ listeners = {}
+ }
+ else {
+ const cbs = listeners[event]
+ if (cbs) {
+ if (!fn) {
+ listeners[event] = null
+ }
+ else {
+ for (let i = 0, l = cbs.length; i < l; i++) {
+ const cb = cbs[i]
+ if (cb === fn || cb.fn === fn) {
+ cbs.splice(i, 1)
+ break
+ }
+ }
+ }
+ }
+ }
+ },
+
+ emit(event, ...args) {
+ const $event = `$${event}`
+ let cbs = listeners[$event]
+ if (cbs) {
+ cbs = cbs.slice()
+ for (let i = 0, l = cbs.length; i < l; i++) {
+ try {
+ const result = cbs[i].apply(this, args)
+ if (typeof result?.catch === 'function') {
+ result.catch((e) => {
+ console.error(`[Hook] Error in async event handler for ${event} with args:`, args)
+ console.error(e)
+ })
+ }
+ }
+ catch (e) {
+ console.error(`[Hook] Error in event handler for ${event} with args:`, args)
+ console.error(e)
+ }
+ }
+ }
+ else {
+ const buffered = [Date.now(), event, ...args]
+ this._buffer.push(buffered)
+
+ for (let i = 2; i < args.length; i++) {
+ if (typeof args[i] === 'object' && args[i]) {
+ // Save by component instance (3rd, 4th or 5th arg)
+ this._bufferMap.set(args[i], buffered)
+ break
+ }
+ }
+ }
+ },
+
+ /**
+ * Remove buffered events with any argument that is equal to the given value.
+ * @param matchArg Given value to match.
+ */
+ cleanupBuffer(matchArg) {
+ const inBuffer = this._bufferMap.has(matchArg)
+ if (inBuffer) {
+ // Mark event for removal
+ this._bufferToRemove.set(this._bufferMap.get(matchArg), true)
+ }
+ return inBuffer
+ },
+
+ _cleanupBuffer() {
+ const now = Date.now()
+ // Clear buffer events that are older than 10 seconds or marked for removal
+ this._buffer = this._buffer.filter(args => !this._bufferToRemove.has(args) && now - args[0] < 10_000)
+ this._bufferToRemove.clear()
+ this._bufferMap.clear()
+ },
+ }
+
+ setInterval(() => {
+ hook._cleanupBuffer()
+ }, 10_000)
+
+ hook.once('init', (Vue) => {
+ hook.Vue = Vue
+
+ if (Vue) {
+ Vue.prototype.$inspect = function () {
+ const fn = target.__VUE_DEVTOOLS_INSPECT__
+ fn && fn(this)
+ }
+ }
+ })
+
+ hook.on('app:init', (app, version, types) => {
+ const appRecord = {
+ app,
+ version,
+ types,
+ }
+ hook.apps.push(appRecord)
+ hook.emit('app:add', appRecord)
+ })
+
+ hook.once('vuex:init', (store) => {
+ hook.store = store
+ hook.initialState = clone(store.state)
+ const origReplaceState = store.replaceState.bind(store)
+ store.replaceState = (state) => {
+ hook.initialState = clone(state)
+ origReplaceState(state)
+ }
+ // Dynamic modules
+ let origRegister, origUnregister
+ if (store.registerModule) {
+ hook.storeModules = []
+ origRegister = store.registerModule.bind(store)
+ store.registerModule = (path, module, options) => {
+ if (typeof path === 'string') {
+ path = [path]
+ }
+ hook.storeModules.push({ path, module, options })
+ origRegister(path, module, options)
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log('early register module', path, module, options)
+ }
+ }
+ origUnregister = store.unregisterModule.bind(store)
+ store.unregisterModule = (path) => {
+ if (typeof path === 'string') {
+ path = [path]
+ }
+ const key = path.join('/')
+ const index = hook.storeModules.findIndex(m => m.path.join('/') === key)
+ if (index !== -1) {
+ hook.storeModules.splice(index, 1)
+ }
+ origUnregister(path)
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log('early unregister module', path)
+ }
+ }
+ }
+ hook.flushStoreModules = () => {
+ store.replaceState = origReplaceState
+ if (store.registerModule) {
+ store.registerModule = origRegister
+ store.unregisterModule = origUnregister
+ }
+ return hook.storeModules || []
+ }
+ })
+ }
+
+ Object.defineProperty(target, '__VUE_DEVTOOLS_GLOBAL_HOOK__', {
+ get() {
+ return hook
+ },
+ })
+
+ // Handle apps initialized before hook injection
+ if (target.__VUE_DEVTOOLS_HOOK_REPLAY__) {
+ try {
+ target.__VUE_DEVTOOLS_HOOK_REPLAY__.forEach(cb => cb(hook))
+ target.__VUE_DEVTOOLS_HOOK_REPLAY__ = []
+ }
+ catch (e) {
+ console.error('[vue-devtools] Error during hook replay', e)
+ }
+ }
+
+ // Clone deep utility for cloning initial state of the store
+ // Forked from https://github.com/planttheidea/fast-copy
+ // Last update: 2019-10-30
+ // ⚠️ Don't forget to update `./hook.js`
+
+ // utils
+ const { toString: toStringFunction } = Function.prototype
+ const {
+ create,
+ defineProperty,
+ getOwnPropertyDescriptor,
+ getOwnPropertyNames,
+ getOwnPropertySymbols,
+ getPrototypeOf,
+ } = Object
+ const { hasOwnProperty, propertyIsEnumerable } = Object.prototype
+
+ /**
+ * @enum
+ *
+ * @const {object} SUPPORTS
+ *
+ * @property {boolean} SYMBOL_PROPERTIES are symbol properties supported
+ * @property {boolean} WEAKSET is WeakSet supported
+ */
+ const SUPPORTS = {
+ SYMBOL_PROPERTIES: typeof getOwnPropertySymbols === 'function',
+ WEAKSET: typeof WeakSet === 'function',
+ }
+
+ /**
+ * @function createCache
+ *
+ * @description
+ * get a new cache object to prevent circular references
+ *
+ * @returns the new cache object
+ */
+ const createCache = () => {
+ if (SUPPORTS.WEAKSET) {
+ return new WeakSet()
+ }
+
+ const object = create({
+ add: value => object._values.push(value),
+ has: value => !!~object._values.indexOf(value),
+ })
+
+ object._values = []
+
+ return object
+ }
+
+ /**
+ * @function getCleanClone
+ *
+ * @description
+ * get an empty version of the object with the same prototype it has
+ *
+ * @param object the object to build a clean clone from
+ * @param realm the realm the object resides in
+ * @returns the empty cloned object
+ */
+ const getCleanClone = (object, realm) => {
+ if (!object.constructor) {
+ return create(null)
+ }
+
+ // eslint-disable-next-line no-proto, no-restricted-properties
+ const prototype = object.__proto__ || getPrototypeOf(object)
+
+ if (object.constructor === realm.Object) {
+ return prototype === realm.Object.prototype ? {} : create(prototype)
+ }
+
+ if (~toStringFunction.call(object.constructor).indexOf('[native code]')) {
+ try {
+ return new object.constructor()
+ }
+ catch (e) {
+ // Error
+ }
+ }
+
+ return create(prototype)
+ }
+
+ /**
+ * @function getObjectCloneLoose
+ *
+ * @description
+ * get a copy of the object based on loose rules, meaning all enumerable keys
+ * and symbols are copied, but property descriptors are not considered
+ *
+ * @param object the object to clone
+ * @param realm the realm the object resides in
+ * @param handleCopy the function that handles copying the object
+ * @returns the copied object
+ */
+ const getObjectCloneLoose = (
+ object,
+ realm,
+ handleCopy,
+ cache,
+ ) => {
+ const clone = getCleanClone(object, realm)
+
+ for (const key in object) {
+ if (hasOwnProperty.call(object, key)) {
+ clone[key] = handleCopy(object[key], cache)
+ }
+ }
+
+ if (SUPPORTS.SYMBOL_PROPERTIES) {
+ const symbols = getOwnPropertySymbols(object)
+
+ if (symbols.length) {
+ for (let index = 0, symbol; index < symbols.length; index++) {
+ symbol = symbols[index]
+
+ if (propertyIsEnumerable.call(object, symbol)) {
+ clone[symbol] = handleCopy(object[symbol], cache)
+ }
+ }
+ }
+ }
+
+ return clone
+ }
+
+ /**
+ * @function getObjectCloneStrict
+ *
+ * @description
+ * get a copy of the object based on strict rules, meaning all keys and symbols
+ * are copied based on the original property descriptors
+ *
+ * @param object the object to clone
+ * @param realm the realm the object resides in
+ * @param handleCopy the function that handles copying the object
+ * @returns the copied object
+ */
+ const getObjectCloneStrict = (
+ object,
+ realm,
+ handleCopy,
+ cache,
+ ) => {
+ const clone = getCleanClone(object, realm)
+
+ const properties = SUPPORTS.SYMBOL_PROPERTIES
+ ? [].concat(getOwnPropertyNames(object), getOwnPropertySymbols(object))
+ : getOwnPropertyNames(object)
+
+ if (properties.length) {
+ for (
+ let index = 0, property, descriptor;
+ index < properties.length;
+ index++
+ ) {
+ property = properties[index]
+
+ if (property !== 'callee' && property !== 'caller') {
+ descriptor = getOwnPropertyDescriptor(object, property)
+
+ descriptor.value = handleCopy(object[property], cache)
+
+ defineProperty(clone, property, descriptor)
+ }
+ }
+ }
+
+ return clone
+ }
+
+ /**
+ * @function getRegExpFlags
+ *
+ * @description
+ * get the flags to apply to the copied regexp
+ *
+ * @param regExp the regexp to get the flags of
+ * @returns the flags for the regexp
+ */
+ const getRegExpFlags = (regExp) => {
+ let flags = ''
+
+ if (regExp.global) {
+ flags += 'g'
+ }
+
+ if (regExp.ignoreCase) {
+ flags += 'i'
+ }
+
+ if (regExp.multiline) {
+ flags += 'm'
+ }
+
+ if (regExp.unicode) {
+ flags += 'u'
+ }
+
+ if (regExp.sticky) {
+ flags += 'y'
+ }
+
+ return flags
+ }
+
+ const { isArray } = Array
+
+ const GLOBAL_THIS = (() => {
+ // eslint-disable-next-line no-restricted-globals
+ if (typeof self !== 'undefined') {
+ // eslint-disable-next-line no-restricted-globals
+ return self
+ }
+
+ if (typeof window !== 'undefined') {
+ return window
+ }
+
+ if (typeof globalThis !== 'undefined') {
+ return globalThis
+ }
+
+ if (console && console.error) {
+ console.error('Unable to locate global object, returning "this".')
+ }
+ })()
+
+ /**
+ * @function clone
+ *
+ * @description
+ * copy an object deeply as much as possible
+ *
+ * If `strict` is applied, then all properties (including non-enumerable ones)
+ * are copied with their original property descriptors on both objects and arrays.
+ *
+ * The object is compared to the global constructors in the `realm` provided,
+ * and the native constructor is always used to ensure that extensions of native
+ * objects (allows in ES2015+) are maintained.
+ *
+ * @param object the object to copy
+ * @param [options] the options for copying with
+ * @param [options.isStrict] should the copy be strict
+ * @param [options.realm] the realm (this) object the object is copied from
+ * @returns the copied object
+ */
+ function clone(object, options = null) {
+ // manually coalesced instead of default parameters for performance
+ const isStrict = !!(options && options.isStrict)
+ const realm = (options && options.realm) || GLOBAL_THIS
+
+ const getObjectClone = isStrict
+ ? getObjectCloneStrict
+ : getObjectCloneLoose
+
+ /**
+ * @function handleCopy
+ *
+ * @description
+ * copy the object recursively based on its type
+ *
+ * @param object the object to copy
+ * @returns the copied object
+ */
+ const handleCopy = (
+ object,
+ cache,
+ ) => {
+ if (!object || typeof object !== 'object' || cache.has(object)) {
+ return object
+ }
+
+ // DOM objects
+ if (typeof HTMLElement !== 'undefined' && object instanceof HTMLElement) {
+ return object.cloneNode(false)
+ }
+
+ const Constructor = object.constructor
+
+ // plain objects
+ if (Constructor === realm.Object) {
+ cache.add(object)
+
+ return getObjectClone(object, realm, handleCopy, cache)
+ }
+
+ let clone
+
+ // arrays
+ if (isArray(object)) {
+ cache.add(object)
+
+ // if strict, include non-standard properties
+ if (isStrict) {
+ return getObjectCloneStrict(object, realm, handleCopy, cache)
+ }
+
+ clone = new Constructor()
+
+ for (let index = 0; index < object.length; index++) {
+ clone[index] = handleCopy(object[index], cache)
+ }
+
+ return clone
+ }
+
+ // dates
+ if (object instanceof realm.Date) {
+ return new Constructor(object.getTime())
+ }
+
+ // regexps
+ if (object instanceof realm.RegExp) {
+ clone = new Constructor(
+ object.source,
+ object.flags || getRegExpFlags(object),
+ )
+
+ clone.lastIndex = object.lastIndex
+
+ return clone
+ }
+
+ // maps
+ if (realm.Map && object instanceof realm.Map) {
+ cache.add(object)
+
+ clone = new Constructor()
+
+ object.forEach((value, key) => {
+ clone.set(key, handleCopy(value, cache))
+ })
+
+ return clone
+ }
+
+ // sets
+ if (realm.Set && object instanceof realm.Set) {
+ cache.add(object)
+
+ clone = new Constructor()
+
+ object.forEach((value) => {
+ clone.add(handleCopy(value, cache))
+ })
+
+ return clone
+ }
+
+ // buffers (node-only)
+ if (realm.Buffer && realm.Buffer.isBuffer(object)) {
+ clone = realm.Buffer.allocUnsafe
+ ? realm.Buffer.allocUnsafe(object.length)
+ : new Constructor(object.length)
+
+ object.copy(clone)
+
+ return clone
+ }
+
+ // arraybuffers / dataviews
+ if (realm.ArrayBuffer) {
+ // dataviews
+ if (realm.ArrayBuffer.isView(object)) {
+ return new Constructor(object.buffer.slice(0))
+ }
+
+ // arraybuffers
+ if (object instanceof realm.ArrayBuffer) {
+ return object.slice(0)
+ }
+ }
+
+ // if the object cannot / should not be cloned, don't
+ if (
+ // promise-like
+ (hasOwnProperty.call(object, 'then') && typeof object.then === 'function')
+ // errors
+ || object instanceof Error
+ // weakmaps
+ || (realm.WeakMap && object instanceof realm.WeakMap)
+ // weaksets
+ || (realm.WeakSet && object instanceof realm.WeakSet)
+ ) {
+ return object
+ }
+
+ cache.add(object)
+
+ // assume anything left is a custom constructor
+ return getObjectClone(object, realm, handleCopy, cache)
+ }
+
+ return handleCopy(object, createCache())
+ }
+}
diff --git a/vue-devtools/packages/app-backend-core/src/index.ts b/vue-devtools/packages/app-backend-core/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d10c082dc1d5c5f159bd3cb120ac07a80fbdf258
--- /dev/null
+++ b/vue-devtools/packages/app-backend-core/src/index.ts
@@ -0,0 +1,760 @@
+import type {
+ AppRecord,
+ BackendContext,
+ Plugin,
+} from '@vue-devtools/app-backend-api'
+import {
+ BuiltinBackendFeature,
+ createBackendContext,
+} from '@vue-devtools/app-backend-api'
+import type {
+ Bridge,
+} from '@vue-devtools/shared-utils'
+import {
+ BridgeEvents,
+ BridgeSubscriptions,
+ BuiltinTabs,
+ HookEvents,
+ SharedData,
+ createThrottleQueue,
+ getPluginSettings,
+ initSharedData,
+ isBrowser,
+ parse,
+ raf,
+ revive,
+ target,
+} from '@vue-devtools/shared-utils'
+import debounce from 'lodash/debounce'
+import type { CustomInspectorOptions, PluginDescriptor, SetupFunction, TimelineEventOptions, TimelineLayerOptions } from '@vue/devtools-api'
+import { Hooks, now } from '@vue/devtools-api'
+import { hook } from './global-hook'
+import { isSubscribed, subscribe, unsubscribe } from './util/subscriptions'
+import { highlight, unHighlight } from './highlighter'
+import { addTimelineEvent, clearTimeline, sendTimelineEventData, sendTimelineLayerEvents, sendTimelineLayers, setupTimeline } from './timeline'
+import ComponentPicker from './component-pick'
+import {
+ editComponentState,
+ getComponentId,
+ getComponentInstance,
+ refreshComponentTreeSearch,
+ sendComponentTreeData,
+ sendComponentUpdateTracking,
+ sendEmptyComponentData,
+ sendSelectedComponentData,
+} from './component'
+import { addPlugin, addPreviouslyRegisteredPlugins, addQueuedPlugins, sendPluginList } from './plugin'
+import { _legacy_getAndRegisterApps, getAppRecord, registerApp, removeApp, selectApp, sendApps, waitForAppsRegistration } from './app'
+import { editInspectorState, getInspector, getInspectorWithAppId, selectInspectorNode, sendCustomInspectors, sendInspectorState, sendInspectorTree } from './inspector'
+import { showScreenshot } from './timeline-screenshot'
+import { performanceMarkEnd, performanceMarkStart } from './perf'
+import { initOnPageConfig } from './page-config'
+import { addTimelineMarker, sendTimelineMarkers } from './timeline-marker'
+import { flashComponent } from './flash.js'
+
+let ctx: BackendContext = target.__vdevtools_ctx ?? null
+let connected = target.__vdevtools_connected ?? false
+
+let pageTitleObserver: MutationObserver
+
+export async function initBackend(bridge: Bridge) {
+ await initSharedData({
+ bridge,
+ persist: false,
+ })
+
+ SharedData.isBrowser = isBrowser
+
+ initOnPageConfig()
+
+ if (!connected) {
+ // First connect
+ ctx = target.__vdevtools_ctx = createBackendContext({
+ bridge,
+ hook,
+ })
+
+ SharedData.legacyApps = false
+ if (hook.Vue) {
+ connect()
+ _legacy_getAndRegisterApps(ctx, true)
+ SharedData.legacyApps = true
+ }
+ hook.on(HookEvents.INIT, () => {
+ _legacy_getAndRegisterApps(ctx, true)
+ SharedData.legacyApps = true
+ })
+
+ hook.on(HookEvents.APP_ADD, async (app) => {
+ await registerApp(app, ctx)
+ connect()
+ })
+
+ // Add apps that already sent init
+ if (hook.apps.length) {
+ hook.apps.forEach((app) => {
+ registerApp(app, ctx)
+ connect()
+ })
+ }
+ }
+ else {
+ // Reconnect
+ ctx.bridge = bridge
+ connectBridge()
+ ctx.bridge.send(BridgeEvents.TO_FRONT_RECONNECTED)
+ }
+}
+
+async function connect() {
+ if (connected) {
+ return
+ }
+ connected = target.__vdevtools_connected = true
+
+ await waitForAppsRegistration()
+
+ connectBridge()
+
+ ctx.currentTab = BuiltinTabs.COMPONENTS
+
+ // Apps
+
+ hook.on(HookEvents.APP_UNMOUNT, async (app) => {
+ await removeApp(app, ctx)
+ })
+
+ // Components
+
+ const throttleQueue = createThrottleQueue(500)
+
+ hook.on(HookEvents.COMPONENT_UPDATED, async (app, uid, parentUid, component) => {
+ try {
+ if (!app || (typeof uid !== 'number' && !uid) || !component) {
+ return
+ }
+ const now = Date.now()
+
+ let id: string
+ let appRecord: AppRecord
+ if (app && uid != null) {
+ id = await getComponentId(app, uid, component, ctx)
+ appRecord = await getAppRecord(app, ctx)
+ }
+ else {
+ id = ctx.currentInspectedComponentId
+ appRecord = ctx.currentAppRecord
+ }
+
+ throttleQueue.add(`update:${id}`, async () => {
+ try {
+ if (SharedData.trackUpdates) {
+ sendComponentUpdateTracking(id, now, ctx)
+ }
+
+ if (SharedData.flashUpdates) {
+ await flashComponent(component, appRecord.backend)
+ }
+
+ // Update component inspector
+ if (ctx.currentInspectedComponentId === id) {
+ await sendSelectedComponentData(appRecord, ctx.currentInspectedComponentId, ctx)
+ }
+
+ // Update tree (tags)
+ if (isSubscribed(BridgeSubscriptions.COMPONENT_TREE, id)) {
+ await sendComponentTreeData(appRecord, id, appRecord.componentFilter, 0, false, ctx)
+ }
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(e)
+ }
+ }
+ })
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(e)
+ }
+ }
+ })
+
+ hook.on(HookEvents.COMPONENT_ADDED, async (app, uid, parentUid, component) => {
+ try {
+ if (!app || (typeof uid !== 'number' && !uid) || !component) {
+ return
+ }
+ const now = Date.now()
+ const id = await getComponentId(app, uid, component, ctx)
+
+ throttleQueue.add(`add:${id}`, async () => {
+ try {
+ const appRecord = await getAppRecord(app, ctx)
+ if (component) {
+ if (component.__VUE_DEVTOOLS_UID__ == null) {
+ component.__VUE_DEVTOOLS_UID__ = id
+ }
+ if (appRecord?.instanceMap) {
+ if (!appRecord.instanceMap.has(id)) {
+ appRecord.instanceMap.set(id, component)
+ }
+ }
+ }
+
+ if (parentUid != null && appRecord?.instanceMap) {
+ const parentInstances = await appRecord.backend.api.walkComponentParents(component)
+ if (parentInstances.length) {
+ // Check two parents level to update `hasChildren
+ for (let i = 0; i < parentInstances.length; i++) {
+ const parentId = await getComponentId(app, parentUid, parentInstances[i], ctx)
+ if (i < 2 && isSubscribed(BridgeSubscriptions.COMPONENT_TREE, parentId)) {
+ raf(() => {
+ sendComponentTreeData(appRecord, parentId, appRecord.componentFilter, null, false, ctx)
+ })
+ }
+
+ if (SharedData.trackUpdates) {
+ sendComponentUpdateTracking(parentId, now, ctx)
+ }
+ }
+ }
+ }
+
+ if (ctx.currentInspectedComponentId === id) {
+ await sendSelectedComponentData(appRecord, id, ctx)
+ }
+
+ if (SharedData.trackUpdates) {
+ sendComponentUpdateTracking(id, now, ctx)
+ }
+
+ if (SharedData.flashUpdates) {
+ await flashComponent(component, appRecord.backend)
+ }
+
+ await refreshComponentTreeSearch(ctx)
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(e)
+ }
+ }
+ })
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(e)
+ }
+ }
+ })
+
+ hook.on(HookEvents.COMPONENT_REMOVED, async (app, uid, parentUid, component) => {
+ try {
+ if (!app || (typeof uid !== 'number' && !uid) || !component) {
+ return
+ }
+ const id = await getComponentId(app, uid, component, ctx)
+
+ throttleQueue.add(`remove:${id}`, async () => {
+ try {
+ const appRecord = await getAppRecord(app, ctx)
+ if (parentUid != null && appRecord) {
+ const parentInstances = await appRecord.backend.api.walkComponentParents(component)
+ if (parentInstances.length) {
+ const parentId = await getComponentId(app, parentUid, parentInstances[0], ctx)
+ if (isSubscribed(BridgeSubscriptions.COMPONENT_TREE, parentId)) {
+ raf(async () => {
+ try {
+ const appRecord = await getAppRecord(app, ctx)
+
+ if (appRecord) {
+ sendComponentTreeData(appRecord, parentId, appRecord.componentFilter, null, false, ctx)
+ }
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(e)
+ }
+ }
+ })
+ }
+ }
+ }
+
+ if (isSubscribed(BridgeSubscriptions.SELECTED_COMPONENT_DATA, id)) {
+ await sendEmptyComponentData(id, ctx)
+ }
+
+ if (appRecord) {
+ appRecord.instanceMap.delete(id)
+ }
+
+ await refreshComponentTreeSearch(ctx)
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(e)
+ }
+ }
+ })
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(e)
+ }
+ }
+ })
+
+ hook.on(HookEvents.TRACK_UPDATE, (id, ctx) => {
+ sendComponentUpdateTracking(id, Date.now(), ctx)
+ })
+
+ hook.on(HookEvents.FLASH_UPDATE, (instance, backend) => {
+ flashComponent(instance, backend)
+ })
+
+ // Component perf
+
+ hook.on(HookEvents.PERFORMANCE_START, (app, uid, vm, type, time) => {
+ performanceMarkStart(app, uid, vm, type, time, ctx)
+ })
+
+ hook.on(HookEvents.PERFORMANCE_END, (app, uid, vm, type, time) => {
+ performanceMarkEnd(app, uid, vm, type, time, ctx)
+ })
+
+ // Highlighter
+
+ hook.on(HookEvents.COMPONENT_HIGHLIGHT, (instanceId) => {
+ highlight(ctx.currentAppRecord.instanceMap.get(instanceId), ctx.currentAppRecord.backend, ctx)
+ })
+
+ hook.on(HookEvents.COMPONENT_UNHIGHLIGHT, () => {
+ unHighlight()
+ })
+
+ // Timeline
+
+ setupTimeline(ctx)
+
+ hook.on(HookEvents.TIMELINE_LAYER_ADDED, async (options: TimelineLayerOptions, plugin: Plugin) => {
+ const appRecord = await getAppRecord(plugin.descriptor.app, ctx)
+ if (appRecord) {
+ ctx.timelineLayers.push({
+ ...options,
+ appRecord,
+ plugin,
+ events: [],
+ })
+ ctx.bridge.send(BridgeEvents.TO_FRONT_TIMELINE_LAYER_ADD, {})
+ }
+ })
+
+ hook.on(HookEvents.TIMELINE_EVENT_ADDED, async (options: TimelineEventOptions, plugin: Plugin) => {
+ await addTimelineEvent(options, plugin.descriptor.app, ctx)
+ })
+
+ // Custom inspectors
+
+ hook.on(HookEvents.CUSTOM_INSPECTOR_ADD, async (options: CustomInspectorOptions, plugin: Plugin) => {
+ const appRecord = await getAppRecord(plugin.descriptor.app, ctx)
+ if (appRecord) {
+ ctx.customInspectors.push({
+ ...options,
+ appRecord,
+ plugin,
+ treeFilter: '',
+ selectedNodeId: null,
+ })
+ ctx.bridge.send(BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_ADD, {})
+ }
+ })
+
+ hook.on(HookEvents.CUSTOM_INSPECTOR_SEND_TREE, async (inspectorId: string, plugin: Plugin) => {
+ const inspector = getInspector(inspectorId, plugin.descriptor.app, ctx)
+ if (inspector) {
+ await sendInspectorTree(inspector, ctx)
+ }
+ else if (SharedData.debugInfo) {
+ console.warn(`Inspector ${inspectorId} not found`)
+ }
+ })
+
+ hook.on(HookEvents.CUSTOM_INSPECTOR_SEND_STATE, async (inspectorId: string, plugin: Plugin) => {
+ const inspector = getInspector(inspectorId, plugin.descriptor.app, ctx)
+ if (inspector) {
+ await sendInspectorState(inspector, ctx)
+ }
+ else if (SharedData.debugInfo) {
+ console.warn(`Inspector ${inspectorId} not found`)
+ }
+ })
+
+ hook.on(HookEvents.CUSTOM_INSPECTOR_SELECT_NODE, async (inspectorId: string, nodeId: string, plugin: Plugin) => {
+ const inspector = getInspector(inspectorId, plugin.descriptor.app, ctx)
+ if (inspector) {
+ await selectInspectorNode(inspector, nodeId, ctx)
+ }
+ else if (SharedData.debugInfo) {
+ console.warn(`Inspector ${inspectorId} not found`)
+ }
+ })
+
+ // Plugins
+
+ try {
+ await addPreviouslyRegisteredPlugins(ctx)
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(`Error adding previously registered plugins:`)
+ console.error(e)
+ }
+ }
+ try {
+ await addQueuedPlugins(ctx)
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(`Error adding queued plugins:`)
+ console.error(e)
+ }
+ }
+
+ hook.on(HookEvents.SETUP_DEVTOOLS_PLUGIN, async (pluginDescriptor: PluginDescriptor, setupFn: SetupFunction) => {
+ await addPlugin({ pluginDescriptor, setupFn }, ctx)
+ })
+
+ target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ = true
+
+ // Legacy flush
+
+ const handleFlush = debounce(async () => {
+ if (ctx.currentAppRecord?.backend.options.features.includes(BuiltinBackendFeature.FLUSH)) {
+ await sendComponentTreeData(ctx.currentAppRecord, '_root', ctx.currentAppRecord.componentFilter, null, false, ctx)
+ if (ctx.currentInspectedComponentId) {
+ await sendSelectedComponentData(ctx.currentAppRecord, ctx.currentInspectedComponentId, ctx)
+ }
+ }
+ }, 500)
+
+ hook.off(HookEvents.FLUSH)
+ hook.on(HookEvents.FLUSH, handleFlush)
+
+ // Connect done
+
+ try {
+ await addTimelineMarker({
+ id: 'vue-devtools-init-backend',
+ time: now(),
+ label: 'Vue Devtools connected',
+ color: 0x41B883,
+ all: true,
+ }, ctx)
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(`Error while adding devtools connected timeline marker:`)
+ console.error(e)
+ }
+ }
+}
+
+function connectBridge() {
+ // Subscriptions
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_SUBSCRIBE, ({ type, key }) => {
+ subscribe(type, key)
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_UNSUBSCRIBE, ({ type, key }) => {
+ unsubscribe(type, key)
+ })
+
+ // Tabs
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_TAB_SWITCH, async (tab) => {
+ ctx.currentTab = tab
+ await unHighlight()
+ })
+
+ // Apps
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_APP_LIST, async () => {
+ await sendApps(ctx)
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_APP_SELECT, async (id) => {
+ if (id == null) {
+ return
+ }
+ const record = ctx.appRecords.find(r => r.id === id)
+ if (record) {
+ await selectApp(record, ctx)
+ }
+ else if (SharedData.debugInfo) {
+ console.warn(`App with id ${id} not found`)
+ }
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_SCAN_LEGACY_APPS, () => {
+ if (hook.Vue) {
+ _legacy_getAndRegisterApps(ctx)
+ }
+ })
+
+ // Components
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_TREE, async ({ instanceId, filter, recursively }) => {
+ ctx.currentAppRecord.componentFilter = filter
+ subscribe(BridgeSubscriptions.COMPONENT_TREE, instanceId)
+ await sendComponentTreeData(ctx.currentAppRecord, instanceId, filter, null, recursively, ctx)
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_SELECTED_DATA, async (instanceId) => {
+ await sendSelectedComponentData(ctx.currentAppRecord, instanceId, ctx)
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_EDIT_STATE, async ({ instanceId, dotPath, type, value, newKey, remove }) => {
+ await editComponentState(instanceId, dotPath, type, { value, newKey, remove }, ctx)
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_INSPECT_DOM, async ({ instanceId }) => {
+ const instance = getComponentInstance(ctx.currentAppRecord, instanceId, ctx)
+ if (instance) {
+ const [el] = await ctx.currentAppRecord.backend.api.getComponentRootElements(instance)
+ if (el) {
+ target.__VUE_DEVTOOLS_INSPECT_TARGET__ = el
+ ctx.bridge.send(BridgeEvents.TO_FRONT_COMPONENT_INSPECT_DOM, null)
+ }
+ }
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_SCROLL_TO, async ({ instanceId }) => {
+ if (!isBrowser) {
+ return
+ }
+ const instance = getComponentInstance(ctx.currentAppRecord, instanceId, ctx)
+ if (instance) {
+ const [el] = await ctx.currentAppRecord.backend.api.getComponentRootElements(instance)
+ if (el) {
+ if (typeof el.scrollIntoView === 'function') {
+ el.scrollIntoView({
+ behavior: 'smooth',
+ block: 'center',
+ inline: 'center',
+ })
+ }
+ else {
+ // Handle nodes that don't implement scrollIntoView
+ const bounds = await ctx.currentAppRecord.backend.api.getComponentBounds(instance)
+ const scrollTarget = document.createElement('div')
+ scrollTarget.style.position = 'absolute'
+ scrollTarget.style.width = `${bounds.width}px`
+ scrollTarget.style.height = `${bounds.height}px`
+ scrollTarget.style.top = `${bounds.top}px`
+ scrollTarget.style.left = `${bounds.left}px`
+ document.body.appendChild(scrollTarget)
+ scrollTarget.scrollIntoView({
+ behavior: 'smooth',
+ block: 'center',
+ inline: 'center',
+ })
+ setTimeout(() => {
+ document.body.removeChild(scrollTarget)
+ }, 2000)
+ }
+ highlight(instance, ctx.currentAppRecord.backend, ctx)
+ setTimeout(() => {
+ unHighlight()
+ }, 2000)
+ }
+ }
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_RENDER_CODE, async ({ instanceId }) => {
+ if (!isBrowser) {
+ return
+ }
+ const instance = getComponentInstance(ctx.currentAppRecord, instanceId, ctx)
+ if (instance) {
+ const { code } = await ctx.currentAppRecord.backend.api.getComponentRenderCode(instance)
+ ctx.bridge.send(BridgeEvents.TO_FRONT_COMPONENT_RENDER_CODE, {
+ instanceId,
+ code,
+ })
+ }
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_CUSTOM_STATE_ACTION, async ({ value, actionIndex }) => {
+ const rawAction = value._custom.actions[actionIndex]
+ const action = revive(rawAction?.action)
+ if (action) {
+ try {
+ await action()
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(e)
+ }
+ }
+ }
+ else if (SharedData.debugInfo) {
+ console.warn(`Couldn't revive action ${actionIndex} from`, value)
+ }
+ })
+
+ // Highlighter
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_MOUSE_OVER, async (instanceId) => {
+ await highlight(ctx.currentAppRecord.instanceMap.get(instanceId), ctx.currentAppRecord.backend, ctx)
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_MOUSE_OUT, async () => {
+ await unHighlight()
+ })
+
+ // Component picker
+
+ const componentPicker = new ComponentPicker(ctx)
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_PICK, () => {
+ componentPicker.startSelecting()
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_PICK_CANCELED, () => {
+ componentPicker.stopSelecting()
+ })
+
+ // Timeline
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_TIMELINE_LAYER_LIST, async () => {
+ await sendTimelineLayers(ctx)
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_TIMELINE_SHOW_SCREENSHOT, async ({ screenshot }) => {
+ await showScreenshot(screenshot, ctx)
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_TIMELINE_CLEAR, async () => {
+ await clearTimeline(ctx)
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_TIMELINE_EVENT_DATA, async ({ id }) => {
+ await sendTimelineEventData(id, ctx)
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_TIMELINE_LAYER_LOAD_EVENTS, async ({ appId, layerId }) => {
+ await sendTimelineLayerEvents(appId, layerId, ctx)
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_TIMELINE_LOAD_MARKERS, async () => {
+ await sendTimelineMarkers(ctx)
+ })
+
+ // Custom inspectors
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_LIST, async () => {
+ await sendCustomInspectors(ctx)
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_TREE, async ({ inspectorId, appId, treeFilter }) => {
+ const inspector = await getInspectorWithAppId(inspectorId, appId, ctx)
+ if (inspector) {
+ inspector.treeFilter = treeFilter
+ sendInspectorTree(inspector, ctx)
+ }
+ else if (SharedData.debugInfo) {
+ console.warn(`Inspector ${inspectorId} not found`)
+ }
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_STATE, async ({ inspectorId, appId, nodeId }) => {
+ const inspector = await getInspectorWithAppId(inspectorId, appId, ctx)
+ if (inspector) {
+ inspector.selectedNodeId = nodeId
+ sendInspectorState(inspector, ctx)
+ }
+ else if (SharedData.debugInfo) {
+ console.warn(`Inspector ${inspectorId} not found`)
+ }
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_EDIT_STATE, async ({ inspectorId, appId, nodeId, path, type, payload }) => {
+ const inspector = await getInspectorWithAppId(inspectorId, appId, ctx)
+ if (inspector) {
+ await editInspectorState(inspector, nodeId, path, type, payload, ctx)
+ inspector.selectedNodeId = nodeId
+ await sendInspectorState(inspector, ctx)
+ }
+ else if (SharedData.debugInfo) {
+ console.warn(`Inspector ${inspectorId} not found`)
+ }
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_ACTION, async ({ inspectorId, appId, actionIndex, actionType, args }) => {
+ const inspector = await getInspectorWithAppId(inspectorId, appId, ctx)
+ if (inspector) {
+ const action = inspector[actionType ?? 'actions'][actionIndex]
+ try {
+ await action.action(...(args ?? []))
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(e)
+ }
+ }
+ }
+ else if (SharedData.debugInfo) {
+ console.warn(`Inspector ${inspectorId} not found`)
+ }
+ })
+
+ // Misc
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_LOG, (payload: { level: string, value: any, serialized?: boolean, revive?: boolean }) => {
+ let value = payload.value
+ if (payload.serialized) {
+ value = parse(value, payload.revive)
+ }
+ else if (payload.revive) {
+ value = revive(value)
+ }
+ // eslint-disable-next-line no-console
+ console[payload.level](value)
+ })
+
+ // Plugins
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_DEVTOOLS_PLUGIN_LIST, async () => {
+ await sendPluginList(ctx)
+ })
+
+ ctx.bridge.on(BridgeEvents.TO_BACK_DEVTOOLS_PLUGIN_SETTING_UPDATED, ({ pluginId, key, newValue, oldValue }) => {
+ const settings = getPluginSettings(pluginId)
+ ctx.hook.emit(HookEvents.PLUGIN_SETTINGS_SET, pluginId, settings)
+ ctx.currentAppRecord.backend.api.callHook(Hooks.SET_PLUGIN_SETTINGS, {
+ app: ctx.currentAppRecord.options.app,
+ pluginId,
+ key,
+ newValue,
+ oldValue,
+ settings,
+ })
+ })
+
+ ctx.bridge.send(BridgeEvents.TO_FRONT_TITLE, { title: document.title })
+ // Watch page title
+ const titleEl = document.querySelector('title')
+ if (titleEl && typeof MutationObserver !== 'undefined') {
+ if (pageTitleObserver) {
+ pageTitleObserver.disconnect()
+ }
+ pageTitleObserver = new MutationObserver((mutations) => {
+ const title = mutations[0].target as HTMLTitleElement
+ ctx.bridge.send(BridgeEvents.TO_FRONT_TITLE, { title: title.textContent })
+ })
+ pageTitleObserver.observe(titleEl, { subtree: true, characterData: true, childList: true })
+ }
+}
diff --git a/vue-devtools/packages/app-backend-core/src/inspector.ts b/vue-devtools/packages/app-backend-core/src/inspector.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67e79a3838c996bb14496d876f96059db94eb757
--- /dev/null
+++ b/vue-devtools/packages/app-backend-core/src/inspector.ts
@@ -0,0 +1,76 @@
+import type { App } from '@vue/devtools-api'
+import type { BackendContext, CustomInspector } from '@vue-devtools/app-backend-api'
+import { BridgeEvents, parse, stringify } from '@vue-devtools/shared-utils'
+
+export function getInspector(inspectorId: string, app: App, ctx: BackendContext) {
+ return ctx.customInspectors.find(i => i.id === inspectorId && i.appRecord.options.app === app)
+}
+
+export async function getInspectorWithAppId(inspectorId: string, appId: string, ctx: BackendContext): Promise {
+ for (const i of ctx.customInspectors) {
+ if (i.id === inspectorId && i.appRecord.id === appId) {
+ return i
+ }
+ }
+ return null
+}
+
+export async function sendInspectorTree(inspector: CustomInspector, ctx: BackendContext) {
+ const rootNodes = await inspector.appRecord.backend.api.getInspectorTree(inspector.id, inspector.appRecord.options.app, inspector.treeFilter)
+ ctx.bridge.send(BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_TREE, {
+ appId: inspector.appRecord.id,
+ inspectorId: inspector.id,
+ rootNodes,
+ })
+}
+
+export async function sendInspectorState(inspector: CustomInspector, ctx: BackendContext) {
+ const state = inspector.selectedNodeId ? await inspector.appRecord.backend.api.getInspectorState(inspector.id, inspector.appRecord.options.app, inspector.selectedNodeId) : null
+ ctx.bridge.send(BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_STATE, {
+ appId: inspector.appRecord.id,
+ inspectorId: inspector.id,
+ state: stringify(state),
+ })
+}
+
+export async function editInspectorState(inspector: CustomInspector, nodeId: string, dotPath: string, type: string, state: any, _ctx: BackendContext) {
+ await inspector.appRecord.backend.api.editInspectorState(inspector.id, inspector.appRecord.options.app, nodeId, dotPath, type, {
+ ...state,
+ value: state.value != null ? parse(state.value, true) : state.value,
+ })
+}
+
+export async function sendCustomInspectors(ctx: BackendContext) {
+ const inspectors = []
+ for (const i of ctx.customInspectors) {
+ inspectors.push({
+ id: i.id,
+ appId: i.appRecord.id,
+ pluginId: i.plugin.descriptor.id,
+ label: i.label,
+ icon: i.icon,
+ treeFilterPlaceholder: i.treeFilterPlaceholder,
+ stateFilterPlaceholder: i.stateFilterPlaceholder,
+ noSelectionText: i.noSelectionText,
+ actions: i.actions?.map(a => ({
+ icon: a.icon,
+ tooltip: a.tooltip,
+ })),
+ nodeActions: i.nodeActions?.map(a => ({
+ icon: a.icon,
+ tooltip: a.tooltip,
+ })),
+ })
+ }
+ ctx.bridge.send(BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_LIST, {
+ inspectors,
+ })
+}
+
+export async function selectInspectorNode(inspector: CustomInspector, nodeId: string, ctx: BackendContext) {
+ ctx.bridge.send(BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_SELECT_NODE, {
+ appId: inspector.appRecord.id,
+ inspectorId: inspector.id,
+ nodeId,
+ })
+}
diff --git a/vue-devtools/packages/app-backend-core/src/legacy/scan.ts b/vue-devtools/packages/app-backend-core/src/legacy/scan.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7d4428744efd8a65959c7ca3476c8f1497b0eff0
--- /dev/null
+++ b/vue-devtools/packages/app-backend-core/src/legacy/scan.ts
@@ -0,0 +1,108 @@
+import { isBrowser, target } from '@vue-devtools/shared-utils'
+import { getPageConfig } from '../page-config'
+
+const rootInstances = []
+
+/**
+ * Scan the page for root level Vue instances.
+ */
+export function scan() {
+ rootInstances.length = 0
+
+ let inFragment = false
+ let currentFragment = null
+
+ function processInstance(instance) {
+ if (instance) {
+ if (!rootInstances.includes(instance.$root)) {
+ instance = instance.$root
+ }
+ if (instance._isFragment) {
+ inFragment = true
+ currentFragment = instance
+ }
+
+ // respect Vue.config.devtools option
+ let baseVue = instance.constructor
+ while (baseVue.super) {
+ baseVue = baseVue.super
+ }
+ if (baseVue.config && baseVue.config.devtools) {
+ rootInstances.push(instance)
+ }
+
+ return true
+ }
+ }
+
+ if (isBrowser) {
+ const walkDocument = (document) => {
+ walk(document, (node) => {
+ if (inFragment) {
+ if (node === currentFragment._fragmentEnd) {
+ inFragment = false
+ currentFragment = null
+ }
+ return true
+ }
+ const instance = node.__vue__
+
+ return processInstance(instance)
+ })
+ }
+ walkDocument(document)
+
+ const iframes = document.querySelectorAll('iframe')
+ for (const iframe of iframes) {
+ try {
+ walkDocument(iframe.contentDocument)
+ }
+ catch (e) {
+ // Ignore
+ }
+ }
+
+ // Scan for Vue instances in the customTarget elements
+ const { customVue2ScanSelector } = getPageConfig()
+ const customTargets = customVue2ScanSelector ? document.querySelectorAll(customVue2ScanSelector) : []
+ for (const customTarget of customTargets) {
+ try {
+ walkDocument(customTarget)
+ }
+ catch (e) {
+ // Ignore
+ }
+ }
+ }
+ else {
+ if (Array.isArray(target.__VUE_ROOT_INSTANCES__)) {
+ target.__VUE_ROOT_INSTANCES__.map(processInstance)
+ }
+ }
+
+ return rootInstances
+}
+
+/**
+ * DOM walk helper
+ *
+ * @param {NodeList} nodes
+ * @param {Function} fn
+ */
+
+function walk(node, fn) {
+ if (node.childNodes) {
+ for (let i = 0, l = node.childNodes.length; i < l; i++) {
+ const child = node.childNodes[i]
+ const stop = fn(child)
+ if (!stop) {
+ walk(child, fn)
+ }
+ }
+ }
+
+ // also walk shadow DOM
+ if (node.shadowRoot) {
+ walk(node.shadowRoot, fn)
+ }
+}
diff --git a/vue-devtools/packages/app-backend-core/src/page-config.ts b/vue-devtools/packages/app-backend-core/src/page-config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d570ae97f80fc05ff051871843f938c30fdc3a0c
--- /dev/null
+++ b/vue-devtools/packages/app-backend-core/src/page-config.ts
@@ -0,0 +1,25 @@
+import { SharedData, target } from '@vue-devtools/shared-utils'
+
+export interface PageConfig {
+ openInEditorHost?: string
+ defaultSelectedAppId?: string
+ customVue2ScanSelector?: string
+}
+
+let config: PageConfig = {}
+
+export function getPageConfig(): PageConfig {
+ return config
+}
+
+export function initOnPageConfig() {
+ // User project devtools config
+ if (Object.hasOwnProperty.call(target, 'VUE_DEVTOOLS_CONFIG')) {
+ config = SharedData.pageConfig = target.VUE_DEVTOOLS_CONFIG
+
+ // Open in editor
+ if (Object.hasOwnProperty.call(config, 'openInEditorHost')) {
+ SharedData.openInEditorHost = config.openInEditorHost
+ }
+ }
+}
diff --git a/vue-devtools/packages/app-backend-core/src/perf.ts b/vue-devtools/packages/app-backend-core/src/perf.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4cfa2f03c201c65b3a996eb28379c051bdd907a8
--- /dev/null
+++ b/vue-devtools/packages/app-backend-core/src/perf.ts
@@ -0,0 +1,192 @@
+import type { BackendContext, DevtoolsBackend } from '@vue-devtools/app-backend-api'
+import type { App, ComponentInstance } from '@vue/devtools-api'
+import { BridgeSubscriptions, SharedData, raf } from '@vue-devtools/shared-utils'
+import { addTimelineEvent } from './timeline'
+import { getAppRecord } from './app'
+import { getComponentId, sendComponentTreeData } from './component'
+import { isSubscribed } from './util/subscriptions'
+
+const markEndQueue = new Map()
+
+export async function performanceMarkStart(
+ app: App,
+ uid: number,
+ instance: ComponentInstance,
+ type: string,
+ time: number,
+ ctx: BackendContext,
+) {
+ try {
+ if (!SharedData.performanceMonitoringEnabled) {
+ return
+ }
+ const appRecord = await getAppRecord(app, ctx)
+ if (!appRecord) {
+ return
+ }
+ const componentName = await appRecord.backend.api.getComponentName(instance)
+ const groupId = ctx.perfUniqueGroupId++
+ const groupKey = `${uid}-${type}`
+ appRecord.perfGroupIds.set(groupKey, { groupId, time })
+ await addTimelineEvent({
+ layerId: 'performance',
+ event: {
+ time,
+ data: {
+ component: componentName,
+ type,
+ measure: 'start',
+ },
+ title: componentName,
+ subtitle: type,
+ groupId,
+ },
+ }, app, ctx)
+
+ if (markEndQueue.has(groupKey)) {
+ const {
+ app,
+ uid,
+ instance,
+ type,
+ time,
+ } = markEndQueue.get(groupKey)
+ markEndQueue.delete(groupKey)
+ await performanceMarkEnd(
+ app,
+ uid,
+ instance,
+ type,
+ time,
+ ctx,
+ )
+ }
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(e)
+ }
+ }
+}
+
+export async function performanceMarkEnd(
+ app: App,
+ uid: number,
+ instance: ComponentInstance,
+ type: string,
+ time: number,
+ ctx: BackendContext,
+) {
+ try {
+ if (!SharedData.performanceMonitoringEnabled) {
+ return
+ }
+ const appRecord = await getAppRecord(app, ctx)
+ if (!appRecord) {
+ return
+ }
+ const componentName = await appRecord.backend.api.getComponentName(instance)
+ const groupKey = `${uid}-${type}`
+ const groupInfo = appRecord.perfGroupIds.get(groupKey)
+ if (!groupInfo) {
+ markEndQueue.set(groupKey, {
+ app,
+ uid,
+ instance,
+ type,
+ time,
+ })
+ return
+ }
+ const { groupId, time: startTime } = groupInfo
+ const duration = time - startTime
+ await addTimelineEvent({
+ layerId: 'performance',
+ event: {
+ time,
+ data: {
+ component: componentName,
+ type,
+ measure: 'end',
+ duration: {
+ _custom: {
+ type: 'Duration',
+ value: duration,
+ display: `${duration} ms`,
+ },
+ },
+ },
+ title: componentName,
+ subtitle: type,
+ groupId,
+ },
+ }, app, ctx)
+
+ // Mark on component
+ const tooSlow = duration > 10
+ if (tooSlow || instance.__VUE_DEVTOOLS_SLOW__) {
+ let change = false
+ if (tooSlow && !instance.__VUE_DEVTOOLS_SLOW__) {
+ instance.__VUE_DEVTOOLS_SLOW__ = {
+ duration: null,
+ measures: {},
+ }
+ }
+
+ const data = instance.__VUE_DEVTOOLS_SLOW__
+
+ if (tooSlow && (data.duration == null || data.duration < duration)) {
+ data.duration = duration
+ change = true
+ }
+
+ if (data.measures[type] == null || data.measures[type] < duration) {
+ data.measures[type] = duration
+ change = true
+ }
+
+ if (change) {
+ // Update component tree
+ const id = await getComponentId(app, uid, instance, ctx)
+ if (isSubscribed(BridgeSubscriptions.COMPONENT_TREE, id)) {
+ raf(() => {
+ sendComponentTreeData(appRecord, id, ctx.currentAppRecord.componentFilter, null, false, ctx)
+ })
+ }
+ }
+ }
+ }
+ catch (e) {
+ if (SharedData.debugInfo) {
+ console.error(e)
+ }
+ }
+}
+
+export function handleAddPerformanceTag(backend: DevtoolsBackend, _ctx: BackendContext) {
+ backend.api.on.visitComponentTree((payload) => {
+ if (payload.componentInstance.__VUE_DEVTOOLS_SLOW__) {
+ const { duration, measures } = payload.componentInstance.__VUE_DEVTOOLS_SLOW__
+
+ let tooltip = ''
+ for (const type in measures) {
+ const d = measures[type]
+ tooltip += `
${type}
${Math.round(d * 1000) / 1000} ms
`
+ }
+ tooltip += '
${eventName} is not declared in the emits option. It will leak into the component's attributes ($attrs).` : null,
+ },
+ },
+ })
+ }
+ }
+ return result
+}
+
+export function editState({ componentInstance, path, state, type }: HookPayloads[Hooks.EDIT_COMPONENT_STATE], stateEditor: StateEditor, _ctx: BackendContext) {
+ if (!['data', 'props', 'computed', 'setup'].includes(type)) {
+ return
+ }
+ let target: any
+ const targetPath: string[] = path.slice()
+
+ if (Object.keys(componentInstance.props).includes(path[0])) {
+ // Props
+ target = componentInstance.props
+ }
+ else if (componentInstance.devtoolsRawSetupState && Object.keys(componentInstance.devtoolsRawSetupState).includes(path[0])) {
+ // Setup
+ target = componentInstance.devtoolsRawSetupState
+
+ const currentValue = stateEditor.get(componentInstance.devtoolsRawSetupState, path)
+ if (currentValue != null) {
+ const info = getSetupStateInfo(currentValue)
+ if (info.readonly) {
+ return
+ }
+ }
+ }
+ else {
+ target = componentInstance.proxy
+ }
+
+ if (target && targetPath) {
+ stateEditor.set(target, targetPath, 'value' in state ? state.value : undefined, stateEditor.createDefaultSetCallback(state))
+ }
+}
+
+function reduceStateList(list) {
+ if (!list.length) {
+ return undefined
+ }
+ return list.reduce((map, item) => {
+ const key = item.type || 'data'
+ const obj = map[key] = map[key] || {}
+ obj[item.key] = item.value
+ return map
+ }, {})
+}
+
+export function getCustomInstanceDetails(instance) {
+ if (instance._) {
+ instance = instance._
+ }
+ const state = getInstanceState(instance)
+ return {
+ _custom: {
+ type: 'component',
+ id: instance.__VUE_DEVTOOLS_UID__,
+ display: getInstanceName(instance),
+ tooltip: 'Component instance',
+ value: reduceStateList(state),
+ fields: {
+ abstract: true,
+ },
+ },
+ }
+}
+
+function resolveMergedOptions(
+ instance: ComponentInstance,
+) {
+ const raw = instance.type
+ const { mixins, extends: extendsOptions } = raw
+ const globalMixins = instance.appContext.mixins
+ if (!globalMixins.length && !mixins && !extendsOptions) {
+ return raw
+ }
+ const options = {}
+ globalMixins.forEach(m => mergeOptions(options, m, instance))
+ mergeOptions(options, raw, instance)
+ return options
+}
+
+function mergeOptions(
+ to: any,
+ from: any,
+ instance: ComponentInstance,
+) {
+ if (typeof from === 'function') {
+ from = from.options
+ }
+
+ if (!from) {
+ return to
+ }
+
+ const { mixins, extends: extendsOptions } = from
+
+ extendsOptions && mergeOptions(to, extendsOptions, instance)
+ mixins
+ && mixins.forEach(m =>
+ mergeOptions(to, m, instance),
+ )
+
+ for (const key of ['computed', 'inject']) {
+ if (Object.prototype.hasOwnProperty.call(from, key)) {
+ if (!to[key]) {
+ to[key] = from[key]
+ }
+ else {
+ to[key] = Object.assign(Object.create(null), to[key], from[key])
+ }
+ }
+ }
+ return to
+}
diff --git a/vue-devtools/packages/app-backend-vue3/src/components/el.ts b/vue-devtools/packages/app-backend-vue3/src/components/el.ts
new file mode 100644
index 0000000000000000000000000000000000000000..442a26e533b27f89a4ec03b9e7742ec46c76016b
--- /dev/null
+++ b/vue-devtools/packages/app-backend-vue3/src/components/el.ts
@@ -0,0 +1,161 @@
+import { inDoc, isBrowser } from '@vue-devtools/shared-utils'
+import { isFragment } from './util'
+
+export function getComponentInstanceFromElement(element) {
+ return element.__vueParentComponent
+}
+
+export function getRootElementsFromComponentInstance(instance) {
+ if (isFragment(instance)) {
+ return getFragmentRootElements(instance.subTree)
+ }
+ if (!instance.subTree) {
+ return []
+ }
+ return [instance.subTree.el]
+}
+
+function getFragmentRootElements(vnode): any[] {
+ if (!vnode.children) {
+ return []
+ }
+
+ const list = []
+
+ for (let i = 0, l = vnode.children.length; i < l; i++) {
+ const childVnode = vnode.children[i]
+ if (childVnode.component) {
+ list.push(...getRootElementsFromComponentInstance(childVnode.component))
+ }
+ else if (childVnode.el) {
+ list.push(childVnode.el)
+ }
+ }
+
+ return list
+}
+
+/**
+ * Get the client rect for an instance.
+ *
+ * @param {Vue|Vnode} instance
+ * @return {object}
+ */
+export function getInstanceOrVnodeRect(instance) {
+ const el = instance.subTree.el
+
+ if (!isBrowser) {
+ // @TODO: Find position from instance or a vnode (for functional components).
+ return
+ }
+ if (!inDoc(el)) {
+ return
+ }
+
+ if (isFragment(instance)) {
+ return addIframePosition(getFragmentRect(instance.subTree), getElWindow(el))
+ }
+ else if (el.nodeType === 1) {
+ return addIframePosition(el.getBoundingClientRect(), getElWindow(el))
+ }
+ else if (instance.subTree.component) {
+ return getInstanceOrVnodeRect(instance.subTree.component)
+ }
+}
+
+function createRect() {
+ const rect = {
+ top: 0,
+ bottom: 0,
+ left: 0,
+ right: 0,
+ get width() { return rect.right - rect.left },
+ get height() { return rect.bottom - rect.top },
+ }
+ return rect
+}
+
+function mergeRects(a, b) {
+ if (!a.top || b.top < a.top) {
+ a.top = b.top
+ }
+ if (!a.bottom || b.bottom > a.bottom) {
+ a.bottom = b.bottom
+ }
+ if (!a.left || b.left < a.left) {
+ a.left = b.left
+ }
+ if (!a.right || b.right > a.right) {
+ a.right = b.right
+ }
+ return a
+}
+
+let range
+/**
+ * Get the bounding rect for a text node using a Range.
+ *
+ * @param {Text} node
+ * @return {Rect}
+ */
+function getTextRect(node) {
+ if (!isBrowser) {
+ return
+ }
+ if (!range) {
+ range = document.createRange()
+ }
+
+ range.selectNode(node)
+
+ return range.getBoundingClientRect()
+}
+
+function getFragmentRect(vnode) {
+ const rect = createRect()
+ if (!vnode.children) {
+ return rect
+ }
+
+ for (let i = 0, l = vnode.children.length; i < l; i++) {
+ const childVnode = vnode.children[i]
+ let childRect
+ if (childVnode.component) {
+ childRect = getInstanceOrVnodeRect(childVnode.component)
+ }
+ else if (childVnode.el) {
+ const el = childVnode.el
+ if (el.nodeType === 1 || el.getBoundingClientRect) {
+ childRect = el.getBoundingClientRect()
+ }
+ else if (el.nodeType === 3 && el.data.trim()) {
+ childRect = getTextRect(el)
+ }
+ }
+ if (childRect) {
+ mergeRects(rect, childRect)
+ }
+ }
+
+ return rect
+}
+
+function getElWindow(el: HTMLElement) {
+ return el.ownerDocument.defaultView
+}
+
+function addIframePosition(bounds, win: any) {
+ if (win.__VUE_DEVTOOLS_IFRAME__) {
+ const rect = mergeRects(createRect(), bounds)
+ const iframeBounds = win.__VUE_DEVTOOLS_IFRAME__.getBoundingClientRect()
+ rect.top += iframeBounds.top
+ rect.bottom += iframeBounds.top
+ rect.left += iframeBounds.left
+ rect.right += iframeBounds.left
+ if (win.parent) {
+ return addIframePosition(rect, win.parent)
+ }
+ return rect
+ }
+ return bounds
+}
diff --git a/vue-devtools/packages/app-backend-vue3/src/components/filter.ts b/vue-devtools/packages/app-backend-vue3/src/components/filter.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b0fb5c118fb91ce9ce3fd8cab50497bfd6869475
--- /dev/null
+++ b/vue-devtools/packages/app-backend-vue3/src/components/filter.ts
@@ -0,0 +1,22 @@
+import { classify, kebabize } from '@vue-devtools/shared-utils'
+import { getInstanceName } from './util'
+
+export class ComponentFilter {
+ filter: string
+
+ constructor(filter: string) {
+ this.filter = filter || ''
+ }
+
+ /**
+ * Check if an instance is qualified.
+ *
+ * @param {Vue|Vnode} instance
+ * @return {boolean}
+ */
+ isQualified(instance) {
+ const name = getInstanceName(instance)
+ return classify(name).toLowerCase().includes(this.filter)
+ || kebabize(name).toLowerCase().includes(this.filter)
+ }
+}
diff --git a/vue-devtools/packages/app-backend-vue3/src/components/tree.ts b/vue-devtools/packages/app-backend-vue3/src/components/tree.ts
new file mode 100644
index 0000000000000000000000000000000000000000..283bd010eb68da2e24af88d480652c9c3274b280
--- /dev/null
+++ b/vue-devtools/packages/app-backend-vue3/src/components/tree.ts
@@ -0,0 +1,252 @@
+import type { BackendContext, DevtoolsApi } from '@vue-devtools/app-backend-api'
+import type { ComponentTreeNode } from '@vue/devtools-api'
+import { getInstanceName, getRenderKey, getUniqueComponentId, isBeingDestroyed, isFragment } from './util'
+import { ComponentFilter } from './filter'
+import { getRootElementsFromComponentInstance } from './el'
+
+export class ComponentWalker {
+ ctx: BackendContext
+ api: DevtoolsApi
+ maxDepth: number
+ recursively: boolean
+ componentFilter: ComponentFilter
+ // Dedupe instances
+ // Some instances may be both on a component and on a child abstract/functional component
+ captureIds: Map
+
+ constructor(maxDepth: number, filter: string, recursively: boolean, api: DevtoolsApi, ctx: BackendContext) {
+ this.ctx = ctx
+ this.api = api
+ this.maxDepth = maxDepth
+ this.recursively = recursively
+ this.componentFilter = new ComponentFilter(filter)
+ }
+
+ getComponentTree(instance: any): Promise {
+ this.captureIds = new Map()
+ return this.findQualifiedChildren(instance, 0)
+ }
+
+ getComponentParents(instance: any) {
+ this.captureIds = new Map()
+ const parents = []
+ this.captureId(instance)
+ let parent = instance
+ // eslint-disable-next-line no-cond-assign
+ while ((parent = parent.parent)) {
+ this.captureId(parent)
+ parents.push(parent)
+ }
+ return parents
+ }
+
+ /**
+ * Find qualified children from a single instance.
+ * If the instance itself is qualified, just return itself.
+ * This is ok because [].concat works in both cases.
+ *
+ * @param {Vue|Vnode} instance
+ * @return {Vue|Array}
+ */
+ private async findQualifiedChildren(instance: any, depth: number): Promise {
+ if (this.componentFilter.isQualified(instance) && !instance.type.devtools?.hide) {
+ return [await this.capture(instance, null, depth)]
+ }
+ else if (instance.subTree) {
+ // TODO functional components
+ const list = this.isKeepAlive(instance)
+ ? this.getKeepAliveCachedInstances(instance)
+ : this.getInternalInstanceChildren(instance.subTree)
+ return this.findQualifiedChildrenFromList(list, depth)
+ }
+ else {
+ return []
+ }
+ }
+
+ /**
+ * Iterate through an array of instances and flatten it into
+ * an array of qualified instances. This is a depth-first
+ * traversal - e.g. if an instance is not matched, we will
+ * recursively go deeper until a qualified child is found.
+ *
+ * @param {Array} instances
+ * @return {Array}
+ */
+ private async findQualifiedChildrenFromList(instances, depth: number): Promise {
+ instances = instances
+ .filter(child => !isBeingDestroyed(child) && !child.type.devtools?.hide)
+ if (!this.componentFilter.filter) {
+ return Promise.all(instances.map((child, index, list) => this.capture(child, list, depth)))
+ }
+ else {
+ return Array.prototype.concat.apply([], await Promise.all(instances.map(i => this.findQualifiedChildren(i, depth))))
+ }
+ }
+
+ /**
+ * Get children from a component instance.
+ */
+ private getInternalInstanceChildren(subTree, suspense = null) {
+ const list = []
+ if (subTree) {
+ if (subTree.component) {
+ !suspense ? list.push(subTree.component) : list.push({ ...subTree.component, suspense })
+ }
+ else if (subTree.suspense) {
+ const suspenseKey = !subTree.suspense.isInFallback ? 'suspense default' : 'suspense fallback'
+ list.push(...this.getInternalInstanceChildren(subTree.suspense.activeBranch, { ...subTree.suspense, suspenseKey }))
+ }
+ else if (Array.isArray(subTree.children)) {
+ subTree.children.forEach((childSubTree) => {
+ if (childSubTree.component) {
+ !suspense ? list.push(childSubTree.component) : list.push({ ...childSubTree.component, suspense })
+ }
+ else {
+ list.push(...this.getInternalInstanceChildren(childSubTree, suspense))
+ }
+ })
+ }
+ }
+ return list.filter(child => !isBeingDestroyed(child) && !child.type.devtools?.hide)
+ }
+
+ private captureId(instance): string {
+ if (!instance) {
+ return null
+ }
+
+ // instance.uid is not reliable in devtools as there
+ // may be 2 roots with same uid which causes unexpected
+ // behaviour
+ const id = instance.__VUE_DEVTOOLS_UID__ != null ? instance.__VUE_DEVTOOLS_UID__ : getUniqueComponentId(instance, this.ctx)
+ instance.__VUE_DEVTOOLS_UID__ = id
+
+ // Dedupe
+ if (this.captureIds.has(id)) {
+ return
+ }
+ else {
+ this.captureIds.set(id, undefined)
+ }
+
+ this.mark(instance)
+
+ return id
+ }
+
+ /**
+ * Capture the meta information of an instance. (recursive)
+ *
+ * @param {Vue} instance
+ * @return {object}
+ */
+ private async capture(instance: any, list: any[], depth: number): Promise {
+ if (!instance) {
+ return null
+ }
+
+ const id = this.captureId(instance)
+
+ const name = getInstanceName(instance)
+
+ const children = this.getInternalInstanceChildren(instance.subTree)
+ .filter(child => !isBeingDestroyed(child))
+
+ const parents = this.getComponentParents(instance) || []
+
+ const inactive = !!instance.isDeactivated || parents.some(parent => parent.isDeactivated)
+
+ const treeNode: ComponentTreeNode = {
+ uid: instance.uid,
+ id,
+ name,
+ renderKey: getRenderKey(instance.vnode ? instance.vnode.key : null),
+ inactive,
+ hasChildren: !!children.length,
+ children: [],
+ isFragment: isFragment(instance),
+ tags: typeof instance.type !== 'function'
+ ? []
+ : [
+ {
+ label: 'functional',
+ textColor: 0x555555,
+ backgroundColor: 0xEEEEEE,
+ },
+ ],
+ autoOpen: this.recursively,
+ }
+
+ // capture children
+ if (depth < this.maxDepth || instance.type.__isKeepAlive || parents.some(parent => parent.type.__isKeepAlive)) {
+ treeNode.children = await Promise.all(children
+ .map((child, index, list) => this.capture(child, list, depth + 1))
+ .filter(Boolean))
+ }
+
+ // keep-alive
+ if (this.isKeepAlive(instance)) {
+ const cachedComponents = this.getKeepAliveCachedInstances(instance)
+ const childrenIds = children.map(child => child.__VUE_DEVTOOLS_UID__)
+ for (const cachedChild of cachedComponents) {
+ if (!childrenIds.includes(cachedChild.__VUE_DEVTOOLS_UID__)) {
+ const node = await this.capture({ ...cachedChild, isDeactivated: true }, null, depth + 1)
+ if (node) {
+ treeNode.children.push(node)
+ }
+ }
+ }
+ }
+
+ // ensure correct ordering
+ const rootElements = getRootElementsFromComponentInstance(instance)
+ const firstElement = rootElements[0]
+ if (firstElement?.parentElement) {
+ const parentInstance = instance.parent
+ const parentRootElements = parentInstance ? getRootElementsFromComponentInstance(parentInstance) : []
+ let el = firstElement
+ const indexList = []
+ do {
+ indexList.push(Array.from(el.parentElement.childNodes).indexOf(el))
+ el = el.parentElement
+ } while (el.parentElement && parentRootElements.length && !parentRootElements.includes(el))
+ treeNode.domOrder = indexList.reverse()
+ }
+ else {
+ treeNode.domOrder = [-1]
+ }
+
+ if (instance.suspense?.suspenseKey) {
+ treeNode.tags.push({
+ label: instance.suspense.suspenseKey,
+ backgroundColor: 0xE492E4,
+ textColor: 0xFFFFFF,
+ })
+ // update instanceMap
+ this.mark(instance, true)
+ }
+
+ return this.api.visitComponentTree(instance, treeNode, this.componentFilter.filter, this.ctx.currentAppRecord.options.app)
+ }
+
+ /**
+ * Mark an instance as captured and store it in the instance map.
+ *
+ * @param {Vue} instance
+ */
+ private mark(instance, force = false) {
+ const instanceMap = this.ctx.currentAppRecord.instanceMap
+ if (force || !instanceMap.has(instance.__VUE_DEVTOOLS_UID__)) {
+ instanceMap.set(instance.__VUE_DEVTOOLS_UID__, instance)
+ }
+ }
+
+ private isKeepAlive(instance) {
+ return instance.type.__isKeepAlive && instance.__v_cache
+ }
+
+ private getKeepAliveCachedInstances(instance) {
+ return Array.from(instance.__v_cache.values()).map((vnode: any) => vnode.component).filter(Boolean)
+ }
+}
diff --git a/vue-devtools/packages/app-backend-vue3/src/components/util.ts b/vue-devtools/packages/app-backend-vue3/src/components/util.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4fb1b0d3c7111822592cb4ba4081de306a1706f1
--- /dev/null
+++ b/vue-devtools/packages/app-backend-vue3/src/components/util.ts
@@ -0,0 +1,104 @@
+import { basename, classify } from '@vue-devtools/shared-utils'
+import type { App, ComponentInstance } from '@vue/devtools-api'
+import type { BackendContext } from '@vue-devtools/app-backend-api'
+
+export function isBeingDestroyed(instance) {
+ return instance._isBeingDestroyed || instance.isUnmounted
+}
+
+export function getAppRecord(instance) {
+ if (instance.root) {
+ return instance.appContext.app.__VUE_DEVTOOLS_APP_RECORD__
+ }
+}
+
+export function isFragment(instance) {
+ const appRecord = getAppRecord(instance)
+ if (appRecord) {
+ return appRecord.options.types.Fragment === instance.subTree?.type
+ }
+}
+
+/**
+ * Get the appropriate display name for an instance.
+ *
+ * @param {Vue} instance
+ * @return {string}
+ */
+export function getInstanceName(instance) {
+ const name = getComponentTypeName(instance.type || {})
+ if (name) {
+ return name
+ }
+ if (instance.root === instance) {
+ return 'Root'
+ }
+ for (const key in instance.parent?.type?.components) {
+ if (instance.parent.type.components[key] === instance.type) {
+ return saveComponentName(instance, key)
+ }
+ }
+ for (const key in instance.appContext?.components) {
+ if (instance.appContext.components[key] === instance.type) {
+ return saveComponentName(instance, key)
+ }
+ }
+ const fileName = getComponentFileName(instance.type || {})
+ if (fileName) {
+ return fileName
+ }
+ return 'Anonymous Component'
+}
+
+function saveComponentName(instance, key) {
+ instance.type.__vdevtools_guessedName = key
+ return key
+}
+
+function getComponentTypeName(options) {
+ return options.name || options._componentTag || options.__vdevtools_guessedName || options.__name
+}
+
+function getComponentFileName(options) {
+ const file = options.__file // injected by vue-loader
+ if (file) {
+ return classify(basename(file, '.vue'))
+ }
+}
+
+/**
+ * Returns a devtools unique id for instance.
+ * @param {Vue} instance
+ */
+export function getUniqueComponentId(instance, _ctx: BackendContext) {
+ const appId = instance.appContext.app.__VUE_DEVTOOLS_APP_RECORD_ID__
+ const instanceId = instance === instance.root ? 'root' : instance.uid
+ return `${appId}:${instanceId}`
+}
+
+export function getRenderKey(value): string {
+ if (value == null) {
+ return
+ }
+ const type = typeof value
+ if (type === 'number') {
+ return value
+ }
+ else if (type === 'string') {
+ return `'${value}'`
+ }
+ else if (Array.isArray(value)) {
+ return 'Array'
+ }
+ else {
+ return 'Object'
+ }
+}
+
+export function getComponentInstances(app: App): ComponentInstance[] {
+ const appRecord = app.__VUE_DEVTOOLS_APP_RECORD__
+ const appId = appRecord.id.toString()
+ return [...appRecord.instanceMap]
+ .filter(([key]) => key.split(':')[0] === appId)
+ .map(([,instance]) => instance)
+}
diff --git a/vue-devtools/packages/app-backend-vue3/src/index.ts b/vue-devtools/packages/app-backend-vue3/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b86cf5e2202e6b89984ce99f5e6a8d7f6bbf5fef
--- /dev/null
+++ b/vue-devtools/packages/app-backend-vue3/src/index.ts
@@ -0,0 +1,98 @@
+import { defineBackend } from '@vue-devtools/app-backend-api'
+import { HookEvents, backendInjections } from '@vue-devtools/shared-utils'
+import { ComponentWalker } from './components/tree'
+import { editState, getCustomInstanceDetails, getCustomObjectDetails, getInstanceDetails } from './components/data'
+import { getComponentInstances, getInstanceName } from './components/util'
+import { getComponentInstanceFromElement, getInstanceOrVnodeRect, getRootElementsFromComponentInstance } from './components/el'
+
+export const backend = defineBackend({
+ frameworkVersion: 3,
+
+ features: [],
+
+ setup(api) {
+ api.on.getAppRecordName((payload) => {
+ if (payload.app._component) {
+ payload.name = payload.app._component.name
+ }
+ })
+
+ api.on.getAppRootInstance((payload) => {
+ if (payload.app._instance) {
+ payload.root = payload.app._instance
+ }
+ else if (payload.app._container?._vnode?.component) {
+ payload.root = payload.app._container?._vnode?.component
+ }
+ })
+
+ api.on.walkComponentTree(async (payload, ctx) => {
+ const walker = new ComponentWalker(payload.maxDepth, payload.filter, payload.recursively, api, ctx)
+ payload.componentTreeData = await walker.getComponentTree(payload.componentInstance)
+ })
+
+ api.on.walkComponentParents((payload, ctx) => {
+ const walker = new ComponentWalker(0, null, false, api, ctx)
+ payload.parentInstances = walker.getComponentParents(payload.componentInstance)
+ })
+
+ api.on.inspectComponent((payload, ctx) => {
+ // @TODO refactor
+ backendInjections.getCustomInstanceDetails = getCustomInstanceDetails
+ backendInjections.getCustomObjectDetails = getCustomObjectDetails
+ backendInjections.instanceMap = ctx.currentAppRecord.instanceMap
+ backendInjections.isVueInstance = val => val._ && Object.keys(val._).includes('vnode')
+ payload.instanceData = getInstanceDetails(payload.componentInstance, ctx)
+ })
+
+ api.on.getComponentName((payload) => {
+ payload.name = getInstanceName(payload.componentInstance)
+ })
+
+ api.on.getComponentBounds((payload) => {
+ payload.bounds = getInstanceOrVnodeRect(payload.componentInstance)
+ })
+
+ api.on.getElementComponent((payload) => {
+ payload.componentInstance = getComponentInstanceFromElement(payload.element)
+ })
+
+ api.on.getComponentInstances((payload) => {
+ payload.componentInstances = getComponentInstances(payload.app)
+ })
+
+ api.on.getComponentRootElements((payload) => {
+ payload.rootElements = getRootElementsFromComponentInstance(payload.componentInstance)
+ })
+
+ api.on.editComponentState((payload, ctx) => {
+ editState(payload, api.stateEditor, ctx)
+ })
+
+ api.on.getComponentDevtoolsOptions((payload) => {
+ payload.options = payload.componentInstance.type.devtools
+ })
+
+ api.on.getComponentRenderCode((payload) => {
+ payload.code = !(payload.componentInstance.type instanceof Function) ? payload.componentInstance.render.toString() : payload.componentInstance.type.toString()
+ })
+
+ api.on.transformCall((payload) => {
+ if (payload.callName === HookEvents.COMPONENT_UPDATED) {
+ const component = payload.inArgs[0]
+ payload.outArgs = [
+ component.appContext.app,
+ component.uid,
+ component.parent ? component.parent.uid : undefined,
+ component,
+ ]
+ }
+ })
+
+ api.stateEditor.isRef = value => !!value?.__v_isRef
+ api.stateEditor.getRefValue = ref => ref.value
+ api.stateEditor.setRefValue = (ref, value) => {
+ ref.value = value
+ }
+ },
+})
diff --git a/vue-devtools/packages/app-backend-vue3/src/util.ts b/vue-devtools/packages/app-backend-vue3/src/util.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ebf171be0351d5f2b37d1f5ee86eb405018cd881
--- /dev/null
+++ b/vue-devtools/packages/app-backend-vue3/src/util.ts
@@ -0,0 +1,21 @@
+export function flatten(items) {
+ return items.reduce((acc, item) => {
+ if (Array.isArray(item)) {
+ acc.push(...flatten(item))
+ }
+ else if (item) {
+ acc.push(item)
+ }
+
+ return acc
+ }, [])
+}
+
+export function returnError(cb: () => any) {
+ try {
+ return cb()
+ }
+ catch (e) {
+ return e
+ }
+}
diff --git a/vue-devtools/packages/app-backend-vue3/tsconfig.json b/vue-devtools/packages/app-backend-vue3/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..becb763b20bbbd4557ba0717c957b4e3d3d6c81b
--- /dev/null
+++ b/vue-devtools/packages/app-backend-vue3/tsconfig.json
@@ -0,0 +1,29 @@
+{
+ "compilerOptions": {
+ "target": "ES2019",
+ "module": "commonjs",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "types": [
+ "node",
+ "webpack-env"
+ ],
+ "strictBindCallApply": true,
+ "strictFunctionTypes": true,
+ "alwaysStrict": true,
+ // Strict
+ "noImplicitAny": false,
+ "noImplicitThis": true,
+ "sourceMap": true,
+ "allowSyntheticDefaultImports": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "preserveWatchOutput": true
+ },
+ "include": [
+ "src/**/*"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
+}
diff --git a/vue-devtools/packages/app-frontend/package.json b/vue-devtools/packages/app-frontend/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..971ab0682311a639348b2b6d68dd70162302fddf
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/package.json
@@ -0,0 +1,33 @@
+{
+ "name": "@vue-devtools/app-frontend",
+ "version": "0.0.0",
+ "private": true,
+ "dependencies": {
+ "@pixi/events": "^6.2.0",
+ "@pixi/unsafe-eval": "^6.2.0",
+ "@vue-devtools/shared-utils": "^0.0.0",
+ "@vue/devtools-api": "^6.0.0-beta.9",
+ "@vue/ui": "^0.12.5",
+ "@vueuse/core": "^10.7.2",
+ "circular-json-es6": "^2.0.2",
+ "d3": "^5.16.0",
+ "floating-vue": "^5.2.2",
+ "lodash": "^4.17.15",
+ "lru-cache": "^5.1.1",
+ "monaco-editor": "^0.24.0",
+ "pixi.js-legacy": "^6.2.0",
+ "scroll-into-view-if-needed": "^2.2.28",
+ "semver": "^7.3.5",
+ "stylus": "^0.54.7",
+ "stylus-loader": "^3.0.2",
+ "tinycolor2": "^1.4.2",
+ "vue": "^3.3.4",
+ "vue-resize": "^2.0.0-alpha.1",
+ "vue-router": "^4.2.5",
+ "vue-safe-teleport": "^0.1.2",
+ "vue-virtual-scroller": "^2.0.0-alpha.1"
+ },
+ "devDependencies": {
+ "@akryum/md-icons-svg": "^1.0.1"
+ }
+}
diff --git a/vue-devtools/packages/app-frontend/src/app.ts b/vue-devtools/packages/app-frontend/src/app.ts
new file mode 100644
index 0000000000000000000000000000000000000000..15da8110bceeae9b1d412b4abe51a57a5b164e38
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/app.ts
@@ -0,0 +1,84 @@
+import type { App as VueApp } from 'vue'
+import { createApp as createVueApp } from 'vue'
+import { BridgeEvents, SharedData, destroySharedData, initEnv, initSharedData, isChrome } from '@vue-devtools/shared-utils'
+import App from './features/App.vue'
+import { createRouterInstance } from './router'
+import { getBridge, setBridge } from './features/bridge'
+import { setAppConnected, setAppInitializing } from './features/connection'
+import { setupAppsBridgeEvents } from './features/apps'
+import { setupComponentsBridgeEvents } from './features/components/composable'
+import { setupTimelineBridgeEvents } from './features/timeline/composable'
+import { setupCustomInspectorBridgeEvents } from './features/inspector/custom/composable'
+import { setupPluginsBridgeEvents } from './features/plugin'
+import { setupPlugins } from './plugins'
+
+// Capture and log devtool errors when running as actual extension
+// so that we can debug it by inspecting the background page.
+// We do want the errors to be thrown in the dev shell though.
+export function createApp() {
+ const router = createRouterInstance()
+
+ const app = createVueApp(App)
+ app.use(router)
+ setupPlugins(app)
+
+ if (isChrome) {
+ app.config.errorHandler = (e, vm) => {
+ getBridge()?.send('ERROR', {
+ message: (e as Error).message,
+ stack: (e as Error).stack,
+ component: vm?.$options.name || (vm?.$options as any)._componentTag || 'anonymous',
+ })
+ }
+ }
+
+ return app
+}
+
+/**
+ * Connect then init the app. We need to reconnect on every reload, because a
+ * new backend will be injected.
+ */
+export function connectApp(app: VueApp, shell) {
+ shell.connect(async (bridge) => {
+ setBridge(bridge)
+ // @TODO remove
+ // @ts-expect-error custom prop on window
+ window.bridge = bridge
+
+ if (app.config.globalProperties.$shared) {
+ destroySharedData()
+ }
+ else {
+ Object.defineProperty(app.config.globalProperties, '$shared', {
+ get: () => SharedData,
+ })
+ }
+
+ initEnv(app)
+
+ bridge.on(BridgeEvents.TO_FRONT_TITLE, ({ title }: { title: string }) => {
+ document.title = `${title} - Vue devtools`
+ })
+
+ await initSharedData({
+ bridge,
+ persist: true,
+ })
+
+ if (SharedData.logDetected) {
+ bridge.send('log-detected-vue')
+ }
+
+ setupAppsBridgeEvents(bridge)
+ setupComponentsBridgeEvents(bridge)
+ setupTimelineBridgeEvents(bridge)
+ setupCustomInspectorBridgeEvents(bridge)
+ setupPluginsBridgeEvents(bridge)
+
+ // @TODO bridge listeners
+
+ setAppConnected(true)
+ setAppInitializing(false)
+ })
+}
diff --git a/vue-devtools/packages/app-frontend/src/assets/MaterialIcons-Regular.woff2 b/vue-devtools/packages/app-frontend/src/assets/MaterialIcons-Regular.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..9fa211252080046a23b2449dbdced6abc2b0bb34
Binary files /dev/null and b/vue-devtools/packages/app-frontend/src/assets/MaterialIcons-Regular.woff2 differ
diff --git a/vue-devtools/packages/app-frontend/src/assets/Roboto-Mono.ttf b/vue-devtools/packages/app-frontend/src/assets/Roboto-Mono.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..9c3668e00bd9077adad7d35c7ec220c61d7427ae
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/assets/Roboto-Mono.ttf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4f473afed897c2b96079c7be0727e0babc80bc396a79b1881f87a9a7ad38be6a
+size 182172
diff --git a/vue-devtools/packages/app-frontend/src/assets/Roboto-Regular.woff2 b/vue-devtools/packages/app-frontend/src/assets/Roboto-Regular.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..9a0064ec27e069931227a628e8ed899f3dda2c73
Binary files /dev/null and b/vue-devtools/packages/app-frontend/src/assets/Roboto-Regular.woff2 differ
diff --git a/vue-devtools/packages/app-frontend/src/assets/breadcrumb-separator.svg b/vue-devtools/packages/app-frontend/src/assets/breadcrumb-separator.svg
new file mode 100644
index 0000000000000000000000000000000000000000..645b97f1d9ab288ed479a21c1c5a44b68861fb60
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/assets/breadcrumb-separator.svg
@@ -0,0 +1,3 @@
+
diff --git a/vue-devtools/packages/app-frontend/src/assets/devtools-logo.svg b/vue-devtools/packages/app-frontend/src/assets/devtools-logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9e07f99f88e77edb2d445176a86c8add6007ea8c
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/assets/devtools-logo.svg
@@ -0,0 +1,37 @@
+
+
diff --git a/vue-devtools/packages/app-frontend/src/assets/github-theme/dark.json b/vue-devtools/packages/app-frontend/src/assets/github-theme/dark.json
new file mode 100644
index 0000000000000000000000000000000000000000..84bf8ad012c438d467bb9656c27fd2122ddded55
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/assets/github-theme/dark.json
@@ -0,0 +1,535 @@
+{
+ "inherit": true,
+ "base": "vs-dark",
+ "colors": {
+ "focusBorder": "#388bfd",
+ "foreground": "#c9d1d9",
+ "descriptionForeground": "#8b949e",
+ "errorForeground": "#f85149",
+ "textLink.foreground": "#58a6ff",
+ "textLink.activeForeground": "#58a6ff",
+ "textBlockQuote.background": "#090c10",
+ "textBlockQuote.border": "#3b434b",
+ "textCodeBlock.background": "#f0f6fc26",
+ "textPreformat.foreground": "#8b949e",
+ "textSeparator.foreground": "#21262d",
+ "button.background": "#238636",
+ "button.foreground": "#ffffff",
+ "button.hoverBackground": "#2ea043",
+ "button.secondaryBackground": "#292e34",
+ "button.secondaryForeground": "#c9d1d9",
+ "button.secondaryHoverBackground": "#30363d",
+ "checkbox.background": "#161b22",
+ "checkbox.border": "#30363d",
+ "dropdown.background": "#1c2128",
+ "dropdown.border": "#30363d",
+ "dropdown.foreground": "#c9d1d9",
+ "dropdown.listBackground": "#1c2128",
+ "input.background": "#0d1117",
+ "input.border": "#21262d",
+ "input.foreground": "#c9d1d9",
+ "input.placeholderForeground": "#484f58",
+ "badge.foreground": "#79c0ff",
+ "badge.background": "#0d419d",
+ "progressBar.background": "#1f6feb",
+ "titleBar.activeForeground": "#8b949e",
+ "titleBar.activeBackground": "#0d1117",
+ "titleBar.inactiveForeground": "#8b949e",
+ "titleBar.inactiveBackground": "#090c10",
+ "titleBar.border": "#30363d",
+ "activityBar.foreground": "#c9d1d9",
+ "activityBar.inactiveForeground": "#8b949e",
+ "activityBar.background": "#0d1117",
+ "activityBarBadge.foreground": "#f0f6fc",
+ "activityBarBadge.background": "#1f6feb",
+ "activityBar.activeBorder": "#f78166",
+ "activityBar.border": "#30363d",
+ "sideBar.foreground": "#c9d1d9",
+ "sideBar.background": "#090c10",
+ "sideBar.border": "#30363d",
+ "sideBarTitle.foreground": "#c9d1d9",
+ "sideBarSectionHeader.foreground": "#c9d1d9",
+ "sideBarSectionHeader.background": "#090c10",
+ "sideBarSectionHeader.border": "#30363d",
+ "list.hoverForeground": "#c9d1d9",
+ "list.inactiveSelectionForeground": "#c9d1d9",
+ "list.activeSelectionForeground": "#c9d1d9",
+ "list.hoverBackground": "#161b22",
+ "list.inactiveSelectionBackground": "#161b22",
+ "list.activeSelectionBackground": "#21262d",
+ "list.focusForeground": "#f0f6fc",
+ "list.focusBackground": "#21262d",
+ "list.inactiveFocusBackground": "#161b22",
+ "list.highlightForeground": "#388bfd",
+ "tree.indentGuidesStroke": "#21262d",
+ "notificationCenterHeader.foreground": "#6e7681",
+ "notificationCenterHeader.background": "#0d1117",
+ "notifications.foreground": "#8b949e",
+ "notifications.background": "#161b22",
+ "notifications.border": "#30363d",
+ "notificationsErrorIcon.foreground": "#f85149",
+ "notificationsWarningIcon.foreground": "#f0883e",
+ "notificationsInfoIcon.foreground": "#58a6ff",
+ "pickerGroup.border": "#21262d",
+ "pickerGroup.foreground": "#8b949e",
+ "quickInput.background": "#0d1117",
+ "quickInput.foreground": "#c9d1d9",
+ "statusBar.foreground": "#8b949e",
+ "statusBar.background": "#0d1117",
+ "statusBar.border": "#30363d",
+ "statusBar.noFolderBackground": "#0d1117",
+ "statusBar.debuggingBackground": "#da3633",
+ "statusBar.debuggingForeground": "#f0f6fc",
+ "statusBarItem.prominentBackground": "#161b22",
+ "editorGroupHeader.tabsBackground": "#090c10",
+ "editorGroupHeader.tabsBorder": "#30363d",
+ "editorGroup.border": "#30363d",
+ "tab.activeForeground": "#c9d1d9",
+ "tab.inactiveForeground": "#8b949e",
+ "tab.inactiveBackground": "#090c10",
+ "tab.activeBackground": "#0d1117",
+ "tab.hoverBackground": "#0d1117",
+ "tab.unfocusedHoverBackground": "#161b22",
+ "tab.border": "#30363d",
+ "tab.unfocusedActiveBorderTop": "#30363d",
+ "tab.activeBorder": "#0d1117",
+ "tab.unfocusedActiveBorder": "#0d1117",
+ "tab.activeBorderTop": "#f78166",
+ "breadcrumb.foreground": "#8b949e",
+ "breadcrumb.focusForeground": "#c9d1d9",
+ "breadcrumb.activeSelectionForeground": "#8b949e",
+ "breadcrumbPicker.background": "#1c2128",
+ "editor.foreground": "#c9d1d9",
+ "editor.background": "#0d1117",
+ "editorWidget.background": "#1c2128",
+ "editor.foldBackground": "#6e76811a",
+ "editor.lineHighlightBackground": "#161b22",
+ "editorLineNumber.foreground": "#8b949e",
+ "editorLineNumber.activeForeground": "#c9d1d9",
+ "editorIndentGuide.background": "#21262d",
+ "editorIndentGuide.activeBackground": "#30363d",
+ "editorWhitespace.foreground": "#484f58",
+ "editorCursor.foreground": "#79c0ff",
+ "editor.findMatchBackground": "#ffd33d44",
+ "editor.findMatchHighlightBackground": "#ffd33d22",
+ "editor.linkedEditingBackground": "#3392FF22",
+ "editor.inactiveSelectionBackground": "#3392FF22",
+ "editor.selectionBackground": "#3392FF44",
+ "editor.selectionHighlightBackground": "#17E5E633",
+ "editor.selectionHighlightBorder": "#17E5E600",
+ "editor.wordHighlightBackground": "#17E5E600",
+ "editor.wordHighlightStrongBackground": "#17E5E600",
+ "editor.wordHighlightBorder": "#17E5E699",
+ "editor.wordHighlightStrongBorder": "#17E5E666",
+ "editorBracketMatch.background": "#17E5E650",
+ "editorBracketMatch.border": "#17E5E600",
+ "editorGutter.modifiedBackground": "#9e6a03",
+ "editorGutter.addedBackground": "#196c2e",
+ "editorGutter.deletedBackground": "#b62324",
+ "diffEditor.insertedTextBackground": "#2ea04333",
+ "diffEditor.removedTextBackground": "#da363333",
+ "scrollbar.shadow": "#0008",
+ "scrollbarSlider.background": "#484F5833",
+ "scrollbarSlider.hoverBackground": "#484F5844",
+ "scrollbarSlider.activeBackground": "#484F5888",
+ "editorOverviewRuler.border": "#010409",
+ "panel.background": "#090c10",
+ "panel.border": "#30363d",
+ "panelTitle.activeBorder": "#f78166",
+ "panelTitle.activeForeground": "#c9d1d9",
+ "panelTitle.inactiveForeground": "#8b949e",
+ "panelInput.border": "#30363d",
+ "terminal.foreground": "#8b949e",
+ "terminal.ansiBlack": "#484f58",
+ "terminal.ansiRed": "#ff7b72",
+ "terminal.ansiGreen": "#3fb950",
+ "terminal.ansiYellow": "#d29922",
+ "terminal.ansiBlue": "#58a6ff",
+ "terminal.ansiMagenta": "#bc8cff",
+ "terminal.ansiCyan": "#39c5cf",
+ "terminal.ansiWhite": "#b1bac4",
+ "terminal.ansiBrightBlack": "#6e7681",
+ "terminal.ansiBrightRed": "#ffa198",
+ "terminal.ansiBrightGreen": "#56d364",
+ "terminal.ansiBrightYellow": "#e3b341",
+ "terminal.ansiBrightBlue": "#79c0ff",
+ "terminal.ansiBrightMagenta": "#d2a8ff",
+ "terminal.ansiBrightCyan": "#56d4dd",
+ "terminal.ansiBrightWhite": "#f0f6fc",
+ "gitDecoration.addedResourceForeground": "#56d364",
+ "gitDecoration.modifiedResourceForeground": "#e3b341",
+ "gitDecoration.deletedResourceForeground": "#f85149",
+ "gitDecoration.untrackedResourceForeground": "#56d364",
+ "gitDecoration.ignoredResourceForeground": "#484f58",
+ "gitDecoration.conflictingResourceForeground": "#e3b341",
+ "gitDecoration.submoduleResourceForeground": "#8b949e",
+ "debugToolBar.background": "#1c2128",
+ "editor.stackFrameHighlightBackground": "#D2992225",
+ "editor.focusedStackFrameHighlightBackground": "#3FB95025",
+ "peekViewEditor.matchHighlightBackground": "#ffd33d33",
+ "peekViewResult.matchHighlightBackground": "#ffd33d33",
+ "peekViewEditor.background": "#0d111788",
+ "peekViewResult.background": "#0d1117",
+ "settings.headerForeground": "#8b949e",
+ "settings.modifiedItemIndicator": "#9e6a03",
+ "welcomePage.buttonBackground": "#21262d",
+ "welcomePage.buttonHoverBackground": "#30363d"
+ },
+ "rules": [
+ {
+ "foreground": "#8b949e",
+ "token": "comment"
+ },
+ {
+ "foreground": "#8b949e",
+ "token": "punctuation.definition.comment"
+ },
+ {
+ "foreground": "#8b949e",
+ "token": "string.comment"
+ },
+ {
+ "foreground": "#79c0ff",
+ "token": "constant"
+ },
+ {
+ "foreground": "#79c0ff",
+ "token": "entity.name.constant"
+ },
+ {
+ "foreground": "#79c0ff",
+ "token": "variable.other.constant"
+ },
+ {
+ "foreground": "#79c0ff",
+ "token": "variable.language"
+ },
+ {
+ "foreground": "#79c0ff",
+ "token": "entity"
+ },
+ {
+ "foreground": "#ffa657",
+ "token": "entity.name"
+ },
+ {
+ "foreground": "#ffa657",
+ "token": "meta.export.default"
+ },
+ {
+ "foreground": "#ffa657",
+ "token": "meta.definition.variable"
+ },
+ {
+ "foreground": "#c9d1d9",
+ "token": "variable.parameter.function"
+ },
+ {
+ "foreground": "#c9d1d9",
+ "token": "meta.jsx.children"
+ },
+ {
+ "foreground": "#c9d1d9",
+ "token": "meta.block"
+ },
+ {
+ "foreground": "#c9d1d9",
+ "token": "meta.tag.attributes"
+ },
+ {
+ "foreground": "#c9d1d9",
+ "token": "entity.name.constant"
+ },
+ {
+ "foreground": "#c9d1d9",
+ "token": "meta.object.member"
+ },
+ {
+ "foreground": "#c9d1d9",
+ "token": "meta.embedded.expression"
+ },
+ {
+ "foreground": "#d2a8ff",
+ "token": "entity.name.function"
+ },
+ {
+ "foreground": "#7ee787",
+ "token": "entity.name.tag"
+ },
+ {
+ "foreground": "#7ee787",
+ "token": "support.class.component"
+ },
+ {
+ "foreground": "#ff7b72",
+ "token": "keyword"
+ },
+ {
+ "foreground": "#ff7b72",
+ "token": "storage"
+ },
+ {
+ "foreground": "#ff7b72",
+ "token": "storage.type"
+ },
+ {
+ "foreground": "#c9d1d9",
+ "token": "storage.modifier.package"
+ },
+ {
+ "foreground": "#c9d1d9",
+ "token": "storage.modifier.import"
+ },
+ {
+ "foreground": "#c9d1d9",
+ "token": "storage.type.java"
+ },
+ {
+ "foreground": "#a5d6ff",
+ "token": "string"
+ },
+ {
+ "foreground": "#a5d6ff",
+ "token": "punctuation.definition.string"
+ },
+ {
+ "foreground": "#a5d6ff",
+ "token": "string punctuation.section.embedded source"
+ },
+ {
+ "foreground": "#79c0ff",
+ "token": "support"
+ },
+ {
+ "foreground": "#79c0ff",
+ "token": "meta.property-name"
+ },
+ {
+ "foreground": "#ffa657",
+ "token": "variable"
+ },
+ {
+ "foreground": "#c9d1d9",
+ "token": "variable.other"
+ },
+ {
+ "fontStyle": "italic",
+ "foreground": "#ffa198",
+ "token": "invalid.broken"
+ },
+ {
+ "fontStyle": "italic",
+ "foreground": "#ffa198",
+ "token": "invalid.deprecated"
+ },
+ {
+ "fontStyle": "italic",
+ "foreground": "#ffa198",
+ "token": "invalid.illegal"
+ },
+ {
+ "fontStyle": "italic",
+ "foreground": "#ffa198",
+ "token": "invalid.unimplemented"
+ },
+ {
+ "fontStyle": "italic underline",
+ "background": "#ff7b72",
+ "foreground": "#0d1117",
+ "content": "^M",
+ "token": "carriage-return"
+ },
+ {
+ "foreground": "#ffa198",
+ "token": "message.error"
+ },
+ {
+ "foreground": "#c9d1d9",
+ "token": "string source"
+ },
+ {
+ "foreground": "#79c0ff",
+ "token": "string variable"
+ },
+ {
+ "foreground": "#a5d6ff",
+ "token": "source.regexp"
+ },
+ {
+ "foreground": "#a5d6ff",
+ "token": "string.regexp"
+ },
+ {
+ "foreground": "#a5d6ff",
+ "token": "string.regexp.character-class"
+ },
+ {
+ "foreground": "#a5d6ff",
+ "token": "string.regexp constant.character.escape"
+ },
+ {
+ "foreground": "#a5d6ff",
+ "token": "string.regexp source.ruby.embedded"
+ },
+ {
+ "foreground": "#a5d6ff",
+ "token": "string.regexp string.regexp.arbitrary-repitition"
+ },
+ {
+ "fontStyle": "bold",
+ "foreground": "#7ee787",
+ "token": "string.regexp constant.character.escape"
+ },
+ {
+ "foreground": "#79c0ff",
+ "token": "support.constant"
+ },
+ {
+ "foreground": "#79c0ff",
+ "token": "support.variable"
+ },
+ {
+ "foreground": "#79c0ff",
+ "token": "meta.module-reference"
+ },
+ {
+ "foreground": "#ffa657",
+ "token": "punctuation.definition.list.begin.markdown"
+ },
+ {
+ "fontStyle": "bold",
+ "foreground": "#79c0ff",
+ "token": "markup.heading"
+ },
+ {
+ "fontStyle": "bold",
+ "foreground": "#79c0ff",
+ "token": "markup.heading entity.name"
+ },
+ {
+ "foreground": "#7ee787",
+ "token": "markup.quote"
+ },
+ {
+ "fontStyle": "italic",
+ "foreground": "#c9d1d9",
+ "token": "markup.italic"
+ },
+ {
+ "fontStyle": "bold",
+ "foreground": "#c9d1d9",
+ "token": "markup.bold"
+ },
+ {
+ "foreground": "#79c0ff",
+ "token": "markup.raw"
+ },
+ {
+ "background": "#490202",
+ "foreground": "#ffa198",
+ "token": "markup.deleted"
+ },
+ {
+ "background": "#490202",
+ "foreground": "#ffa198",
+ "token": "meta.diff.header.from-file"
+ },
+ {
+ "background": "#490202",
+ "foreground": "#ffa198",
+ "token": "punctuation.definition.deleted"
+ },
+ {
+ "background": "#04260f",
+ "foreground": "#7ee787",
+ "token": "markup.inserted"
+ },
+ {
+ "background": "#04260f",
+ "foreground": "#7ee787",
+ "token": "meta.diff.header.to-file"
+ },
+ {
+ "background": "#04260f",
+ "foreground": "#7ee787",
+ "token": "punctuation.definition.inserted"
+ },
+ {
+ "background": "#5a1e02",
+ "foreground": "#ffa657",
+ "token": "markup.changed"
+ },
+ {
+ "background": "#5a1e02",
+ "foreground": "#ffa657",
+ "token": "punctuation.definition.changed"
+ },
+ {
+ "foreground": "#161b22",
+ "background": "#79c0ff",
+ "token": "markup.ignored"
+ },
+ {
+ "foreground": "#161b22",
+ "background": "#79c0ff",
+ "token": "markup.untracked"
+ },
+ {
+ "foreground": "#d2a8ff",
+ "fontStyle": "bold",
+ "token": "meta.diff.range"
+ },
+ {
+ "foreground": "#79c0ff",
+ "token": "meta.diff.header"
+ },
+ {
+ "fontStyle": "bold",
+ "foreground": "#79c0ff",
+ "token": "meta.separator"
+ },
+ {
+ "foreground": "#79c0ff",
+ "token": "meta.output"
+ },
+ {
+ "foreground": "#8b949e",
+ "token": "brackethighlighter.tag"
+ },
+ {
+ "foreground": "#8b949e",
+ "token": "brackethighlighter.curly"
+ },
+ {
+ "foreground": "#8b949e",
+ "token": "brackethighlighter.round"
+ },
+ {
+ "foreground": "#8b949e",
+ "token": "brackethighlighter.square"
+ },
+ {
+ "foreground": "#8b949e",
+ "token": "brackethighlighter.angle"
+ },
+ {
+ "foreground": "#8b949e",
+ "token": "brackethighlighter.quote"
+ },
+ {
+ "foreground": "#ffa198",
+ "token": "brackethighlighter.unmatched"
+ },
+ {
+ "foreground": "#a5d6ff",
+ "fontStyle": "underline",
+ "token": "constant.other.reference.link"
+ },
+ {
+ "foreground": "#a5d6ff",
+ "fontStyle": "underline",
+ "token": "string.other.link"
+ }
+ ],
+ "encodedTokensColors": []
+}
diff --git a/vue-devtools/packages/app-frontend/src/assets/github-theme/light.json b/vue-devtools/packages/app-frontend/src/assets/github-theme/light.json
new file mode 100644
index 0000000000000000000000000000000000000000..42da7a39b0ab52f43fe7545cf054cd6eac37a0dc
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/assets/github-theme/light.json
@@ -0,0 +1,531 @@
+{
+ "inherit": true,
+ "base": "vs",
+ "colors": {
+ "focusBorder": "#0366d6",
+ "foreground": "#24292e",
+ "descriptionForeground": "#6a737d",
+ "errorForeground": "#cb2431",
+ "textLink.foreground": "#0366d6",
+ "textLink.activeForeground": "#0366d6",
+ "textBlockQuote.background": "#f6f8fa",
+ "textBlockQuote.border": "#dfe2e5",
+ "textCodeBlock.background": "#1b1f230d",
+ "textPreformat.foreground": "#586069",
+ "textSeparator.foreground": "#eaecef",
+ "button.background": "#2ea44f",
+ "button.foreground": "#ffffff",
+ "button.hoverBackground": "#2c974b",
+ "button.secondaryBackground": "#eaecef",
+ "button.secondaryForeground": "#24292e",
+ "button.secondaryHoverBackground": "#f3f4f6",
+ "checkbox.background": "#f6f8fa",
+ "checkbox.border": "#e1e4e8",
+ "dropdown.background": "#ffffff",
+ "dropdown.border": "#e1e4e8",
+ "dropdown.foreground": "#24292e",
+ "dropdown.listBackground": "#ffffff",
+ "input.background": "#ffffff",
+ "input.border": "#e1e4e8",
+ "input.foreground": "#24292e",
+ "input.placeholderForeground": "#6a737d",
+ "badge.foreground": "#005cc5",
+ "badge.background": "#dbedff",
+ "progressBar.background": "#2188ff",
+ "titleBar.activeForeground": "#586069",
+ "titleBar.activeBackground": "#ffffff",
+ "titleBar.inactiveForeground": "#6a737d",
+ "titleBar.inactiveBackground": "#f6f8fa",
+ "titleBar.border": "#e1e4e8",
+ "activityBar.foreground": "#24292e",
+ "activityBar.inactiveForeground": "#6a737d",
+ "activityBar.background": "#ffffff",
+ "activityBarBadge.foreground": "#ffffff",
+ "activityBarBadge.background": "#2188ff",
+ "activityBar.activeBorder": "#f9826c",
+ "activityBar.border": "#e1e4e8",
+ "sideBar.foreground": "#24292e",
+ "sideBar.background": "#f6f8fa",
+ "sideBar.border": "#e1e4e8",
+ "sideBarTitle.foreground": "#24292e",
+ "sideBarSectionHeader.foreground": "#24292e",
+ "sideBarSectionHeader.background": "#f6f8fa",
+ "sideBarSectionHeader.border": "#e1e4e8",
+ "list.hoverForeground": "#24292e",
+ "list.inactiveSelectionForeground": "#24292e",
+ "list.activeSelectionForeground": "#24292e",
+ "list.hoverBackground": "#ebf0f4",
+ "list.inactiveSelectionBackground": "#e8eaed",
+ "list.activeSelectionBackground": "#e2e5e9",
+ "list.focusForeground": "#05264c",
+ "list.focusBackground": "#cce5ff",
+ "list.inactiveFocusBackground": "#dbedff",
+ "list.highlightForeground": "#0366d6",
+ "tree.indentGuidesStroke": "#eaecef",
+ "notificationCenterHeader.foreground": "#6a737d",
+ "notificationCenterHeader.background": "#e1e4e8",
+ "notifications.foreground": "#586069",
+ "notifications.background": "#fafbfc",
+ "notifications.border": "#e1e4e8",
+ "notificationsErrorIcon.foreground": "#d73a49",
+ "notificationsWarningIcon.foreground": "#e36209",
+ "notificationsInfoIcon.foreground": "#005cc5",
+ "pickerGroup.border": "#e1e4e8",
+ "pickerGroup.foreground": "#586069",
+ "quickInput.background": "#fafbfc",
+ "quickInput.foreground": "#24292e",
+ "statusBar.foreground": "#586069",
+ "statusBar.background": "#ffffff",
+ "statusBar.border": "#e1e4e8",
+ "statusBar.noFolderBackground": "#ffffff",
+ "statusBar.debuggingBackground": "#d73a49",
+ "statusBar.debuggingForeground": "#ffffff",
+ "statusBarItem.prominentBackground": "#f6f8fa",
+ "editorGroupHeader.tabsBackground": "#f6f8fa",
+ "editorGroupHeader.tabsBorder": "#e1e4e8",
+ "editorGroup.border": "#e1e4e8",
+ "tab.activeForeground": "#24292e",
+ "tab.inactiveForeground": "#6a737d",
+ "tab.inactiveBackground": "#f6f8fa",
+ "tab.activeBackground": "#ffffff",
+ "tab.hoverBackground": "#ffffff",
+ "tab.unfocusedHoverBackground": "#f6f8fa",
+ "tab.border": "#e1e4e8",
+ "tab.unfocusedActiveBorderTop": "#e1e4e8",
+ "tab.activeBorder": "#ffffff",
+ "tab.unfocusedActiveBorder": "#ffffff",
+ "tab.activeBorderTop": "#f9826c",
+ "breadcrumb.foreground": "#6a737d",
+ "breadcrumb.focusForeground": "#24292e",
+ "breadcrumb.activeSelectionForeground": "#586069",
+ "breadcrumbPicker.background": "#ffffff",
+ "editor.foreground": "#24292e",
+ "editor.background": "#ffffff",
+ "editorWidget.background": "#ffffff",
+ "editor.foldBackground": "#959da51a",
+ "editor.lineHighlightBackground": "#fafbfc",
+ "editorLineNumber.foreground": "#959da5",
+ "editorLineNumber.activeForeground": "#24292e",
+ "editorIndentGuide.background": "#eaecef",
+ "editorIndentGuide.activeBackground": "#e1e4e8",
+ "editorWhitespace.foreground": "#d1d5da",
+ "editorCursor.foreground": "#044289",
+ "editor.findMatchBackground": "#ffdf5d",
+ "editor.findMatchHighlightBackground": "#ffdf5d66",
+ "editor.linkedEditingBackground": "#0366d611",
+ "editor.inactiveSelectionBackground": "#0366d611",
+ "editor.selectionBackground": "#0366d625",
+ "editor.selectionHighlightBackground": "#34d05840",
+ "editor.selectionHighlightBorder": "#34d05800",
+ "editor.wordHighlightBackground": "#34d05800",
+ "editor.wordHighlightStrongBackground": "#34d05800",
+ "editor.wordHighlightBorder": "#24943e99",
+ "editor.wordHighlightStrongBorder": "#24943e50",
+ "editorBracketMatch.background": "#34d05840",
+ "editorBracketMatch.border": "#34d05800",
+ "editorGutter.modifiedBackground": "#f9c513",
+ "editorGutter.addedBackground": "#34d058",
+ "editorGutter.deletedBackground": "#d73a49",
+ "diffEditor.insertedTextBackground": "#85e89d33",
+ "diffEditor.removedTextBackground": "#f9758326",
+ "scrollbar.shadow": "#6a737d33",
+ "scrollbarSlider.background": "#959da533",
+ "scrollbarSlider.hoverBackground": "#959da544",
+ "scrollbarSlider.activeBackground": "#959da588",
+ "editorOverviewRuler.border": "#ffffff",
+ "panel.background": "#f6f8fa",
+ "panel.border": "#e1e4e8",
+ "panelTitle.activeBorder": "#f9826c",
+ "panelTitle.activeForeground": "#24292e",
+ "panelTitle.inactiveForeground": "#6a737d",
+ "panelInput.border": "#e1e4e8",
+ "terminal.foreground": "#586069",
+ "terminal.ansiBlack": "#24292e",
+ "terminal.ansiRed": "#d73a49",
+ "terminal.ansiGreen": "#22863a",
+ "terminal.ansiYellow": "#b08800",
+ "terminal.ansiBlue": "#0366d6",
+ "terminal.ansiMagenta": "#6f42c1",
+ "terminal.ansiCyan": "#1b7c83",
+ "terminal.ansiWhite": "#6a737d",
+ "terminal.ansiBrightBlack": "#586069",
+ "terminal.ansiBrightRed": "#cb2431",
+ "terminal.ansiBrightGreen": "#28a745",
+ "terminal.ansiBrightYellow": "#dbab09",
+ "terminal.ansiBrightBlue": "#2188ff",
+ "terminal.ansiBrightMagenta": "#8a63d2",
+ "terminal.ansiBrightCyan": "#3192aa",
+ "terminal.ansiBrightWhite": "#959da5",
+ "gitDecoration.addedResourceForeground": "#22863a",
+ "gitDecoration.modifiedResourceForeground": "#b08800",
+ "gitDecoration.deletedResourceForeground": "#cb2431",
+ "gitDecoration.untrackedResourceForeground": "#22863a",
+ "gitDecoration.ignoredResourceForeground": "#959da5",
+ "gitDecoration.conflictingResourceForeground": "#b08800",
+ "gitDecoration.submoduleResourceForeground": "#586069",
+ "debugToolBar.background": "#ffffff",
+ "editor.stackFrameHighlightBackground": "#ffd33d33",
+ "editor.focusedStackFrameHighlightBackground": "#28a74525",
+ "settings.headerForeground": "#586069",
+ "settings.modifiedItemIndicator": "#f9c513",
+ "welcomePage.buttonBackground": "#fafbfc",
+ "welcomePage.buttonHoverBackground": "#f3f4f6"
+ },
+ "rules": [
+ {
+ "foreground": "#6a737d",
+ "token": "comment"
+ },
+ {
+ "foreground": "#6a737d",
+ "token": "punctuation.definition.comment"
+ },
+ {
+ "foreground": "#6a737d",
+ "token": "string.comment"
+ },
+ {
+ "foreground": "#005cc5",
+ "token": "constant"
+ },
+ {
+ "foreground": "#005cc5",
+ "token": "entity.name.constant"
+ },
+ {
+ "foreground": "#005cc5",
+ "token": "variable.other.constant"
+ },
+ {
+ "foreground": "#005cc5",
+ "token": "variable.language"
+ },
+ {
+ "foreground": "#005cc5",
+ "token": "entity"
+ },
+ {
+ "foreground": "#e36209",
+ "token": "entity.name"
+ },
+ {
+ "foreground": "#e36209",
+ "token": "meta.export.default"
+ },
+ {
+ "foreground": "#e36209",
+ "token": "meta.definition.variable"
+ },
+ {
+ "foreground": "#24292e",
+ "token": "variable.parameter.function"
+ },
+ {
+ "foreground": "#24292e",
+ "token": "meta.jsx.children"
+ },
+ {
+ "foreground": "#24292e",
+ "token": "meta.block"
+ },
+ {
+ "foreground": "#24292e",
+ "token": "meta.tag.attributes"
+ },
+ {
+ "foreground": "#24292e",
+ "token": "entity.name.constant"
+ },
+ {
+ "foreground": "#24292e",
+ "token": "meta.object.member"
+ },
+ {
+ "foreground": "#24292e",
+ "token": "meta.embedded.expression"
+ },
+ {
+ "foreground": "#6f42c1",
+ "token": "entity.name.function"
+ },
+ {
+ "foreground": "#22863a",
+ "token": "entity.name.tag"
+ },
+ {
+ "foreground": "#22863a",
+ "token": "support.class.component"
+ },
+ {
+ "foreground": "#d73a49",
+ "token": "keyword"
+ },
+ {
+ "foreground": "#d73a49",
+ "token": "storage"
+ },
+ {
+ "foreground": "#d73a49",
+ "token": "storage.type"
+ },
+ {
+ "foreground": "#24292e",
+ "token": "storage.modifier.package"
+ },
+ {
+ "foreground": "#24292e",
+ "token": "storage.modifier.import"
+ },
+ {
+ "foreground": "#24292e",
+ "token": "storage.type.java"
+ },
+ {
+ "foreground": "#032f62",
+ "token": "string"
+ },
+ {
+ "foreground": "#032f62",
+ "token": "punctuation.definition.string"
+ },
+ {
+ "foreground": "#032f62",
+ "token": "string punctuation.section.embedded source"
+ },
+ {
+ "foreground": "#005cc5",
+ "token": "support"
+ },
+ {
+ "foreground": "#005cc5",
+ "token": "meta.property-name"
+ },
+ {
+ "foreground": "#e36209",
+ "token": "variable"
+ },
+ {
+ "foreground": "#24292e",
+ "token": "variable.other"
+ },
+ {
+ "fontStyle": "italic",
+ "foreground": "#b31d28",
+ "token": "invalid.broken"
+ },
+ {
+ "fontStyle": "italic",
+ "foreground": "#b31d28",
+ "token": "invalid.deprecated"
+ },
+ {
+ "fontStyle": "italic",
+ "foreground": "#b31d28",
+ "token": "invalid.illegal"
+ },
+ {
+ "fontStyle": "italic",
+ "foreground": "#b31d28",
+ "token": "invalid.unimplemented"
+ },
+ {
+ "fontStyle": "italic underline",
+ "background": "#d73a49",
+ "foreground": "#fafbfc",
+ "content": "^M",
+ "token": "carriage-return"
+ },
+ {
+ "foreground": "#b31d28",
+ "token": "message.error"
+ },
+ {
+ "foreground": "#24292e",
+ "token": "string source"
+ },
+ {
+ "foreground": "#005cc5",
+ "token": "string variable"
+ },
+ {
+ "foreground": "#032f62",
+ "token": "source.regexp"
+ },
+ {
+ "foreground": "#032f62",
+ "token": "string.regexp"
+ },
+ {
+ "foreground": "#032f62",
+ "token": "string.regexp.character-class"
+ },
+ {
+ "foreground": "#032f62",
+ "token": "string.regexp constant.character.escape"
+ },
+ {
+ "foreground": "#032f62",
+ "token": "string.regexp source.ruby.embedded"
+ },
+ {
+ "foreground": "#032f62",
+ "token": "string.regexp string.regexp.arbitrary-repitition"
+ },
+ {
+ "fontStyle": "bold",
+ "foreground": "#22863a",
+ "token": "string.regexp constant.character.escape"
+ },
+ {
+ "foreground": "#005cc5",
+ "token": "support.constant"
+ },
+ {
+ "foreground": "#005cc5",
+ "token": "support.variable"
+ },
+ {
+ "foreground": "#005cc5",
+ "token": "meta.module-reference"
+ },
+ {
+ "foreground": "#e36209",
+ "token": "punctuation.definition.list.begin.markdown"
+ },
+ {
+ "fontStyle": "bold",
+ "foreground": "#005cc5",
+ "token": "markup.heading"
+ },
+ {
+ "fontStyle": "bold",
+ "foreground": "#005cc5",
+ "token": "markup.heading entity.name"
+ },
+ {
+ "foreground": "#22863a",
+ "token": "markup.quote"
+ },
+ {
+ "fontStyle": "italic",
+ "foreground": "#24292e",
+ "token": "markup.italic"
+ },
+ {
+ "fontStyle": "bold",
+ "foreground": "#24292e",
+ "token": "markup.bold"
+ },
+ {
+ "foreground": "#005cc5",
+ "token": "markup.raw"
+ },
+ {
+ "background": "#ffeef0",
+ "foreground": "#b31d28",
+ "token": "markup.deleted"
+ },
+ {
+ "background": "#ffeef0",
+ "foreground": "#b31d28",
+ "token": "meta.diff.header.from-file"
+ },
+ {
+ "background": "#ffeef0",
+ "foreground": "#b31d28",
+ "token": "punctuation.definition.deleted"
+ },
+ {
+ "background": "#f0fff4",
+ "foreground": "#22863a",
+ "token": "markup.inserted"
+ },
+ {
+ "background": "#f0fff4",
+ "foreground": "#22863a",
+ "token": "meta.diff.header.to-file"
+ },
+ {
+ "background": "#f0fff4",
+ "foreground": "#22863a",
+ "token": "punctuation.definition.inserted"
+ },
+ {
+ "background": "#ffebda",
+ "foreground": "#e36209",
+ "token": "markup.changed"
+ },
+ {
+ "background": "#ffebda",
+ "foreground": "#e36209",
+ "token": "punctuation.definition.changed"
+ },
+ {
+ "foreground": "#f6f8fa",
+ "background": "#005cc5",
+ "token": "markup.ignored"
+ },
+ {
+ "foreground": "#f6f8fa",
+ "background": "#005cc5",
+ "token": "markup.untracked"
+ },
+ {
+ "foreground": "#6f42c1",
+ "fontStyle": "bold",
+ "token": "meta.diff.range"
+ },
+ {
+ "foreground": "#005cc5",
+ "token": "meta.diff.header"
+ },
+ {
+ "fontStyle": "bold",
+ "foreground": "#005cc5",
+ "token": "meta.separator"
+ },
+ {
+ "foreground": "#005cc5",
+ "token": "meta.output"
+ },
+ {
+ "foreground": "#586069",
+ "token": "brackethighlighter.tag"
+ },
+ {
+ "foreground": "#586069",
+ "token": "brackethighlighter.curly"
+ },
+ {
+ "foreground": "#586069",
+ "token": "brackethighlighter.round"
+ },
+ {
+ "foreground": "#586069",
+ "token": "brackethighlighter.square"
+ },
+ {
+ "foreground": "#586069",
+ "token": "brackethighlighter.angle"
+ },
+ {
+ "foreground": "#586069",
+ "token": "brackethighlighter.quote"
+ },
+ {
+ "foreground": "#b31d28",
+ "token": "brackethighlighter.unmatched"
+ },
+ {
+ "foreground": "#032f62",
+ "fontStyle": "underline",
+ "token": "constant.other.reference.link"
+ },
+ {
+ "foreground": "#032f62",
+ "fontStyle": "underline",
+ "token": "string.other.link"
+ }
+ ],
+ "encodedTokensColors": []
+}
diff --git a/vue-devtools/packages/app-frontend/src/assets/style/imports.styl b/vue-devtools/packages/app-frontend/src/assets/style/imports.styl
new file mode 100644
index 0000000000000000000000000000000000000000..095a1c8bd9fe0a16c0b70fd2866b908f07e1beb8
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/assets/style/imports.styl
@@ -0,0 +1,2 @@
+@import '~@vue/ui/src/style/imports'
+@import 'variables'
diff --git a/vue-devtools/packages/app-frontend/src/assets/style/index.postcss b/vue-devtools/packages/app-frontend/src/assets/style/index.postcss
new file mode 100644
index 0000000000000000000000000000000000000000..3d71cf5bb3de3550e4e9b87923271dcc1a62668d
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/assets/style/index.postcss
@@ -0,0 +1,126 @@
+html, body, #app {
+ @apply dark:!bg-gray-800;
+}
+
+.vue-ui-high-contrast {
+ #app {
+ @apply !bg-black;
+ }
+}
+
+/* Poppers */
+
+.v-popper__popper.v-popper--theme-tooltip code {
+ @apply bg-gray-500/50 rounded px-1 text-[11px] font-mono;
+}
+
+.v-popper--theme-dropdown {
+ .vue-ui-dark-mode & {
+ .v-popper__inner,
+ .v-popper__arrow-outer {
+ @apply border-gray-900;
+ }
+
+ .v-popper__inner {
+ @apply bg-gray-800;
+ }
+
+ .v-popper__arrow-inner {
+ @apply border-gray-800;
+ }
+ }
+}
+
+/* Scrollbars */
+
+::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+}
+
+::-webkit-scrollbar-track-piece {
+ @apply bg-transparent;
+}
+
+::-webkit-scrollbar-track:hover {
+ @apply bg-gray-600/5 dark:bg-gray-600/10;
+}
+
+::-webkit-scrollbar-thumb {
+ @apply bg-gray-300 hover:bg-gray-600 border-[3px] border-transparent bg-clip-padding rounded dark:bg-gray-700 dark:hover:bg-gray-500;
+}
+
+.vue-ui-dark-mode {
+ scrollbar-color: theme('colors.gray.800') theme('colors.black');
+
+ .selectable-item {
+ @apply bg-gray-800 hover:bg-gray-900;
+
+ &.selected {
+ @apply hover:bg-green-600;
+ }
+ }
+}
+
+/* Buttons */
+
+.vue-ui-button:not(.flat):not(.vue-ui-dropdown-button):not(.primary):not(.secondary):not(.danger) {
+ @apply dark:bg-gray-700 dark:hover:!bg-gray-600;
+}
+
+.vue-ui-button.flat,
+.vue-ui-dropdown-button {
+ @apply hover:!bg-green-500/30;
+}
+
+.vue-ui-dark-mode {
+ .vue-ui-group {
+ .vue-ui-button:not(.flat) {
+ @apply !bg-gray-700 hover:!bg-gray-600;
+
+ &.selected {
+ @apply !bg-green-700;
+ }
+ }
+ }
+}
+
+/* Switch */
+
+.vue-ui-dark-mode {
+ .vue-ui-switch {
+ > .content > .wrapper {
+ @apply bg-gray-700;
+ }
+ &.selected {
+ > .content > .wrapper {
+ @apply bg-green-600;
+ }
+ }
+ }
+}
+
+/* Tab */
+
+.vue-ui-dark-mode {
+ .vue-ui-group {
+ .indicator .content {
+ @apply !border-b-green-500;
+ }
+ .vue-ui-button.selected {
+ @apply text-green-500;
+ }
+ }
+}
+
+/* Arrows */
+
+.arrow {
+ @apply inline-block w-0 h-0 transition-transform duration-150 ease-out text-gray-500;
+
+ &.right {
+ border-top: 4px solid transparent;
+ border-bottom: 4px solid transparent;
+ border-left: 6px solid currentColor;
+ }
+}
diff --git a/vue-devtools/packages/app-frontend/src/assets/style/index.styl b/vue-devtools/packages/app-frontend/src/assets/style/index.styl
new file mode 100644
index 0000000000000000000000000000000000000000..98183d731a78734a8ba2c54794d1f44740fc5a2e
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/assets/style/index.styl
@@ -0,0 +1,114 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import '~@vue/ui/dist/vue-ui.css'
+
+@import 'imports'
+@import 'transitions'
+
+@font-face
+ font-family 'Roboto'
+ font-style normal
+ font-weight 400
+ src local('Roboto'), local('Roboto-Regular'), url(../Roboto-Regular.woff2) format('woff2')
+
+@font-face
+ font-family 'Roboto Mono'
+ font-style normal
+ font-weight 400
+ src local('Roboto Mono'), local('Roboto-Mono'), url(../Roboto-Mono.ttf) format('truetype')
+
+html, body
+ margin 0
+ padding 0
+ font-family Roboto
+ font-size 16px
+ color #444
+ height 100%
+
+body
+ overflow hidden
+
+#app
+ width: 100%
+ height: 100%
+
+button:focus
+ outline none
+
+.selectable-item
+ background-color $background-color
+ &:hover
+ background-color $hover-color
+ &.selected,
+ &.active
+ background-color $active-color
+ color #fff
+ .item-name,
+ .arrow
+ color #fff
+
+ .vue-ui-dark-mode &
+ background-color $dark-background-color
+ &:hover
+ background-color $dark-hover-color
+ .arrow
+ color theme('colors.gray.600')
+ &.selected,
+ &.active
+ color #fff
+ background-color $active-color
+
+.vue-ui-icon svg
+ fill currentColor
+
+// Tooltips
+
+.keyboard
+ display inline-block
+ min-width 22px
+ text-align center
+ background rgba($grey, .3)
+ padding 2px 4px 0
+ border-radius 3px
+ margin-bottom 6px
+ box-shadow 0 3px 0 rgba($grey, .2)
+ .vue-ui-dark-mode &
+ background rgba($grey, .9)
+ box-shadow 0 3px 0 rgba($grey, .6)
+
+.mono
+ font-family Menlo, Consolas, monospace
+
+.v-popper__popper.v-popper--theme-tooltip
+ pointer-events none
+ font-size 12px
+
+ .vue-ui-icon
+ width 16px
+ height @width
+ vertical-align middle
+
+.vue-ui-dark-mode .v-popper__popper.v-popper--theme-tooltip .vue-ui-icon svg
+ fill #666
+
+.v-popper__popper.v-popper--theme-dropdown .v-popper__inner
+ max-height calc(100vh - 32px - 8px - 4px)
+ overflow-y auto
+
+.scroll-smooth
+ scroll-behavior smooth
+
+.grayscale
+ filter grayscale(1)
+
+.right-icon-reveal:not(:hover)
+ .vue-ui-icon.right
+ opacity 0
+
+.v-popper--theme-tooltip
+ .vue-ui-dark-mode &
+ .v-popper__arrow-inner,
+ .v-popper__arrow-outer
+ border-color $vue-ui-white
diff --git a/vue-devtools/packages/app-frontend/src/assets/style/transitions.styl b/vue-devtools/packages/app-frontend/src/assets/style/transitions.styl
new file mode 100644
index 0000000000000000000000000000000000000000..f835550e6f6713c6c7a626d5e9c8b0e66ec5b3ff
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/assets/style/transitions.styl
@@ -0,0 +1,25 @@
+.slide-up-enter
+ opacity 0
+ transform translate(0, 50%)
+
+.slide-up-leave-to
+ opacity 0
+ transform translate(0, -50%)
+
+.slide-down-enter, .slide-down-leave-to
+ opacity 0
+ transform translate(0, -20px)
+
+@keyframes rotate
+ 0%
+ transform rotate(0deg)
+ 100%
+ transform rotate(360deg)
+
+@keyframes pulse
+ 0%
+ opacity 1
+ 50%
+ opacity .2
+ 100%
+ opacity 1
diff --git a/vue-devtools/packages/app-frontend/src/assets/style/variables.styl b/vue-devtools/packages/app-frontend/src/assets/style/variables.styl
new file mode 100644
index 0000000000000000000000000000000000000000..51eab2e8e288fca44c5f2c754f3122546ec2dcd8
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/assets/style/variables.styl
@@ -0,0 +1,80 @@
+// Colors
+$blue = #44A1FF
+$grey = #DDDDDD
+$darkGrey = #CCC
+$darkerGrey = #AAA
+$blueishGrey = #486887
+$green = #42B983
+$darkerGreen = #3BA776
+$slate = #242424
+$white = #FFFFFF
+$orange = #FF6B00
+$red = #c41a16
+$black = #222
+$vividBlue = #0033cc
+$purple = #997fff
+$pink = #881391
+$lightPink = #e36eec
+
+// The min-width to give icons text...
+$wide = 1100px
+
+// The min-height to give the tools a little more breathing room...
+$tall = 350px
+
+// Theme
+$active-color = $darkerGreen
+$border-color = $md-grey-200
+$background-color = $white
+$component-color = $active-color
+$hover-color = #c2e9d7
+
+$dark-active-color = $active-color
+$dark-border-color = darken($vue-ui-gray-900, 30%)
+$dark-background-color = $vue-ui-black
+$dark-component-color = $active-color
+$dark-hover-color = $vue-ui-color-dark
+
+// Entries
+// TODO: FIX THIS
+// .no-entries
+// color: #ccc
+// text-align: center
+// margin-top: 50px
+// line-height: 30px
+//
+// .entry
+// position: relative;
+// font-family Menlo, Consolas, monospace
+// color #881391
+// cursor pointer
+// padding 10px 20px
+// font-size 12px
+// background-color $background-color
+// box-shadow 0 1px 5px rgba(0,0,0,.12)
+// .entry-name
+// font-weight 600
+// .entry-source
+// color #999
+// .component-name
+// color $component-color
+// .entry-type
+// color #999
+// margin-left 8px
+// &.active
+// color #fff
+// background-color $active-color
+// .time, .entry-type, .component-name
+// color lighten($active-color, 75%)
+// .entry-name
+// color: #fff
+// .entry-source
+// color #ddd
+// .app.dark &
+// background-color $dark-background-color
+//
+// .time
+// font-size 11px
+// color #999
+// float right
+// margin-top 3px
diff --git a/vue-devtools/packages/app-frontend/src/assets/undraw_Gift_box.svg b/vue-devtools/packages/app-frontend/src/assets/undraw_Gift_box.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e65cf5ca6e9ee38df455100b43e1a95114c04bbb
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/assets/undraw_Gift_box.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/vue-devtools/packages/app-frontend/src/assets/vue-logo-beta.svg b/vue-devtools/packages/app-frontend/src/assets/vue-logo-beta.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c1dc6494782575925f437f36e2a79656848ed468
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/assets/vue-logo-beta.svg
@@ -0,0 +1,88 @@
+
+
+
+
\ No newline at end of file
diff --git a/vue-devtools/packages/app-frontend/src/assets/vue-logo.svg b/vue-devtools/packages/app-frontend/src/assets/vue-logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..932a122a38f90527d5919504f3a24444cda8f91b
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/assets/vue-logo.svg
@@ -0,0 +1,61 @@
+
+
+
+
\ No newline at end of file
diff --git a/vue-devtools/packages/app-frontend/src/assets/welcome/app-selector.png b/vue-devtools/packages/app-frontend/src/assets/welcome/app-selector.png
new file mode 100644
index 0000000000000000000000000000000000000000..530b597e18e715a24f660e011bdad95ed9198f50
Binary files /dev/null and b/vue-devtools/packages/app-frontend/src/assets/welcome/app-selector.png differ
diff --git a/vue-devtools/packages/app-frontend/src/assets/welcome/components-menu.png b/vue-devtools/packages/app-frontend/src/assets/welcome/components-menu.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ee40a1eeb88b6acb8e1f560596d010c2010e2b6
Binary files /dev/null and b/vue-devtools/packages/app-frontend/src/assets/welcome/components-menu.png differ
diff --git a/vue-devtools/packages/app-frontend/src/assets/welcome/components-pinia.png b/vue-devtools/packages/app-frontend/src/assets/welcome/components-pinia.png
new file mode 100644
index 0000000000000000000000000000000000000000..98bf1b24ae4f0c0636ba450f14330fc0ab3f545e
Binary files /dev/null and b/vue-devtools/packages/app-frontend/src/assets/welcome/components-pinia.png differ
diff --git a/vue-devtools/packages/app-frontend/src/assets/welcome/components.png b/vue-devtools/packages/app-frontend/src/assets/welcome/components.png
new file mode 100644
index 0000000000000000000000000000000000000000..9544e6a13f6f4193f352bbcaef6b7275c46985cd
Binary files /dev/null and b/vue-devtools/packages/app-frontend/src/assets/welcome/components.png differ
diff --git a/vue-devtools/packages/app-frontend/src/assets/welcome/inspector-pinia.png b/vue-devtools/packages/app-frontend/src/assets/welcome/inspector-pinia.png
new file mode 100644
index 0000000000000000000000000000000000000000..b99ec083e578dfda2d8503a40db9c9467d3db21e
Binary files /dev/null and b/vue-devtools/packages/app-frontend/src/assets/welcome/inspector-pinia.png differ
diff --git a/vue-devtools/packages/app-frontend/src/assets/welcome/inspector-pinia2.png b/vue-devtools/packages/app-frontend/src/assets/welcome/inspector-pinia2.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e15cae4bbd95c0235588536cadc6e8a6fdfc367
Binary files /dev/null and b/vue-devtools/packages/app-frontend/src/assets/welcome/inspector-pinia2.png differ
diff --git a/vue-devtools/packages/app-frontend/src/assets/welcome/main-tabs.png b/vue-devtools/packages/app-frontend/src/assets/welcome/main-tabs.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9b744a90b8404070928456663173e3802c719f1
Binary files /dev/null and b/vue-devtools/packages/app-frontend/src/assets/welcome/main-tabs.png differ
diff --git a/vue-devtools/packages/app-frontend/src/assets/welcome/settings-pinia.png b/vue-devtools/packages/app-frontend/src/assets/welcome/settings-pinia.png
new file mode 100644
index 0000000000000000000000000000000000000000..9445012e7d939dfa3e04c6779d2f8bd459595976
Binary files /dev/null and b/vue-devtools/packages/app-frontend/src/assets/welcome/settings-pinia.png differ
diff --git a/vue-devtools/packages/app-frontend/src/assets/welcome/timeline-perf.png b/vue-devtools/packages/app-frontend/src/assets/welcome/timeline-perf.png
new file mode 100644
index 0000000000000000000000000000000000000000..756346e946aaa6a1153458aadb8038c0f5d71a1e
Binary files /dev/null and b/vue-devtools/packages/app-frontend/src/assets/welcome/timeline-perf.png differ
diff --git a/vue-devtools/packages/app-frontend/src/assets/welcome/timeline-perf2.png b/vue-devtools/packages/app-frontend/src/assets/welcome/timeline-perf2.png
new file mode 100644
index 0000000000000000000000000000000000000000..c1daf0a7a4a07fd732e64c14be0b26a17fd42bb7
Binary files /dev/null and b/vue-devtools/packages/app-frontend/src/assets/welcome/timeline-perf2.png differ
diff --git a/vue-devtools/packages/app-frontend/src/assets/welcome/timeline-pinia.png b/vue-devtools/packages/app-frontend/src/assets/welcome/timeline-pinia.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa0ad41312359bd83020ab0b59da9a287739d567
Binary files /dev/null and b/vue-devtools/packages/app-frontend/src/assets/welcome/timeline-pinia.png differ
diff --git a/vue-devtools/packages/app-frontend/src/assets/welcome/timeline-router.png b/vue-devtools/packages/app-frontend/src/assets/welcome/timeline-router.png
new file mode 100644
index 0000000000000000000000000000000000000000..47b7a6c537d541beaecea4623f4e6a55f8e71418
Binary files /dev/null and b/vue-devtools/packages/app-frontend/src/assets/welcome/timeline-router.png differ
diff --git a/vue-devtools/packages/app-frontend/src/assets/welcome/timeline.png b/vue-devtools/packages/app-frontend/src/assets/welcome/timeline.png
new file mode 100644
index 0000000000000000000000000000000000000000..27c52d70b611eb94c84f632f84305b607f81ea54
Binary files /dev/null and b/vue-devtools/packages/app-frontend/src/assets/welcome/timeline.png differ
diff --git a/vue-devtools/packages/app-frontend/src/assets/welcome/version-check.png b/vue-devtools/packages/app-frontend/src/assets/welcome/version-check.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b33ae6535b42b9e0308d31aa9e5f8230bf61a0f
Binary files /dev/null and b/vue-devtools/packages/app-frontend/src/assets/welcome/version-check.png differ
diff --git a/vue-devtools/packages/app-frontend/src/features/App.vue b/vue-devtools/packages/app-frontend/src/features/App.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f091b9bf1eb01b281200773c78ec0743e06fd55f
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/App.vue
@@ -0,0 +1,145 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/apps/AppSelect.vue b/vue-devtools/packages/app-frontend/src/features/apps/AppSelect.vue
new file mode 100644
index 0000000000000000000000000000000000000000..aff512c7ffa27c028db8f6ffaa30722e22bcc978
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/apps/AppSelect.vue
@@ -0,0 +1,126 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ app.iframe }}
+
+
+
{{ app.name }}
+
+
+ {{ app.version }}
+
+
+
+
+
+
+
+ {{ app.id }}
+
+
+
+
+ {{ app.iframe }}
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/apps/index.ts b/vue-devtools/packages/app-frontend/src/features/apps/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1dd5d99aeaf4255177cc9627ecb2ed339411a290
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/apps/index.ts
@@ -0,0 +1,118 @@
+import { computed, ref } from 'vue'
+import type { Bridge } from '@vue-devtools/shared-utils'
+import { BridgeEvents } from '@vue-devtools/shared-utils'
+import { getBridge } from '@front/features/bridge'
+import { useRoute, useRouter } from 'vue-router'
+import { fetchLayers } from '../timeline/composable'
+
+export interface AppRecord {
+ id: string
+ name: string
+ version: string
+ iframe: string
+}
+
+const apps = ref([])
+
+export function useCurrentApp() {
+ const route = useRoute()
+ const currentAppId = computed(() => route.params.appId as string)
+ const currentApp = computed(() => apps.value.find(a => currentAppId.value === a.id))
+
+ return {
+ currentAppId,
+ currentApp,
+ }
+}
+
+export function useApps() {
+ const router = useRouter()
+
+ const {
+ currentAppId,
+ currentApp,
+ } = useCurrentApp()
+
+ function selectApp(id: string) {
+ if (currentAppId.value !== id) {
+ router.push({
+ params: {
+ appId: id.toString(),
+ componentId: null,
+ },
+ })
+ }
+ }
+
+ return {
+ apps,
+ currentAppId,
+ currentApp,
+ selectApp,
+ }
+}
+
+function addApp(app: AppRecord) {
+ removeApp(app.id)
+ apps.value.push(app)
+}
+
+function removeApp(appId: string) {
+ const index = apps.value.findIndex(app => app.id === appId)
+ if (index !== -1) {
+ apps.value.splice(index, 1)
+ }
+}
+
+export function getApps() {
+ return apps.value
+}
+
+function fetchApps() {
+ getBridge().send(BridgeEvents.TO_BACK_APP_LIST, {})
+}
+
+export const pendingSelectAppId = ref(null)
+
+const pendingSelectPromises: (() => void)[] = []
+
+export function waitForAppSelect(): Promise {
+ if (!pendingSelectAppId.value) {
+ return Promise.resolve()
+ }
+ else {
+ return new Promise((resolve) => {
+ pendingSelectPromises.push(resolve)
+ })
+ }
+}
+
+export function scanLegacyApps() {
+ getBridge().send(BridgeEvents.TO_BACK_SCAN_LEGACY_APPS, {})
+}
+
+export function setupAppsBridgeEvents(bridge: Bridge) {
+ bridge.on(BridgeEvents.TO_FRONT_APP_ADD, ({ appRecord }) => {
+ addApp(appRecord)
+ fetchLayers()
+ })
+
+ bridge.on(BridgeEvents.TO_FRONT_APP_REMOVE, ({ id }) => {
+ removeApp(id)
+ })
+
+ bridge.on(BridgeEvents.TO_FRONT_APP_LIST, ({ apps: list }) => {
+ apps.value = list
+ })
+
+ bridge.on(BridgeEvents.TO_FRONT_APP_SELECTED, ({ id }) => {
+ if (pendingSelectAppId.value === id) {
+ pendingSelectAppId.value = null
+ for (const resolve of pendingSelectPromises) {
+ resolve()
+ }
+ }
+ })
+
+ fetchApps()
+}
diff --git a/vue-devtools/packages/app-frontend/src/features/apps/vue-version-check.ts b/vue-devtools/packages/app-frontend/src/features/apps/vue-version-check.ts
new file mode 100644
index 0000000000000000000000000000000000000000..54bd481d6c2f2c5aaeb786a9b2ed4c6046d2c79d
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/apps/vue-version-check.ts
@@ -0,0 +1,17 @@
+import { onMounted, ref } from 'vue'
+import semver from 'semver'
+
+const packageData = ref(null)
+
+export function useVueVersionCheck() {
+ function getLatestVersion(currentVersion: string): string {
+ if (packageData.value && packageData.value.versions) {
+ return semver.maxSatisfying(Object.keys(packageData.value.versions), `^${currentVersion}`)
+ }
+ return currentVersion
+ }
+
+ return {
+ getLatestVersion,
+ }
+}
diff --git a/vue-devtools/packages/app-frontend/src/features/bridge/index.ts b/vue-devtools/packages/app-frontend/src/features/bridge/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b0b661457b878f09b14418329052292c20a268d2
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/bridge/index.ts
@@ -0,0 +1,58 @@
+import { onUnmounted } from 'vue'
+import type { Bridge } from '@vue-devtools/shared-utils'
+import { BridgeEvents } from '@vue-devtools/shared-utils'
+
+let bridge: Bridge
+
+interface Sub {
+ type: string
+ key: string
+}
+
+export function useBridge() {
+ const cbs = []
+
+ function onBridge(event: BridgeEvents, cb: (payload: any) => void | Promise) {
+ cbs.push({ event, cb })
+ bridge.on(event, cb)
+ }
+
+ const subs: Sub[] = []
+
+ function subscribe(type: string, key: string) {
+ const sub = { type, key }
+ subs.push(sub)
+ bridge.send(BridgeEvents.TO_BACK_SUBSCRIBE, key)
+ return () => {
+ const index = subs.indexOf(sub)
+ if (index !== -1) {
+ subs.splice(index, 1)
+ }
+ bridge.send(BridgeEvents.TO_BACK_UNSUBSCRIBE, key)
+ }
+ }
+
+ onUnmounted(() => {
+ for (const { event, cb } of cbs) {
+ bridge.off(event, cb)
+ }
+
+ for (const sub of subs) {
+ bridge.send(BridgeEvents.TO_BACK_UNSUBSCRIBE, sub.key)
+ }
+ })
+
+ return {
+ bridge,
+ onBridge,
+ subscribe,
+ }
+}
+
+export function setBridge(b: Bridge) {
+ bridge = b
+}
+
+export function getBridge(): Bridge | null {
+ return bridge
+}
diff --git a/vue-devtools/packages/app-frontend/src/features/chrome/index.ts b/vue-devtools/packages/app-frontend/src/features/chrome/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7d49636b2f211e636ad9dc317ea14d6ed8f20012
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/chrome/index.ts
@@ -0,0 +1 @@
+export * from './pane-visibility'
diff --git a/vue-devtools/packages/app-frontend/src/features/chrome/pane-visibility.ts b/vue-devtools/packages/app-frontend/src/features/chrome/pane-visibility.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3319a72421efd7d1ced76c0d54df188c6a6c4dee
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/chrome/pane-visibility.ts
@@ -0,0 +1,36 @@
+import { isChrome } from '@vue-devtools/shared-utils'
+
+let panelShown = !isChrome
+let pendingAction: (() => void | Promise) | null = null
+
+if (isChrome) {
+ chrome.runtime.onMessage.addListener((request) => {
+ if (request === 'vue-panel-shown') {
+ onPanelShown()
+ }
+ else if (request === 'vue-panel-hidden') {
+ onPanelHidden()
+ }
+ })
+}
+
+export function ensurePaneShown(cb: () => void | Promise) {
+ if (panelShown) {
+ cb()
+ }
+ else {
+ pendingAction = cb
+ }
+}
+
+function onPanelShown() {
+ panelShown = true
+ if (pendingAction) {
+ pendingAction()
+ pendingAction = null
+ }
+}
+
+function onPanelHidden() {
+ panelShown = false
+}
diff --git a/vue-devtools/packages/app-frontend/src/features/code/CodeEditor.vue b/vue-devtools/packages/app-frontend/src/features/code/CodeEditor.vue
new file mode 100644
index 0000000000000000000000000000000000000000..53fd4b047061a14d500be863910e32316e7c4bc3
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/code/CodeEditor.vue
@@ -0,0 +1,168 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/components/ComponentTreeNode.vue b/vue-devtools/packages/app-frontend/src/features/components/ComponentTreeNode.vue
new file mode 100644
index 0000000000000000000000000000000000000000..414ff879289a2558969321e1a5a92f6b1e9623c5
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/components/ComponentTreeNode.vue
@@ -0,0 +1,353 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+ {{ displayName }}
+
+
+ key={{ instance.renderKey }}
+
+
+ >
+
+
+
+
+ fragment
+
+
+ inactive
+
+
+ {{ tag.label }}
+
+
+
+ {{ instance.id }}
+
+
+ {{ instance.domOrder }}
+
+
+
+
+
+
+
+
+ Updated {{ updateTrackingTimeAgo }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Component names:
+
+
+
+
+
+
+
+
+ Performance monitoring
+
+
+ Turn off if your app is slowed down
+
+
+
+ Update tracking
+
+
+ Turn off if your app is slowed down
+
+
+
+ Editable props
+
+
+
+ May print warnings in the console
+
+
+
+ Highlight updates
+
+
+
+ Don't enable if you are sensitive to flashing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Click on a component on the page to select it
+
+
+
+ Cancel
+
+
+
+
+
+
+
+ <
+
+ {{ displayName }}
+
+ >
+
+
+ Copied!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/connection/index.ts b/vue-devtools/packages/app-frontend/src/features/connection/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a60e2cb9c3ee48f76a68b404801bf2aa76de5aff
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/connection/index.ts
@@ -0,0 +1,56 @@
+import { computed, ref } from 'vue'
+import { useNow } from '@vueuse/core'
+
+const isConnected = ref(false)
+const isInitializing = ref(true)
+const lastDisconnect = ref(0)
+const reloadTimes = ref(0)
+let reloadRegistered = false
+
+export function useAppConnection() {
+ const now = useNow({
+ interval: 1000,
+ })
+ const showDisplayDisconnected = computed(() => {
+ if (isInitializing.value) {
+ return false
+ }
+ if (lastDisconnect.value === 0) {
+ return false
+ }
+ // Wait for 5 seconds before showing the disconnected message
+ return !isConnected && now.value.getTime() - lastDisconnect.value > 5000
+ })
+
+ return {
+ isConnected,
+ isInitializing,
+ lastDisconnect,
+ showDisplayDisconnected,
+ reloadTimes,
+ }
+}
+
+export function setAppConnected(value: boolean, force = false, fromReload = false) {
+ // We got disconnected from a page reload
+ if (!value) {
+ reloadRegistered = fromReload
+ }
+
+ if (force) {
+ lastDisconnect.value = 0
+ }
+ else if (!value && isConnected.value) {
+ lastDisconnect.value = Date.now()
+ }
+ isConnected.value = value
+
+ // We are reconnected after a page reload
+ if (value && reloadRegistered) {
+ reloadTimes.value++
+ }
+}
+
+export function setAppInitializing(value: boolean) {
+ isInitializing.value = value
+}
diff --git a/vue-devtools/packages/app-frontend/src/features/error/ErrorOverlay.vue b/vue-devtools/packages/app-frontend/src/features/error/ErrorOverlay.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b0c0adde09c5b063a6d59f6e24f6f832bfc5afc1
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/error/ErrorOverlay.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+ {{ error.message }}
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ More settings
+
+
+
+ Devtools plugins
+
+
+
+
+
+ Documentation
+
+
+
+ Report a bug
+
+
+
+ What's new
+
+
+
+
+
+
+ {{ selectedItem.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+ Scroll to switch
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/header/header.ts b/vue-devtools/packages/app-frontend/src/features/header/header.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b41cdd19695347162d4745d3ce4a8b11eab77253
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/header/header.ts
@@ -0,0 +1,3 @@
+import { ref } from 'vue'
+
+export const showAppsSelector = ref(true)
diff --git a/vue-devtools/packages/app-frontend/src/features/header/tabs.ts b/vue-devtools/packages/app-frontend/src/features/header/tabs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c1003f8e448e7360809b0ddc6ccf9c39e33a90a8
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/header/tabs.ts
@@ -0,0 +1,17 @@
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+export function useTabs() {
+ const route = useRoute()
+ const currentTab = computed(() => {
+ let fromMeta = route.meta.tab
+ if (typeof fromMeta === 'function') {
+ fromMeta = fromMeta(route)
+ }
+ return (fromMeta || route.name) as string
+ })
+
+ return {
+ currentTab,
+ }
+}
diff --git a/vue-devtools/packages/app-frontend/src/features/inspector/DataField.vue b/vue-devtools/packages/app-frontend/src/features/inspector/DataField.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d824c4c3dfefb42ef5c617d6f2245596fe59a722
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/inspector/DataField.vue
@@ -0,0 +1,804 @@
+
+
+
+
+
+
+
+
+
+ {{ displayedKey }}:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ valueDetails }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ field.key }}:
+
+
{{ fieldErrors[field.key] }}
+
+
+
+
+
+ {{ key }}:
+
+
{{ fieldErrors[key] }}
+
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/inspector/StateType.vue b/vue-devtools/packages/app-frontend/src/features/inspector/StateType.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c1fd3d5f50756ba2ec597c2baa65edd8249520af
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/inspector/StateType.vue
@@ -0,0 +1,185 @@
+
+
+
+
+
+
+
+
+
+ {{ toDisplayType(dataType) }}
+
+
+
+
+
+
+
+
+
Inspector {{ $route.params.inspectorId }} not found
+
Go back
+
+
+
+
+
+
+
+
+ {{ node.label }}
+
+
+
+ {{ tag.label }}
+
+
+
+
+
+
+
+
+
+ {{ inspector.selectedNode.label }}
+
+
+
+
+
+
+
+
+
+
+
+
![Plugin logo]()
+
+
+
+
+ {{ plugin.label }}
+
+
+
+ ID: {{ plugin.id }}
+
+
+ Package: {{ plugin.packageName }}
+
+
+
+
+
+
+
+
+ Permissions
+
+
+
+
+
+
+
+
+ No plugins found
+
+
+
+
+
+
+ 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.
+
+
+
+
+ Create your own Plugin
+
+
+
+ Plugin settings
+
+
+
+
+
+
{{ schema.label }}
+
+ {{ schema.description }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![Plugin logo]()
+
+
+
+
Provided by {{ plugin ? plugin.label : pluginId }}
+
+
Plugin ID: {{ plugin.id }}
+
+
+
+
+
+
+
+
+
+
+
+ Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Collapse app selector
+
+
+
+
+
+ Enable
+
+
+ Useful for trackpads
+
+
+
+
+
+ Enable
+
+
+
+ Clear storage
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Enable
+
+
+ Turn off if your app is slowed down
+
+
+
+
+
+ Enable
+
+
+ Turn off if your app is slowed down
+
+
+
+
+
+ Enable
+
+
+ May print warnings in the console
+
+
+
+
+
+ Enable
+
+
+ Don't enable if you are sensitive to flashing
+
+
+
+
+
+
+
+ Hide timeline canvas
+
+
+ Hide events explorer
+
+
+
+
+
+ Enable
+
+
+
+
+
+ Enable
+
+
+
+
+
+
+
+ Are you sure you want to clear all storage?
+
+
+
+ Cancel
+
+
+ Clear
+
+
+
+
+ New
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/timeline/AskScreenshotPermission.vue b/vue-devtools/packages/app-frontend/src/features/timeline/AskScreenshotPermission.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a70dacbc54a5a1abcabfb7c6dd37e097add3450d
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/timeline/AskScreenshotPermission.vue
@@ -0,0 +1,72 @@
+
+
+
+
+
+
Taking screenshots requires permission to access the Tabs API which also includes access to other information about your tabs.
+
Please note that we will only use this permission to take screenshots of the current tab.
+
+
+ Cancel
+
+
+ Request permission
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/timeline/LayerItem.vue b/vue-devtools/packages/app-frontend/src/features/timeline/LayerItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e9d776c4060a5f7e1da2a008dd47795b43a29e22
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/timeline/LayerItem.vue
@@ -0,0 +1,175 @@
+
+
+
+
+
+
+
+
+
+
{{ layer.label }}
+
+
+
+
+
+
+ {{ $shared.componentEventsEnabled ? 'Disable' : 'Enable' }}
+
+
+
+ {{ $shared.performanceMonitoringEnabled ? 'Disable' : 'Enable' }}
+
+
+
+ Select
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ layers.length }} layer{{ layers.length === 1 ? '' : 's' }}
+
+
+
+
+
+
+
+
+
+
+ {{ layer.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Not recording
+
+
+
+
+
+
+
+
+ Hide timeline canvas
+
+
+
+ Hide events explorer
+
+
+
+ Time grid
+
+
+
+ Screenshots
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ formattedCursorTime }}
+
+ ({{ Math.floor(startTime) }}|{{ Math.floor(cursorTime) }}|{{ Math.floor(endTime) }})
+
+
+
+
+
+
+
+
+
+
+
+ Time: {{ inspectedEvent.time }}
+
+
+
+
+
+
+
+
+
+
+ Select an event to display details
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/timeline/TimelineEventList.vue b/vue-devtools/packages/app-frontend/src/features/timeline/TimelineEventList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0f35985853126db89e1a8d9838bed6611e0015e5
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/timeline/TimelineEventList.vue
@@ -0,0 +1,283 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ event.title || 'Event' }}
+
+
+
+
+
+
+
+
+
+
+ selected
+
+
+
+ {{ time }}
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/timeline/TimelineScrollbar.vue b/vue-devtools/packages/app-frontend/src/features/timeline/TimelineScrollbar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..976145170ef995608bdad88aa143df9cedc8d067
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/timeline/TimelineScrollbar.vue
@@ -0,0 +1,194 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/timeline/TimelineView.vue b/vue-devtools/packages/app-frontend/src/features/timeline/TimelineView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7f788121ffecb802a5350b0a3f4dae4432d9aea2
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/timeline/TimelineView.vue
@@ -0,0 +1,1492 @@
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/timeline/composable/events.ts b/vue-devtools/packages/app-frontend/src/features/timeline/composable/events.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1ec91237f21b978ce906ea7f0a99ad10ff88d641
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/timeline/composable/events.ts
@@ -0,0 +1,161 @@
+import { computed, onUnmounted, watch } from 'vue'
+import { BridgeEvents, setStorage } from '@vue-devtools/shared-utils'
+import { getBridge } from '@front/features/bridge'
+import { formatTime } from '@front/util/format'
+import { addNonReactiveProperties } from '@front/util/reactivity'
+import type {
+ Layer,
+ TimelineEvent,
+} from './store'
+import {
+ endTime,
+ inspectedEvent,
+ inspectedEventData,
+ inspectedEventPendingId,
+ maxTime,
+ minTime,
+ selectedEvent,
+ selectedLayer,
+ startTime,
+ timelineIsEmpty,
+} from './store'
+import { resetTime } from './reset'
+import { takeScreenshot } from './screenshot'
+import { addGroupAroundPosition } from './layers'
+import type { EventGroup } from '.'
+
+const AUTOSCROLL_DURATION = 10_000_000
+
+type AddEventCb = (event: TimelineEvent) => void
+
+const addEventCbs: AddEventCb[] = []
+
+export function onEventAdd(cb: AddEventCb) {
+ onUnmounted(() => {
+ const index = addEventCbs.indexOf(cb)
+ if (index !== -1) {
+ addEventCbs.splice(index, 1)
+ }
+ })
+
+ addEventCbs.push(cb)
+}
+
+export function addEvent(appId: string, eventOptions: TimelineEvent, layer: Layer) {
+ // Non-reactive content
+ const event = {} as TimelineEvent
+ addNonReactiveProperties(event, eventOptions)
+
+ if (layer.eventsMap[event.id]) {
+ return
+ }
+
+ if (timelineIsEmpty.value) {
+ timelineIsEmpty.value = false
+ resetTime()
+ }
+
+ addNonReactiveProperties(event, {
+ layer,
+ appId,
+ })
+ layer.events.push(event)
+ layer.eventsMap[event.id] = event
+
+ // Groups
+ if (event.groupId != null) {
+ let group = layer.groupsMap[event.groupId]
+ if (!group) {
+ group = layer.groupsMap[event.groupId] = {
+ events: [],
+ duration: 0,
+ } as EventGroup
+ addNonReactiveProperties(group, {
+ id: event.groupId,
+ y: 0,
+ firstEvent: event,
+ lastEvent: event,
+ nonReactiveDuration: 0,
+ oldSize: null,
+ oldSelected: null,
+ })
+ layer.groups.push(group)
+ }
+ addGroupAroundPosition(layer, group, event.time)
+ group.events.push(event)
+ group.lastEvent = event
+ group.duration = group.nonReactiveDuration = event.time - group.firstEvent.time
+ event.group = group
+ }
+
+ // Min time
+ if (minTime.value === -1_000_000 || minTime.value > event.time) {
+ const stick = minTime.value === startTime.value
+ minTime.value = event.time - 100_000
+ if (stick) {
+ startTime.value = minTime.value
+ }
+ }
+
+ // Update scrollbar
+ const scrollTime = event.time + 100_000
+ if (scrollTime > maxTime.value) {
+ if (endTime.value === maxTime.value) {
+ if (startTime.value !== minTime.value) {
+ // Autoscroll
+ startTime.value = scrollTime - (endTime.value - startTime.value)
+ }
+ else if (endTime.value - startTime.value > AUTOSCROLL_DURATION) {
+ // Autoscroll
+ startTime.value = scrollTime - AUTOSCROLL_DURATION
+ }
+ endTime.value = scrollTime
+ }
+ maxTime.value = scrollTime
+ }
+
+ takeScreenshot(event)
+
+ for (const cb of addEventCbs) {
+ cb(event)
+ }
+}
+
+export function useSelectedEvent() {
+ return {
+ selectedEvent: computed(() => selectedEvent.value),
+ selectedGroupEvents: computed(() => selectedEvent.value?.group?.events ?? []),
+ }
+}
+
+export function useInspectedEvent() {
+ watch(inspectedEvent, (event) => {
+ if (event) {
+ loadEvent(event.id)
+ event.layer.lastInspectedEvent = event
+ }
+ }, {
+ immediate: true,
+ })
+
+ return {
+ inspectedEvent,
+ inspectedEventState: computed(() => inspectedEventData.value),
+ time: computed(() => formatTime(inspectedEvent.value.time / 1000, 'ms')),
+ loading: computed(() => inspectedEventPendingId.value != null),
+ }
+}
+
+function loadEvent(id: TimelineEvent['id']) {
+ if (id == null || inspectedEventPendingId.value === id) {
+ return
+ }
+ inspectedEventPendingId.value = id
+ getBridge().send(BridgeEvents.TO_BACK_TIMELINE_EVENT_DATA, { id })
+}
+
+export function selectEvent(event: TimelineEvent) {
+ selectedEvent.value = inspectedEvent.value = event
+ selectedLayer.value = event.layer
+ setStorage('selected-layer-id', event.layer.id)
+}
diff --git a/vue-devtools/packages/app-frontend/src/features/timeline/composable/index.ts b/vue-devtools/packages/app-frontend/src/features/timeline/composable/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b761f78d50c5c6fba0f2fcae823b5697ef839c4d
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/timeline/composable/index.ts
@@ -0,0 +1,8 @@
+export * from './events'
+export * from './layers'
+export * from './markers'
+export * from './reset'
+export * from './screenshot'
+export * from './setup'
+export * from './store'
+export * from './time'
diff --git a/vue-devtools/packages/app-frontend/src/features/timeline/composable/layers.ts b/vue-devtools/packages/app-frontend/src/features/timeline/composable/layers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cae67ae29afd2defe95f8648a690deab8a94c17f
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/timeline/composable/layers.ts
@@ -0,0 +1,170 @@
+import { computed } from 'vue'
+import { BridgeEvents, setStorage } from '@vue-devtools/shared-utils'
+import { useApps, waitForAppSelect } from '@front/features/apps'
+import { getBridge } from '@front/features/bridge'
+import { useRouter } from 'vue-router'
+import { addNonReactiveProperties } from '@front/util/reactivity'
+import type {
+ EventGroup,
+ Layer,
+ LayerFromBackend,
+} from './store'
+import {
+ hiddenLayersPerApp,
+ hoverLayerId,
+ inspectedEvent,
+ layersPerApp,
+ selectedEvent,
+ selectedLayer,
+ vScrollPerApp,
+} from './store'
+
+export function layerFactory(options: LayerFromBackend): Layer {
+ const result = {} as Layer
+ addNonReactiveProperties(result, {
+ ...options,
+ newHeight: 1,
+ eventsMap: {},
+ groupsMap: {},
+ groupPositionCache: {},
+ })
+ Object.assign(result, {
+ events: [],
+ groups: [],
+ height: 1,
+ lastInspectedEvent: null,
+ loaded: false,
+ })
+ return result
+}
+
+export function getLayers(appId: string) {
+ let layers = layersPerApp.value[appId]
+ if (!layers || !Array.isArray(layers)) {
+ layersPerApp.value[appId] = []
+ layers = layersPerApp.value[appId]
+ }
+ return layers
+}
+
+function getHiddenLayers(appId: string) {
+ let layers = hiddenLayersPerApp.value[appId]
+ if (!layers || !Array.isArray(layers)) {
+ hiddenLayersPerApp.value[appId] = []
+ layers = hiddenLayersPerApp.value[appId]
+ }
+ return layers
+}
+
+export function useLayers() {
+ const { currentAppId } = useApps()
+
+ const allLayers = computed(() => getLayers(currentAppId.value))
+
+ function isLayerHidden(layer: Layer) {
+ const list = getHiddenLayers(currentAppId.value)
+ return list.includes(layer.id)
+ }
+
+ function resetSelectedStatus() {
+ selectedLayer.value = null
+ inspectedEvent.value = null
+ selectedEvent.value = null
+ hoverLayerId.value = null
+ setStorage('selected-layer-id', '')
+ }
+
+ function setLayerHidden(layer: Layer, hidden: boolean) {
+ const list = getHiddenLayers(currentAppId.value)
+ const index = list.indexOf(layer.id)
+
+ if (selectedLayer.value === layer) {
+ resetSelectedStatus()
+ }
+
+ if (hidden && index === -1) {
+ list.push(layer.id)
+ }
+ else if (!hidden && index !== -1) {
+ list.splice(index, 1)
+ }
+ setStorage('hidden-layers', hiddenLayersPerApp.value)
+ }
+
+ const layers = computed(() => allLayers.value.filter(l => !isLayerHidden(l)))
+
+ const router = useRouter()
+
+ function selectLayer(layer: Layer) {
+ let event = selectedLayer.value !== layer ? layer.lastInspectedEvent : null
+
+ selectedLayer.value = layer
+ setStorage('selected-layer-id', layer.id)
+
+ if (!event) {
+ event = layer.events.length ? layer.events[layer.events.length - 1] : null
+ }
+ inspectedEvent.value = event
+ selectedEvent.value = event
+
+ router.push({
+ query: {
+ ...router.currentRoute.value.query,
+ tabId: 'all',
+ },
+ })
+ }
+
+ return {
+ layers,
+ allLayers,
+ vScroll: computed({
+ get: () => vScrollPerApp.value[currentAppId.value] || 0,
+ set: (value: number) => {
+ vScrollPerApp.value[currentAppId.value] = value
+ },
+ }),
+ isLayerHidden,
+ setLayerHidden,
+ hoverLayerId,
+ selectedLayer: computed(() => selectedLayer.value),
+ selectLayer,
+ }
+}
+
+export async function fetchLayers() {
+ await waitForAppSelect()
+ getBridge().send(BridgeEvents.TO_BACK_TIMELINE_LAYER_LIST, {})
+}
+
+export function getGroupsAroundPosition(layer: Layer, startPosition: number, endPosition: number): EventGroup[] {
+ const result = new Set()
+ let key = Math.round(startPosition / 100_000)
+ const endKey = Math.round(endPosition / 100_000)
+ while (key <= endKey) {
+ const groups = layer.groupPositionCache[key]
+ if (groups) {
+ for (const group of groups) {
+ result.add(group)
+ }
+ }
+ key++
+ }
+ return Array.from(result)
+}
+
+export function addGroupAroundPosition(layer: Layer, group: EventGroup, newPosition: number) {
+ let key = Math.round(group.lastEvent.time / 100_000)
+ const endKey = Math.round(newPosition / 100_000)
+
+ while (key <= endKey) {
+ let list = layer.groupPositionCache[key]
+ if (!list) {
+ list = layer.groupPositionCache[key] = []
+ }
+ if (!list.includes(group)) {
+ list.push(group)
+ }
+ key++
+ }
+}
diff --git a/vue-devtools/packages/app-frontend/src/features/timeline/composable/markers.ts b/vue-devtools/packages/app-frontend/src/features/timeline/composable/markers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f6ec4a1041007827769d114514e65a86365ef160
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/timeline/composable/markers.ts
@@ -0,0 +1,24 @@
+import { useCurrentApp } from '@front/features/apps'
+import { computed, watch } from 'vue'
+import { getBridge } from '@front/features/bridge'
+import { BridgeEvents } from '@vue-devtools/shared-utils'
+import { markersAllApps, markersPerApp } from './store'
+
+export function useMarkers() {
+ const { currentAppId } = useCurrentApp()
+ const currentAppMarkers = computed(() => markersAllApps.value.concat(markersPerApp.value[currentAppId.value] ?? []))
+
+ watch(currentAppId, () => {
+ loadMarkers()
+ }, {
+ immediate: true,
+ })
+
+ return {
+ currentAppMarkers,
+ }
+}
+
+function loadMarkers() {
+ getBridge().send(BridgeEvents.TO_BACK_TIMELINE_LOAD_MARKERS)
+}
diff --git a/vue-devtools/packages/app-frontend/src/features/timeline/composable/reset.ts b/vue-devtools/packages/app-frontend/src/features/timeline/composable/reset.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8152f445402c07169c0579c9da91c7af4142e567
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/timeline/composable/reset.ts
@@ -0,0 +1,69 @@
+import { onUnmounted } from 'vue'
+import { BridgeEvents, getStorage } from '@vue-devtools/shared-utils'
+import { getBridge } from '@front/features/bridge'
+import {
+ endTime,
+ hiddenLayersPerApp,
+ hoverLayerId,
+ inspectedEvent,
+ inspectedEventData,
+ inspectedEventPendingId,
+ layersPerApp,
+ maxTime,
+ minTime,
+ screenshots,
+ selectedEvent,
+ selectedLayer,
+ startTime,
+ timelineIsEmpty,
+ vScrollPerApp,
+} from './store'
+import { fetchLayers } from './layers'
+
+type ResetCb = () => void
+
+const resetCbs: ResetCb[] = []
+
+export function resetTimeline(sync = true) {
+ selectedLayer.value = null
+ selectedEvent.value = null
+ inspectedEvent.value = null
+ inspectedEventData.value = null
+ inspectedEventPendingId.value = null
+ layersPerApp.value = {}
+ vScrollPerApp.value = {}
+ hoverLayerId.value = null
+ timelineIsEmpty.value = true
+ screenshots.value = []
+
+ resetTime()
+
+ if (sync) {
+ getBridge().send(BridgeEvents.TO_BACK_TIMELINE_CLEAR)
+ }
+
+ // Layers
+ fetchLayers()
+ hiddenLayersPerApp.value = getStorage('hidden-layers', {})
+
+ for (const cb of resetCbs) {
+ cb()
+ }
+}
+
+export function resetTime() {
+ const now = 0
+ minTime.value = startTime.value = now - 1_000_000
+ maxTime.value = endTime.value = now
+}
+
+export function onTimelineReset(cb: ResetCb) {
+ onUnmounted(() => {
+ const index = resetCbs.indexOf(cb)
+ if (index !== -1) {
+ resetCbs.splice(index, 1)
+ }
+ })
+
+ resetCbs.push(cb)
+}
diff --git a/vue-devtools/packages/app-frontend/src/features/timeline/composable/screenshot.ts b/vue-devtools/packages/app-frontend/src/features/timeline/composable/screenshot.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a4213caace0d52ab3f1aa164d9a513546705b58f
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/timeline/composable/screenshot.ts
@@ -0,0 +1,95 @@
+import { BridgeEvents, SharedData } from '@vue-devtools/shared-utils'
+import { useApps } from '@front/features/apps'
+import { useBridge } from '@front/features/bridge'
+import type { EventScreenshot, TimelineEvent } from './store'
+import { screenshots } from './store'
+
+let nextScreenshotId = 0
+
+export async function takeScreenshot(event: TimelineEvent) {
+ if (!SharedData.timelineScreenshots || event.layer.skipScreenshots) {
+ return
+ }
+
+ const time = Math.round(event.time / 100_000) * 100_000
+
+ const lastScreenshot = screenshots.value[screenshots.value.length - 1]
+
+ if (!lastScreenshot || lastScreenshot.time !== time) {
+ const screenshot: EventScreenshot = {
+ id: nextScreenshotId++,
+ time,
+ image: null,
+ events: [
+ event,
+ ],
+ }
+ event.screenshot = screenshot
+
+ // Screenshot
+ if (typeof browser !== 'undefined') {
+ browser.runtime.sendMessage({
+ action: 'vue-take-screenshot',
+ id: screenshot.id,
+ })
+ screenshots.value.push(screenshot)
+ }
+ else if (typeof chrome !== 'undefined' && chrome.tabs && typeof chrome.tabs.captureVisibleTab === 'function') {
+ chrome.tabs.captureVisibleTab({
+ format: 'png',
+ }, (dataUrl) => {
+ screenshot.image = dataUrl
+
+ if (!dataUrl) {
+ event.screenshot = lastScreenshot
+ if (lastScreenshot) {
+ lastScreenshot.events.push(event)
+ }
+ }
+ else {
+ screenshots.value.push(screenshot)
+ }
+ })
+ }
+ }
+ else {
+ event.screenshot = lastScreenshot
+ if (lastScreenshot) {
+ lastScreenshot.events.push(event)
+ }
+ }
+}
+
+export const supportsScreenshot = typeof browser !== 'undefined' || (typeof chrome !== 'undefined' && !!chrome.tabs && typeof chrome.tabs.captureVisibleTab === 'function')
+
+if (typeof browser !== 'undefined' && browser.runtime.onMessage) {
+ browser.runtime.onMessage.addListener((req) => {
+ if (req.action === 'vue-screenshot-result') {
+ const screenshot = screenshots.value.find(s => s.id === req.id)
+ if (screenshot) {
+ screenshot.image = req.dataUrl
+ }
+ }
+ })
+}
+
+export function useScreenshots() {
+ const { bridge } = useBridge()
+ const { currentAppId } = useApps()
+
+ function showScreenshot(screenshot: EventScreenshot = null) {
+ bridge.send(BridgeEvents.TO_BACK_TIMELINE_SHOW_SCREENSHOT, {
+ screenshot: screenshot
+ ? {
+ ...screenshot,
+ events: screenshot.events.filter(event => event.appId === currentAppId.value).map(event => event.id),
+ }
+ : null,
+ })
+ }
+
+ return {
+ screenshots,
+ showScreenshot,
+ }
+}
diff --git a/vue-devtools/packages/app-frontend/src/features/timeline/composable/setup.ts b/vue-devtools/packages/app-frontend/src/features/timeline/composable/setup.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a351d64d0cca38fd480d7ee1be40276b761f531d
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/timeline/composable/setup.ts
@@ -0,0 +1,145 @@
+import type { Bridge } from '@vue-devtools/shared-utils'
+import { BridgeEvents, parse } from '@vue-devtools/shared-utils'
+import { getApps } from '@front/features/apps'
+import type {
+ MarkerFromBackend,
+ TimelineEvent,
+ TimelineMarker,
+} from './store'
+import {
+ inspectedEvent,
+ inspectedEventData,
+ inspectedEventPendingId,
+ markersAllApps,
+ markersPerApp,
+} from './store'
+import { fetchLayers, getLayers, layerFactory } from './layers'
+import { addEvent } from './events'
+import { resetTimeline } from './reset'
+
+const pendingEvents: Record = {}
+
+export function setupTimelineBridgeEvents(bridge: Bridge) {
+ resetTimeline(false)
+
+ bridge.on(BridgeEvents.TO_FRONT_TIMELINE_EVENT, ({ appId, layerId, event }) => {
+ const appIds = appId === 'all' ? getApps().map(app => app.id) : [appId]
+ for (const appId of appIds) {
+ const layer = getLayers(appId).find(l => l.id === layerId)
+ if (!layer) {
+ // Layer not found
+ const pendingKey = `${appId}:${layerId}`
+ pendingEvents[pendingKey] = pendingEvents[pendingKey] ?? []
+ pendingEvents[pendingKey].push(event)
+ return
+ }
+
+ addEvent(appId, event, layer)
+ }
+ })
+
+ bridge.on(BridgeEvents.TO_FRONT_TIMELINE_LAYER_ADD, () => {
+ fetchLayers()
+ })
+
+ bridge.on(BridgeEvents.TO_FRONT_TIMELINE_LAYER_LIST, ({ layers }) => {
+ for (const layer of layers) {
+ const appIds = layer.appId != null ? [layer.appId] : getApps().map(app => app.id)
+ for (const appId of appIds) {
+ const existingLayers = getLayers(appId)
+ if (!existingLayers.some(l => l.id === layer.id)) {
+ existingLayers.push(layerFactory(layer))
+
+ // Add pending events
+ const pendingKey = `${appId}:${layer.id}`
+ if (pendingEvents[pendingKey] && pendingEvents[pendingKey].length) {
+ for (const event of pendingEvents[pendingKey]) {
+ addEvent(appId, event, getLayers(appId).find(l => l.id === layer.id))
+ }
+ pendingEvents[pendingKey] = []
+ }
+
+ // Load existing events that may not have been catched
+ bridge.send(BridgeEvents.TO_BACK_TIMELINE_LAYER_LOAD_EVENTS, { layerId: layer.id, appId })
+ }
+ }
+ }
+ })
+
+ bridge.on(BridgeEvents.TO_FRONT_TIMELINE_EVENT_DATA, ({ eventId, data }) => {
+ if (inspectedEvent.value) {
+ if (inspectedEvent.value.id === eventId) {
+ inspectedEventData.value = parse(data)
+
+ if (data === null) {
+ inspectedEvent.value = null
+ }
+ }
+ if (eventId === inspectedEventPendingId.value) {
+ inspectedEventPendingId.value = null
+ }
+ }
+ })
+
+ bridge.on(BridgeEvents.TO_FRONT_TIMELINE_LAYER_LOAD_EVENTS, ({ appId, layerId, events }) => {
+ const layer = getLayers(appId).find(l => l.id === layerId)
+ if (!layer) {
+ // Layer not found
+ const pendingKey = `${appId}:${layerId}`
+ pendingEvents[pendingKey] = pendingEvents[pendingKey] ?? []
+ pendingEvents[pendingKey].push(...events)
+ return
+ }
+
+ for (const event of events) {
+ addEvent(appId, event, layer)
+ }
+ })
+
+ bridge.on(BridgeEvents.TO_FRONT_TIMELINE_LOAD_MARKERS, ({ markers, appId }: { markers: MarkerFromBackend[], appId: string }) => {
+ const allList: TimelineMarker[] = []
+ const appList: TimelineMarker[] = []
+
+ for (const marker of markers) {
+ const result = {
+ ...marker,
+ x: 0,
+ }
+ if (marker.all) {
+ allList.push(result)
+ }
+ else {
+ appList.push(result)
+ }
+ }
+
+ markersAllApps.value = allList
+ markersPerApp.value[appId] = appList
+ })
+
+ bridge.on(BridgeEvents.TO_FRONT_TIMELINE_MARKER, ({ marker, appId }: { marker: MarkerFromBackend, appId: string }) => {
+ let targetList: TimelineMarker[]
+ if (marker.all) {
+ targetList = markersAllApps.value
+ }
+ else {
+ if (!markersPerApp.value[appId]) {
+ markersPerApp.value[appId] = []
+ }
+ targetList = markersPerApp.value[appId]
+ }
+
+ const result = {
+ ...marker,
+ x: 0,
+ }
+
+ const index = targetList.findIndex(m => m.id === marker.id)
+ if (index !== -1) {
+ targetList.splice(index, 1, result)
+ }
+ else {
+ targetList.push(result)
+ }
+ })
+}
diff --git a/vue-devtools/packages/app-frontend/src/features/timeline/composable/store.ts b/vue-devtools/packages/app-frontend/src/features/timeline/composable/store.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4c75db89ee39c7854eade3cab714b576f278d1df
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/timeline/composable/store.ts
@@ -0,0 +1,107 @@
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+import type { ID } from '@vue/devtools-api'
+import type * as PIXI from 'pixi.js-legacy'
+
+export interface TimelineEventFromBackend {
+ id: number
+ time: number
+ logType: 'default' | 'warning' | 'error'
+ groupId: ID
+ title: string
+ subtitle: string
+}
+
+export interface EventGroup {
+ id: ID
+ events: TimelineEvent[]
+ firstEvent: TimelineEvent
+ lastEvent: TimelineEvent
+ duration: number
+ nonReactiveDuration: number
+ y: number
+ oldSize?: number
+ oldSelected?: boolean
+}
+
+export interface EventScreenshot {
+ id: number
+ time: number
+ image: string
+ events: TimelineEvent[]
+}
+
+export interface TimelineEvent extends TimelineEventFromBackend {
+ layer: Layer
+ appId: string | 'all'
+ group: EventGroup
+ screenshot: EventScreenshot
+ container: PIXI.Container
+ g: PIXI.Graphics
+ groupG: PIXI.Graphics
+ groupT: PIXI.BitmapText
+ groupText: string
+ forcePositionUpdate?: boolean
+}
+
+export interface LayerFromBackend {
+ id: string
+ label: string
+ color: number
+ appId?: string
+ pluginId?: string
+ groupsOnly?: boolean
+ skipScreenshots?: boolean
+ ignoreNoDurationGroups?: boolean
+}
+
+export interface Layer extends LayerFromBackend {
+ events: TimelineEvent[]
+ eventsMap: Record
+ groups: EventGroup[]
+ groupsMap: Record
+ groupPositionCache: Record
+ height: number
+ newHeight: number
+ lastInspectedEvent: TimelineEvent
+ loaded: boolean
+}
+
+export interface MarkerFromBackend {
+ id: string
+ appId: string
+ all?: boolean
+ time: number
+ label: string
+ color: number
+}
+
+export interface TimelineMarker extends MarkerFromBackend {
+ x: number
+}
+
+export const startTime = ref(0)
+export const endTime = ref(0)
+export const minTime = ref(0)
+export const maxTime = ref(0)
+
+export const timelineIsEmpty = ref(true)
+
+export const cursorTime = ref(null)
+
+export const layersPerApp: Ref<{ [appId: string]: Layer[] }> = ref({})
+export const hiddenLayersPerApp: Ref<{ [appId: string]: Layer['id'][] }> = ref({})
+export const vScrollPerApp: Ref<{ [appId: string]: number }> = ref({})
+
+export const selectedEvent: Ref = ref(null)
+export const selectedLayer: Ref = ref(null)
+export const hoverLayerId: Ref = ref(null)
+
+export const inspectedEvent: Ref = ref(null)
+export const inspectedEventData = ref(null)
+export const inspectedEventPendingId: Ref = ref(null)
+
+export const screenshots: Ref = ref([])
+
+export const markersAllApps: Ref = ref([])
+export const markersPerApp: Ref<{ [appId: string]: TimelineMarker[] }> = ref({})
diff --git a/vue-devtools/packages/app-frontend/src/features/timeline/composable/time.ts b/vue-devtools/packages/app-frontend/src/features/timeline/composable/time.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2fe2efb061f2fb5df187eceab3ac2a1dfed3a53
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/timeline/composable/time.ts
@@ -0,0 +1,22 @@
+import {
+ cursorTime,
+ endTime,
+ maxTime,
+ minTime,
+ startTime,
+} from './store'
+
+export function useTime() {
+ return {
+ startTime,
+ endTime,
+ minTime,
+ maxTime,
+ }
+}
+
+export function useCursor() {
+ return {
+ cursorTime,
+ }
+}
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/components/VueButton.vue b/vue-devtools/packages/app-frontend/src/features/ui/components/VueButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..32055cdfffaa2de97a78bb644846668a4eb2ec67
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/components/VueButton.vue
@@ -0,0 +1,123 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ label }}
+
+
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/components/VueDisable.vue b/vue-devtools/packages/app-frontend/src/features/ui/components/VueDisable.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e367c81383cc9367028685842a45c02b5c51e849
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/components/VueDisable.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/components/VueDropdown.vue b/vue-devtools/packages/app-frontend/src/features/ui/components/VueDropdown.vue
new file mode 100644
index 0000000000000000000000000000000000000000..76451363281482f612d17caf66ead68b3906d20f
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/components/VueDropdown.vue
@@ -0,0 +1,203 @@
+
+
+
+
+
+
+
+ {{ label }}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/components/VueDropdownButton.vue b/vue-devtools/packages/app-frontend/src/features/ui/components/VueDropdownButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b0c329185156a589fa3fc2070e00a320516b1f02
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/components/VueDropdownButton.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/components/VueFormField.vue b/vue-devtools/packages/app-frontend/src/features/ui/components/VueFormField.vue
new file mode 100644
index 0000000000000000000000000000000000000000..313a3bd3ea3002383156339a7011c2f46f34212a
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/components/VueFormField.vue
@@ -0,0 +1,94 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/components/VueGroup.vue b/vue-devtools/packages/app-frontend/src/features/ui/components/VueGroup.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f003feae4d159dd69117174936126f54e36fcf4d
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/components/VueGroup.vue
@@ -0,0 +1,131 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/components/VueGroupButton.vue b/vue-devtools/packages/app-frontend/src/features/ui/components/VueGroupButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0cbee14d37c205b980604377a9f499bcea445f40
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/components/VueGroupButton.vue
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/components/VueIcon.vue b/vue-devtools/packages/app-frontend/src/features/ui/components/VueIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4255ac63f5428eb1b9a1afe3921d5bd1bd326470
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/components/VueIcon.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/components/VueInput.vue b/vue-devtools/packages/app-frontend/src/features/ui/components/VueInput.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8ddf8153d32924ac995ee3e0da8a5fd087fdbc9c
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/components/VueInput.vue
@@ -0,0 +1,445 @@
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/components/VueLoadingBar.vue b/vue-devtools/packages/app-frontend/src/features/ui/components/VueLoadingBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5d1bfdff0c6e549e6cd4523106878144eb17f354
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/components/VueLoadingBar.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/components/VueLoadingIndicator.vue b/vue-devtools/packages/app-frontend/src/features/ui/components/VueLoadingIndicator.vue
new file mode 100644
index 0000000000000000000000000000000000000000..751b25232500835a9efb281ddc836812aa6a3bef
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/components/VueLoadingIndicator.vue
@@ -0,0 +1,6 @@
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/components/VueModal.vue b/vue-devtools/packages/app-frontend/src/features/ui/components/VueModal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ce1bd2d1de31942dd2a99f429e1c4214e410342b
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/components/VueModal.vue
@@ -0,0 +1,100 @@
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/components/VueSelect.vue b/vue-devtools/packages/app-frontend/src/features/ui/components/VueSelect.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0d31a97b321e5ea223f7bb04429a90a0001b4fcc
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/components/VueSelect.vue
@@ -0,0 +1,86 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/components/VueSelectButton.vue b/vue-devtools/packages/app-frontend/src/features/ui/components/VueSelectButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c17af73a6675dac13c179722849786bdb97d47d1
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/components/VueSelectButton.vue
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/components/VueSwitch.vue b/vue-devtools/packages/app-frontend/src/features/ui/components/VueSwitch.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1f0da92d98b189c046ab52dd2a1b84adc095ac42
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/components/VueSwitch.vue
@@ -0,0 +1,88 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/components/icons.ts b/vue-devtools/packages/app-frontend/src/features/ui/components/icons.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1dc9c5675c21a9f0ae1008e83f5d358fbec79753
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/components/icons.ts
@@ -0,0 +1,35 @@
+const icons = require.context(
+ '@akryum/md-icons-svg/svg/',
+ true,
+ /materialicons\/24px\.svg$/,
+)
+
+export default {
+ install() {
+ const sprites = ['']
+ let spriteIndex = 0
+ // Load all the SVG symbols
+ icons.keys().forEach((key, index) => {
+ let result = icons(key)
+ const [, iconName] = /(\w+)\/materialicons/.exec(key)
+ // eslint-disable-next-line regexp/no-super-linear-backtracking
+ const [, content] = /(.*)<\/svg>/.exec(result)
+ result = ``
+ sprites[spriteIndex] += result
+ if ((index + 1) % 40 === 0) {
+ sprites.push('')
+ spriteIndex++
+ }
+ })
+ for (const html of sprites) {
+ const iconsWrapper = document.createElement('div')
+ iconsWrapper.style.display = 'none'
+ iconsWrapper.innerHTML = html
+ document.body.insertBefore(iconsWrapper, document.body.firstChild)
+ }
+ },
+}
+
+export function generateHtmlIcon(icon: string) {
+ return ``
+}
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/composables/useDisableScroll.ts b/vue-devtools/packages/app-frontend/src/features/ui/composables/useDisableScroll.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0304a6cbd014aa4f2b8d75d5d5d10e9351fe7b45
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/composables/useDisableScroll.ts
@@ -0,0 +1,30 @@
+import { onBeforeUnmount, onMounted } from 'vue'
+
+let count = 0
+
+function getScrollingElements() {
+ return document.querySelectorAll('.vue-ui-disable-scroll, body')
+}
+
+function updateScroll() {
+ if (count === 0) {
+ getScrollingElements().forEach(el =>
+ el.classList.remove('vue-ui-no-scroll'),
+ )
+ }
+ else if (count === 1) {
+ getScrollingElements().forEach(el => el.classList.add('vue-ui-no-scroll'))
+ }
+}
+
+export function useDisableScroll() {
+ onMounted(() => {
+ count++
+ updateScroll()
+ })
+
+ onBeforeUnmount(() => {
+ count--
+ updateScroll()
+ })
+}
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/composables/useDisabled.ts b/vue-devtools/packages/app-frontend/src/features/ui/composables/useDisabled.ts
new file mode 100644
index 0000000000000000000000000000000000000000..072e9353945801424c1493f0869c994e3d7a3ce5
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/composables/useDisabled.ts
@@ -0,0 +1,36 @@
+/**
+ * (Use with the DisabledChild mixin)
+ * Allow disabling an entire tree of components implementing the DisabledChild mixin.
+ */
+
+import { computed, inject, provide, reactive, watch } from 'vue'
+
+export function useDisabledParent(props: { disabled?: boolean }) {
+ const injectedDisableData = reactive({
+ value: props.disabled || false,
+ })
+
+ provide('VueDisableMixin', {
+ data: injectedDisableData,
+ })
+
+ watch(
+ () => props.disabled,
+ (value, oldValue) => {
+ if (value !== oldValue) {
+ injectedDisableData.value = value
+ }
+ },
+ )
+}
+
+export function useDisabledChild(props: { disabled?: boolean }) {
+ const injectDisable = inject<{ data: { value: boolean } } | undefined>(
+ 'VueDisableMixin',
+ null,
+ )
+
+ return {
+ finalDisabled: computed(() => props.disabled || (injectDisable && injectDisable.data.value)),
+ }
+}
diff --git a/vue-devtools/packages/app-frontend/src/features/ui/index.ts b/vue-devtools/packages/app-frontend/src/features/ui/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e791e14d151a2df3afa294cf3e8457ba9c32d867
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/ui/index.ts
@@ -0,0 +1,60 @@
+import type { Plugin } from 'vue'
+import FloatingVue from 'floating-vue'
+import VueIcons from './components/icons'
+import VueDisable from './components/VueDisable.vue'
+import VueButton from './components/VueButton.vue'
+import VueDropdown from './components/VueDropdown.vue'
+import VueDropdownButton from './components/VueDropdownButton.vue'
+import VueFormField from './components/VueFormField.vue'
+import VueLoadingIndicator from './components/VueLoadingIndicator.vue'
+import VueGroup from './components/VueGroup.vue'
+import VueGroupButton from './components/VueGroupButton.vue'
+import VueIcon from './components/VueIcon.vue'
+import VueInput from './components/VueInput.vue'
+import VueLoadingBar from './components/VueLoadingBar.vue'
+import VueSwitch from './components/VueSwitch.vue'
+import VueSelect from './components/VueSelect.vue'
+import VueSelectButton from './components/VueSelectButton.vue'
+import VueModal from './components/VueModal.vue'
+import 'floating-vue/dist/style.css'
+
+export { generateHtmlIcon } from './components/icons'
+
+const ui: Plugin = {
+ install(app) {
+ app.use(VueIcons)
+ app.component('VueButton', VueButton)
+ app.component('VueDisable', VueDisable)
+ app.component('VueDropdown', VueDropdown)
+ app.component('VueFormField', VueFormField)
+ app.component('VueDropdownButton', VueDropdownButton)
+ app.component('VueLoadingIndicator', VueLoadingIndicator)
+ app.component('VueGroup', VueGroup)
+ app.component('VueGroupButton', VueGroupButton)
+ app.component('VueIcon', VueIcon)
+ app.component('VueInput', VueInput)
+ app.component('VueLoadingBar', VueLoadingBar)
+ app.component('VueSwitch', VueSwitch)
+ app.component('VueSelect', VueSelect)
+ app.component('VueSelectButton', VueSelectButton)
+ app.component('VueModal', VueModal)
+
+ app.use(FloatingVue, {
+ container: 'body',
+ instantMove: true,
+ themes: {
+ tooltip: {
+ delay: {
+ show: 1000,
+ hide: 800,
+ },
+ },
+ dropdown: {
+ handleResize: false,
+ },
+ },
+ })
+ },
+}
+
+export default ui
diff --git a/vue-devtools/packages/app-frontend/src/features/welcome/WelcomeSlideshow.vue b/vue-devtools/packages/app-frontend/src/features/welcome/WelcomeSlideshow.vue
new file mode 100644
index 0000000000000000000000000000000000000000..06e6005320e4bd146922ada295b9ab072b46c646
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/features/welcome/WelcomeSlideshow.vue
@@ -0,0 +1,267 @@
+
+
+
+
+
+
+
+ 
+
+ Welcome to the Vue devtools!
+
+
+
+
+ Let's take a little tour
+
+
+ The devtools were entirely rewritten with the release of Vue 3.
+
+
+
+ Its new architecture allows better support of different versions of Vue, as well as integration of third-party libraries (more on that later!).
+
+
+
+ It's packed with changes big and small, so here is an overview of what's new!
+
+
+
+
+ 
+
+
+ You might notice that the navigation is different. The devtools now has two main tabs:
+
+
+
+ - the Inspector to display debugging information in a structured way (for example inspecting a component),
+ - the Timeline to track different kinds of data over time such as events.
+
+
+
+
+ The Inspector
+
+
+ Here you can select components and inspect their state.
+
+
+ 
+
+
+
+
+ To access settings, use the new "3 dots" menu in the top right corner.
+
+
+ 
+
+
+
+
+ Any Vue plugin and library can now integrate with the devtools via its Plugin API.
+
+
+
+ For example, they can add their own custom inspectors:
+
+
+ 
+
+
+
+ The Timeline
+
+
+ Here you can see the events coming from your application in real-time. It includes mouse and keyboard events, component events, performance flamecharts...
+
+
+ 
+
+
+
+
+ You can zoom and pan the timeline, or click on events to see more information.
+
+
+ 
+
+
+
+
+ Using the Devtools Plugin API, third-party libraries can also add layers and events to the Timeline.
+
+
+ 
+
+
+
+
+ On the left side of the top bar, you can find a new App Selector. The devtools are now scoped to a specific selected app and can even inspect apps inside iframes!
+
+
+ 
+
+
+
+
+
+
+ That's it!
+
+
+
+ We hope that you will enjoy the new Vue devtools.
+
+
+
+ In case something doesn't work with your project, you can use the Legacy version and report an issue.
+
+
+
+
+
+
+
+
+ Skip
+
+
+
+ Previous
+
+
+ Next
+
+
+ Continue
+
+
+
+
Using this shortcut will override the default toggled state and save it for next time.
',
+ },
+ filter: {
+ tooltip: '[[{{keys.alt}}]] + [[D]] Filter state by name',
+ },
+ },
+ DataField: {
+ edit: {
+ cancel: {
+ tooltip: '[[{{keys.esc}}]] Cancel',
+ },
+ submit: {
+ tooltip: '[[{{keys.enter}}]] Submit change',
+ },
+ },
+ contextMenu: {
+ copyValue: 'Copy Value',
+ copyPath: 'Copy Path',
+ },
+ quickEdit: {
+ number: {
+ tooltip: `Quick Edit
+ [[{{keys.ctrl}}]] + <>: {{operator}}5
+ [[{{keys.shift}}]] + <>: {{operator}}10
+ [[{{keys.alt}}]] + <>: {{operator}}100`,
+ },
+ },
+ },
+ ComponentTree: {
+ select: {
+ tooltip: '[[{{keys.alt}}]] + [[S]] Select component in the page',
+ },
+ filter: {
+ tooltip: '[[{{keys.alt}}]] + [[F]] Filter components by name',
+ },
+ refresh: {
+ tooltip: '[[{{keys.ctrl}}]] + [[{{keys.alt}}]] + [[R]] Force refresh',
+ },
+ },
+ ComponentInstance: {
+ consoleId: {
+ tooltip: 'Available as {{id}} in the console.',
+ },
+ },
+ ComponentInspector: {
+ openInEditor: {
+ tooltip: 'Open <>{{file}} in editor',
+ },
+ },
+ EventsHistory: {
+ filter: {
+ tooltip: '[[{{keys.ctrl}}]] + [[F]] To filter on components, type <> <MyComponent> or just <> <mycomp.',
+ },
+ clear: {
+ tooltip: '[[{{keys.ctrl}}]] + [[{{keys.del}}]] Clear Log',
+ },
+ startRecording: {
+ tooltip: '[[R]] Start recording',
+ },
+ stopRecording: {
+ tooltip: '[[R]] Stop recording',
+ },
+ },
+ VuexHistory: {
+ filter: {
+ tooltip: '[[{{keys.ctrl}}]] + [[F]] Filter mutations',
+ },
+ commitAll: {
+ tooltip: '[[{{keys.ctrl}}]] + [[{{keys.enter}}]] Commit all',
+ },
+ revertAll: {
+ tooltip: '[[{{keys.ctrl}}]] + [[{{keys.del}}]] Revert all',
+ },
+ startRecording: {
+ tooltip: '[[R]] Start recording',
+ },
+ stopRecording: {
+ tooltip: '[[R]] Stop recording',
+ },
+ },
+}
diff --git a/vue-devtools/packages/app-frontend/src/mixins/data-field-edit.js b/vue-devtools/packages/app-frontend/src/mixins/data-field-edit.js
new file mode 100644
index 0000000000000000000000000000000000000000..25c116be7c6ccc9db1091bb93c78e47b56004ec1
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/mixins/data-field-edit.js
@@ -0,0 +1,296 @@
+import {
+ SPECIAL_TOKENS,
+ UNDEFINED,
+ parse,
+} from '@vue-devtools/shared-utils'
+
+let currentEditedField = null
+
+function numberQuickEditMod(event) {
+ let mod = 1
+ if (event.ctrlKey || event.metaKey) {
+ mod *= 5
+ }
+ if (event.shiftKey) {
+ mod *= 10
+ }
+ if (event.altKey) {
+ mod *= 100
+ }
+ return mod
+}
+
+export default {
+ inject: {
+ InspectorInjection: {
+ default: null,
+ },
+ },
+
+ props: {
+ editable: {
+ type: Boolean,
+ default: false,
+ },
+ removable: {
+ type: Boolean,
+ default: false,
+ },
+ renamable: {
+ type: Boolean,
+ default: false,
+ },
+ },
+
+ data() {
+ return {
+ editing: false,
+ editedValue: null,
+ editedKey: null,
+ addingValue: false,
+ newField: null,
+ }
+ },
+
+ computed: {
+ cssClass() {
+ return {
+ editing: this.editing,
+ }
+ },
+
+ isEditable() {
+ if (this.InspectorInjection && !this.InspectorInjection.editable) {
+ return false
+ }
+ return this.editable
+ && !this.fieldOptions.abstract
+ && !this.fieldOptions.readOnly
+ && (
+ typeof this.field.key !== 'string'
+ || this.field.key.charAt(0) !== '$'
+ )
+ },
+
+ isValueEditable() {
+ const type = this.interpretedValueType
+ const customType = this.customField?.type
+
+ return this.isEditable
+ && (
+ type === 'null'
+ || type === 'literal'
+ || type === 'string'
+ || type === 'array'
+ || type === 'plain-object'
+ || customType === 'bigint'
+ || customType === 'date'
+ )
+ },
+
+ customField() {
+ return this.field.value?._custom
+ },
+
+ inputType() {
+ if (this.customField?.type === 'date') {
+ return 'datetime-local'
+ }
+ return 'text'
+ },
+
+ isSubfieldsEditable() {
+ return this.isEditable && (this.interpretedValueType === 'array' || this.interpretedValueType === 'plain-object')
+ },
+
+ valueValid() {
+ try {
+ if (this.customField?.skipSerialize) {
+ return true
+ }
+ parse(this.transformSpecialTokens(this.editedValue, false))
+ return true
+ }
+ catch (e) {
+ return false
+ }
+ },
+
+ duplicateKey() {
+ return this.parentField && Object.prototype.hasOwnProperty.call(this.parentField.value, this.editedKey)
+ },
+
+ keyValid() {
+ return this.editedKey && (this.editedKey === this.field.key || !this.duplicateKey)
+ },
+
+ editValid() {
+ return this.valueValid && (!this.renamable || this.keyValid)
+ },
+
+ quickEdits() {
+ if (this.isValueEditable) {
+ const value = this.field.value
+ const type = typeof value
+ if (type === 'boolean') {
+ return [
+ {
+ icon: value ? 'check_box' : 'check_box_outline_blank',
+ newValue: !value,
+ },
+ ]
+ }
+ else if (type === 'number') {
+ return [
+ {
+ icon: 'remove',
+ class: 'big',
+ title: this.quickEditNumberTooltip('-'),
+ newValue: event => value - numberQuickEditMod(event),
+ },
+ {
+ icon: 'add',
+ class: 'big',
+ title: this.quickEditNumberTooltip('+'),
+ newValue: event => value + numberQuickEditMod(event),
+ },
+ ]
+ }
+ }
+ return null
+ },
+ },
+
+ methods: {
+ openEdit(focusKey = false) {
+ if (this.isValueEditable) {
+ if (currentEditedField && currentEditedField !== this) {
+ currentEditedField.cancelEdit()
+ }
+ let valueToEdit = this.field.value
+ // Edit custom value (we don't want to edit the whole custom value data object)
+ if (this.valueType === 'custom') {
+ valueToEdit = valueToEdit._custom.value
+ }
+ if (this.customField?.skipSerialize) {
+ this.editedValue = valueToEdit
+ }
+ else {
+ this.editedValue = this.transformSpecialTokens(JSON.stringify(valueToEdit), true)
+ }
+
+ this.editedKey = this.field.key
+ this.editing = true
+ // eslint-disable-next-line ts/no-this-alias
+ currentEditedField = this
+ this.$nextTick(() => {
+ const el = this.$refs[focusKey && this.renamable ? 'keyInput' : 'editInput']
+ try {
+ el.focus()
+ // Will cause DOMEException on the datetime-local input.
+ el.setSelectionRange(0, el.value.length)
+ }
+ catch {}
+ })
+ }
+ },
+
+ cancelEdit() {
+ this.editing = false
+ this.$emit('cancel-edit')
+ currentEditedField = null
+ },
+
+ submitEdit() {
+ if (this.editValid) {
+ this.editing = false
+ let value = this.customField?.skipSerialize ? this.editedValue : this.transformSpecialTokens(this.editedValue, false)
+ // We need to send the entire custom value data object
+ if (this.valueType === 'custom') {
+ value = JSON.stringify({
+ _custom: {
+ ...this.customField,
+ value: this.customField?.skipSerialize ? value : JSON.parse(value), // Input
+ },
+ })
+ }
+ const newKey = this.editedKey !== this.field.key ? this.editedKey : undefined
+ this.sendEdit({ value, newKey })
+ this.$emit('submit-edit')
+ }
+ },
+
+ sendEdit(payload) {
+ this.$emit('edit-state', this.path, payload)
+ },
+
+ transformSpecialTokens(str, display) {
+ if (str) {
+ Object.keys(SPECIAL_TOKENS).forEach((key) => {
+ const value = JSON.stringify(SPECIAL_TOKENS[key])
+ let search
+ let replace
+ if (display) {
+ search = value
+ replace = key
+ }
+ else {
+ search = key
+ replace = value
+ }
+ str = str.replace(new RegExp(search, 'g'), replace)
+ })
+ }
+ return str
+ },
+
+ quickEdit(info, event) {
+ let newValue
+ if (typeof info.newValue === 'function') {
+ newValue = info.newValue(event)
+ }
+ else {
+ newValue = info.newValue
+ }
+ this.sendEdit({ value: JSON.stringify(newValue) })
+ },
+
+ removeField() {
+ this.sendEdit({ remove: true })
+ },
+
+ addNewValue() {
+ let key
+ if (this.interpretedValueType === 'array') {
+ key = this.field.value.length
+ }
+ else if (this.interpretedValueType === 'plain-object') {
+ let i = 1
+ // eslint-disable-next-line no-cond-assign
+ while (Object.prototype.hasOwnProperty.call(this.field.value, key = `prop${i}`)) {
+ i++
+ }
+ }
+ this.newField = { key, value: UNDEFINED }
+ this.expanded = true
+ this.addingValue = true
+ this.$nextTick(() => {
+ this.$refs.newField.openEdit(true)
+ })
+ },
+
+ containsEdition() {
+ return currentEditedField && currentEditedField.path.indexOf(this.path) === 0
+ },
+
+ cancelCurrentEdition() {
+ this.containsEdition() && currentEditedField.cancelEdit()
+ },
+
+ quickEditNumberTooltip(operator) {
+ return this.$t('DataField.quickEdit.number.tooltip', {
+ operator,
+ })
+ },
+ },
+}
diff --git a/vue-devtools/packages/app-frontend/src/mixins/entry-list.ts b/vue-devtools/packages/app-frontend/src/mixins/entry-list.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d56a4f9635d82682f2a57b8baa40749d2afac5bd
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/mixins/entry-list.ts
@@ -0,0 +1,62 @@
+/* eslint-disable eslint-comments/no-unlimited-disable */
+/* eslint-disable */
+// @ts-nocheck (Unused file)
+
+import { defineComponent } from 'vue'
+import debounce from 'lodash/debounce'
+
+export default function ({
+ indexOffset = 0,
+} = {}) {
+ // @vue/component
+ return defineComponent({
+ watch: {
+ inspectedIndex: 'refreshScrollToInspected',
+ },
+
+ mounted() {
+ this.refreshScrollToInspected()
+ },
+
+ activated() {
+ this.refreshScrollToInspected()
+ },
+
+ methods: {
+ refreshScrollToInspected() {
+ if (this.inspectedIndex) { this.scrollIntoInspected(this.inspectedIndex as number) }
+ },
+
+ scrollIntoInspected: debounce(async function (index) {
+ index += indexOffset
+ // Wait for defer frames (time-slicing)
+ for (let f = 0; f < 2; f++) {
+ await waitForFrame()
+ }
+ const scroller = this.$globalRefs.leftRecycleList || this.$globalRefs.leftScroll
+ if (!scroller) {
+ this.scrollIntoInspected(index)
+ return
+ }
+ const parentHeight = scroller.offsetHeight
+ const height = this.highDensity ? 22 : 34
+ const top = index * height
+ const scrollTop = scroller.scrollTop
+ if (top < scrollTop) {
+ scroller.scrollTop = top
+ }
+ else if (top + height > scrollTop + parentHeight) {
+ scroller.scrollTop = top + height - parentHeight
+ }
+ } as (this: any, index: number) => Promise, 200, {
+ leading: true,
+ }),
+ },
+ })
+}
+
+function waitForFrame() {
+ return new Promise((resolve) => {
+ requestAnimationFrame(resolve)
+ })
+}
diff --git a/vue-devtools/packages/app-frontend/src/mixins/keyboard.ts b/vue-devtools/packages/app-frontend/src/mixins/keyboard.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fd72a818a9f2e0f76499e463270317a606f8f270
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/mixins/keyboard.ts
@@ -0,0 +1,70 @@
+import { defineComponent } from 'vue'
+
+export const LEFT = 'ArrowLeft'
+export const UP = 'ArrowUp'
+export const RIGHT = 'ArrowRight'
+export const DOWN = 'ArrowDown'
+export const ENTER = 'Enter'
+export const DEL = 'Delete'
+export const BACKSPACE = 'Backspace'
+
+const activeInstances = []
+
+function processEvent(event, type) {
+ if (
+ event.target.tagName === 'INPUT'
+ || event.target.tagName === 'TEXTAREA'
+ ) {
+ return
+ }
+ const modifiers: string[] = []
+ if (event.ctrlKey || event.metaKey) {
+ modifiers.push('ctrl')
+ }
+ if (event.shiftKey) {
+ modifiers.push('shift')
+ }
+ if (event.altKey) {
+ modifiers.push('alt')
+ }
+ const info = {
+ key: event.key,
+ code: event.code,
+ modifiers: modifiers.join('+'),
+ }
+ let result = true
+ activeInstances.forEach((opt) => {
+ if (opt[type]) {
+ const r = opt[type].call(opt.vm, info)
+ if (r === false) {
+ result = false
+ }
+ }
+ })
+ if (!result) {
+ event.preventDefault()
+ }
+}
+
+document.addEventListener('keydown', (event) => {
+ processEvent(event, 'onKeyDown')
+})
+
+export default function (options) {
+ return defineComponent({
+ mounted() {
+ activeInstances.push({
+ vm: this,
+ ...options,
+ })
+ },
+ unmounted() {
+ const i = activeInstances.findIndex(
+ o => o.vm === this,
+ )
+ if (i >= 0) {
+ activeInstances.splice(i, 1)
+ }
+ },
+ })
+}
diff --git a/vue-devtools/packages/app-frontend/src/plugins/global-refs.ts b/vue-devtools/packages/app-frontend/src/plugins/global-refs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2a5ab6617443193f0451086e2ca44389c0bfdccf
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/plugins/global-refs.ts
@@ -0,0 +1,19 @@
+import type { App } from 'vue'
+
+interface Options {
+ refs: { [key: string]: any }
+}
+
+export default {
+ install(app: App, options: Options) {
+ const { refs } = options
+ const wrapper = {}
+ Object.keys(refs).forEach((key) => {
+ const get = refs[key]
+ Object.defineProperty(wrapper, key, {
+ get,
+ })
+ })
+ app.config.globalProperties.$globalRefs = wrapper
+ },
+}
diff --git a/vue-devtools/packages/app-frontend/src/plugins/i18n.ts b/vue-devtools/packages/app-frontend/src/plugins/i18n.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7fb0c0b9588c5094fbc76015c6fc9da34d8ecb7b
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/plugins/i18n.ts
@@ -0,0 +1,38 @@
+import { simpleGet } from '@vue-devtools/shared-utils'
+import type { Plugin } from 'vue'
+
+const reg = /\{\{\s*([\w.-]+)\s*\}\}/g
+
+interface StringMap { [key: string]: string | StringMap }
+interface ValuesMap { [key: string]: any }
+type Replacer = (text: string) => string
+
+let strings: StringMap
+let defaultValues: ValuesMap
+let replacer: Replacer
+
+export function translate(path: string | string[], values: ValuesMap = {}) {
+ values = Object.assign({}, defaultValues, values)
+ let text = simpleGet(strings, path)
+ text = text.replace(reg, (substring, matched) => {
+ const value = simpleGet(values, matched)
+ return typeof value !== 'undefined' ? value : substring
+ })
+ replacer && (text = replacer(text))
+ return text
+}
+
+interface Options {
+ strings: StringMap
+ defaultValues: ValuesMap
+ replacer: Replacer
+}
+
+export default {
+ install(app, options: Options) {
+ strings = options.strings || {}
+ defaultValues = options.defaultValues || {}
+ replacer = options.replacer
+ app.config.globalProperties.$t = translate
+ },
+} as Plugin
diff --git a/vue-devtools/packages/app-frontend/src/plugins/index.ts b/vue-devtools/packages/app-frontend/src/plugins/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cc8c0358fd362299f7cc309ab0df0231947fe76c
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/plugins/index.ts
@@ -0,0 +1,53 @@
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import 'vue-resize/dist/vue-resize.css'
+
+import type { App } from 'vue'
+import VueVirtualScroller from 'vue-virtual-scroller'
+import { keys } from '@vue-devtools/shared-utils'
+import VueSafeTeleport from 'vue-safe-teleport'
+import VueResize from 'vue-resize'
+import VueUi, { generateHtmlIcon } from '../features/ui'
+import VI18n from './i18n'
+import Responsive from './responsive'
+import GlobalRefs from './global-refs'
+
+export function setupPlugins(app: App) {
+ app.use(VueSafeTeleport)
+ app.use(VueUi)
+ app.use(VueResize)
+ app.use(VueVirtualScroller)
+
+ const currentLocale = 'en'
+ const locales = require.context('../locales')
+ const replacers = [
+ { reg: //g, replace: '' },
+ { reg: //g, replace: '' },
+ { reg: /<\/(input|mono)>/g, replace: '' },
+ { reg: /\[\[(\S+)\]\]/g, replace: '$1' },
+ { reg: /<<(\S+)>>/g, replace: (_, p1) => generateHtmlIcon(p1) as string },
+ ]
+
+ app.use(VI18n, {
+ strings: locales(`./${currentLocale}`).default,
+ defaultValues: {
+ keys,
+ },
+ replacer: (text: string) => {
+ for (const replacer of replacers) {
+ // @ts-expect-error meow
+ text = text.replace(replacer.reg, replacer.replace)
+ }
+ return text
+ },
+ })
+
+ app.use(Responsive)
+
+ app.use(GlobalRefs, {
+ refs: {
+ leftScroll: () => document.querySelector('.left .scroll'),
+ leftRecycleList: () => document.querySelector('.left .vue-recycle-scroller'),
+ rightScroll: () => document.querySelector('.right .scroll'),
+ },
+ })
+}
diff --git a/vue-devtools/packages/app-frontend/src/plugins/responsive.ts b/vue-devtools/packages/app-frontend/src/plugins/responsive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bc472b734cbcd32b69177fcd2d5017e74890c7f
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/plugins/responsive.ts
@@ -0,0 +1,44 @@
+import type { ComputedRef, Plugin, Ref } from 'vue'
+import { computed, inject, reactive, toRefs } from 'vue'
+
+export interface Responsive {
+ wide: ComputedRef
+ tall: ComputedRef
+ width: Ref
+ height: Ref
+}
+
+const responsiveKey = Symbol('responsive')
+
+export default {
+ install(app) {
+ function buildResponsive() {
+ const data = reactive({
+ width: window.innerWidth,
+ height: window.innerHeight,
+ })
+
+ const wide = computed(() => data.width >= 1050)
+ const tall = computed(() => data.height >= 350)
+
+ return {
+ ...toRefs(data),
+ wide,
+ tall,
+ }
+ }
+
+ const responsive = buildResponsive()
+
+ app.config.globalProperties.$responsive = responsive
+
+ app.provide(responsiveKey, responsive)
+
+ window.addEventListener('resize', () => {
+ responsive.width.value = window.innerWidth
+ responsive.height.value = window.innerHeight
+ })
+ },
+} as Plugin
+
+export const useResponsive = () => inject(responsiveKey)
diff --git a/vue-devtools/packages/app-frontend/src/router.ts b/vue-devtools/packages/app-frontend/src/router.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3832c048c95257bae3b942602b013d339b1e4dd9
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/router.ts
@@ -0,0 +1,109 @@
+import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { BuiltinTabs, getStorage, setStorage } from '@vue-devtools/shared-utils'
+import ComponentsInspector from './features/components/ComponentsInspector.vue'
+import CustomInspector from './features/inspector/custom/CustomInspector.vue'
+import Timeline from './features/timeline/Timeline.vue'
+import Plugins from './features/plugin/Plugins.vue'
+import PluginHome from './features/plugin/PluginHome.vue'
+import PluginDetails from './features/plugin/PluginDetails.vue'
+import GlobalSettings from './features/settings/GlobalSettings.vue'
+
+const routes: RouteRecordRaw[] = [
+ {
+ path: '/',
+ redirect: {
+ // An error will be thrown if param id is not provided, provide a default value to avoid this.
+ // Ref: https://github.com/vuejs/router/issues/845
+ path: '/app/init/inspector/components',
+ },
+ },
+ {
+ path: '/app/:appId',
+ children: [
+ {
+ path: 'inspector',
+ name: 'inspector',
+ children: [
+ {
+ path: 'components/:componentId?',
+ name: 'inspector-components',
+ component: ComponentsInspector,
+ meta: {
+ tab: BuiltinTabs.COMPONENTS,
+ },
+ },
+ {
+ path: 'custom/:inspectorId',
+ name: 'custom-inspector',
+ component: CustomInspector,
+ meta: {
+ tab: (route: RouteLocationNormalized) => `custom-inspector:${route.params.inspectorId}`,
+ },
+ },
+ ],
+ },
+ {
+ path: 'timeline',
+ name: 'timeline',
+ component: Timeline,
+ meta: {
+ tab: BuiltinTabs.TIMELINE,
+ },
+ },
+ {
+ path: 'plugins',
+ component: Plugins,
+ meta: {
+ match: 'plugins',
+ tab: BuiltinTabs.PLUGINS,
+ },
+ children: [
+ {
+ path: '',
+ name: 'plugins',
+ component: PluginHome,
+ },
+ {
+ path: ':pluginId',
+ name: 'plugin-details',
+ component: PluginDetails,
+ props: true,
+ },
+ ],
+ },
+ {
+ path: 'settings',
+ name: 'global-settings',
+ component: GlobalSettings,
+ meta: {
+ tab: BuiltinTabs.SETTINGS,
+ },
+ },
+ ],
+ },
+ {
+ path: '/:pathMatch(.*)*',
+ redirect: '/',
+ },
+]
+
+const STORAGE_ROUTE = 'route'
+
+export function createRouterInstance() {
+ const router = createRouter({
+ history: createWebHashHistory('/'),
+ routes,
+ })
+
+ const previousRoute = getStorage(STORAGE_ROUTE)
+ if (previousRoute) {
+ router.push(previousRoute)
+ }
+
+ router.afterEach((to) => {
+ setStorage(STORAGE_ROUTE, to.fullPath)
+ })
+
+ return router
+}
diff --git a/vue-devtools/packages/app-frontend/src/shims-global.d.ts b/vue-devtools/packages/app-frontend/src/shims-global.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..57956fb0d686bcf4dfcdba38c75ab08b822b9df2
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/shims-global.d.ts
@@ -0,0 +1,2 @@
+// @TODO remove
+declare const browser: any
diff --git a/vue-devtools/packages/app-frontend/src/shims-vue.d.ts b/vue-devtools/packages/app-frontend/src/shims-vue.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0cf4e3d9a2ade0423032e89c50b96f9fb64b2d2c
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+ import type { defineComponent } from 'vue'
+
+ export default ReturnType
+}
diff --git a/vue-devtools/packages/app-frontend/src/types/vue.d.ts b/vue-devtools/packages/app-frontend/src/types/vue.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ae7fb8b150e62be405be7bb1687ede83b85b2cbd
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/types/vue.d.ts
@@ -0,0 +1,22 @@
+import type {
+ SharedData,
+ keys,
+} from '@vue-devtools/shared-utils'
+
+import type {
+ Responsive,
+} from '@front/plugins/responsive'
+
+declare module '@vue/runtime-core' {
+ interface ComponentCustomProperties {
+ $t: (string, values?: Record) => string
+ $responsive: Responsive
+ $shared: typeof SharedData
+ $isChrome: boolean
+ $isFirefox: boolean
+ $isWindows: boolean
+ $isMac: boolean
+ $isLinux: boolean
+ $keys: typeof keys
+ }
+}
diff --git a/vue-devtools/packages/app-frontend/src/util/color.ts b/vue-devtools/packages/app-frontend/src/util/color.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7d39924f8d9668cfb0d7e5b71ed357a2a6024fa4
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/util/color.ts
@@ -0,0 +1,27 @@
+import tinycolor from 'tinycolor2'
+
+export function toStrHex(color: number) {
+ return color.toString(16).padStart(6, '0')
+}
+
+export function dimColor(color: number, dark: boolean, amount = 20) {
+ let c = tinycolor(toStrHex(color))
+ if (dark) {
+ c = c.darken(amount)
+ }
+ else {
+ c = c.lighten(amount)
+ }
+ return Number.parseInt(`0x${c.toHex()}`)
+}
+
+export function boostColor(color: number, dark: boolean, amount = 10) {
+ let c = tinycolor(toStrHex(color))
+ if (dark) {
+ c = c.lighten(amount)
+ }
+ else {
+ c = c.darken(amount)
+ }
+ return Number.parseInt(`0x${c.toHex()}`)
+}
diff --git a/vue-devtools/packages/app-frontend/src/util/defer.ts b/vue-devtools/packages/app-frontend/src/util/defer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..74daac853440a02ed3cfdd935e9a64608fc9e6ab
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/util/defer.ts
@@ -0,0 +1,30 @@
+import { onMounted, ref } from 'vue'
+
+export function useDefer(count = 10) {
+ const displayPriority = ref(0)
+
+ function step() {
+ requestAnimationFrame(() => {
+ displayPriority.value++
+ if (displayPriority.value < count) {
+ step()
+ }
+ })
+ }
+
+ function runDisplayPriority() {
+ step()
+ }
+
+ function defer(priority) {
+ return displayPriority.value >= priority
+ }
+
+ onMounted(() => {
+ runDisplayPriority()
+ })
+
+ return {
+ defer,
+ }
+}
diff --git a/vue-devtools/packages/app-frontend/src/util/fonts.ts b/vue-devtools/packages/app-frontend/src/util/fonts.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e6e5550213c92a0220108699de592d8e8b002e93
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/util/fonts.ts
@@ -0,0 +1,49 @@
+import { ref } from 'vue'
+import * as PIXI from 'pixi.js-legacy'
+
+let installedFonts = false
+
+export async function installFonts() {
+ if (installedFonts) {
+ return
+ }
+
+ try {
+ await document.fonts.load('10px "Roboto Mono"')
+ }
+ catch (e) {
+ console.error(e)
+ }
+
+ PIXI.BitmapFont.from('roboto-black', {
+ fontFamily: 'Roboto Mono',
+ fontSize: 9,
+ fill: '#000000',
+ }, {
+ resolution: window.devicePixelRatio,
+ })
+
+ PIXI.BitmapFont.from('roboto-white', {
+ fontFamily: 'Roboto Mono',
+ fontSize: 9,
+ fill: '#ffffff',
+ }, {
+ resolution: window.devicePixelRatio,
+ })
+
+ installedFonts = true
+}
+
+export function useFonts() {
+ const loaded = ref(installedFonts)
+
+ async function _load() {
+ await installFonts()
+ loaded.value = true
+ }
+ _load()
+
+ return {
+ loaded,
+ }
+}
diff --git a/vue-devtools/packages/app-frontend/src/util/format/index.ts b/vue-devtools/packages/app-frontend/src/util/format/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4f58395eccff7637f50d0b702fef56631d726f0f
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/util/format/index.ts
@@ -0,0 +1,2 @@
+export * from './time'
+export * from './value'
diff --git a/vue-devtools/packages/app-frontend/src/util/format/time.ts b/vue-devtools/packages/app-frontend/src/util/format/time.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d86fae40d572fc50417df2c2cf9b09086aa0ef31
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/util/format/time.ts
@@ -0,0 +1,6 @@
+export type TimeFormat = 'ms' | 'default'
+
+export function formatTime(timestamp: string | number | Date, format?: TimeFormat) {
+ const date = new Date(timestamp)
+ return `${date.toString().match(/\d\d:\d\d:\d\d/)[0]}${format === 'ms' ? `.${String(date.getMilliseconds()).padStart(3, '0')}` : ''}`
+}
diff --git a/vue-devtools/packages/app-frontend/src/util/format/value.ts b/vue-devtools/packages/app-frontend/src/util/format/value.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b6cf670053cc79b6560927e3fe203ea89344b689
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/util/format/value.ts
@@ -0,0 +1,102 @@
+import {
+ INFINITY,
+ NAN,
+ NEGATIVE_INFINITY,
+ UNDEFINED,
+ escape,
+ isPlainObject,
+ specialTokenToString,
+} from '@vue-devtools/shared-utils'
+
+const rawTypeRE = /^\[object (\w+)\]$/
+const specialTypeRE = /^\[native (\w+) (.*?)(?:<>[.\s]*)?\]$/
+
+export function valueType(value, raw = true) {
+ const type = typeof value
+ if (value == null || value === UNDEFINED) {
+ return 'null'
+ }
+ else if (
+ type === 'boolean'
+ || type === 'number'
+ || value === INFINITY
+ || value === NEGATIVE_INFINITY
+ || value === NAN
+ ) {
+ return 'literal'
+ }
+ else if (value?._custom) {
+ if ((raw || value._custom.display != null)) {
+ return 'custom'
+ }
+ else {
+ return valueType(value._custom.value)
+ }
+ }
+ else if (type === 'string') {
+ const typeMatch = specialTypeRE.exec(value)
+ if (typeMatch) {
+ const [, type] = typeMatch
+ return `native ${type}`
+ }
+ else {
+ return 'string'
+ }
+ }
+ else if (Array.isArray(value) || (value?._isArray)) {
+ return 'array'
+ }
+ else if (isPlainObject(value)) {
+ return 'plain-object'
+ }
+ else {
+ return 'unknown'
+ }
+}
+
+export function formattedValue(value, quotes = true) {
+ const type = valueType(value, false)
+ if (type !== 'custom' && value?._custom) {
+ value = value._custom.value
+ }
+ const result = specialTokenToString(value)
+ if (result) {
+ return result
+ }
+ else if (type === 'custom') {
+ return value._custom.display
+ }
+ else if (type === 'array') {
+ return `Array[${value.length}]`
+ }
+ else if (type === 'plain-object') {
+ return `Object${Object.keys(value).length ? '' : ' (empty)'}`
+ }
+ else if (type.includes('native')) {
+ return escape(specialTypeRE.exec(value)[2])
+ }
+ else if (typeof value === 'string') {
+ const typeMatch = value.match(rawTypeRE)
+ if (typeMatch) {
+ value = escape(typeMatch[1])
+ }
+ else if (quotes) {
+ value = `"${escape(value)}"`
+ }
+ else {
+ value = escape(value)
+ }
+ value = value.replace(/ /g, ' ')
+ .replace(/\n/g, '\\n')
+ }
+ return value
+}
+
+export function valueDetails(value: string) {
+ const matched = specialTypeRE.exec(value)
+ if (matched) {
+ const [,,,, param] = matched
+ return param
+ }
+ return null
+}
diff --git a/vue-devtools/packages/app-frontend/src/util/keyboard.ts b/vue-devtools/packages/app-frontend/src/util/keyboard.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cb7f28744ee0c2ade228f0981aa9b06d521fa342
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/util/keyboard.ts
@@ -0,0 +1,37 @@
+import { onMounted, onUnmounted } from 'vue'
+
+type KeyboardHandler = (event: KeyboardEvent) => boolean | void | Promise
+
+function handleKeyboard(type: 'keyup' | 'keydown', cb: KeyboardHandler, force: boolean) {
+ function handler(event: KeyboardEvent) {
+ if (!force && (
+ typeof HTMLElement !== 'undefined' && event.target instanceof HTMLElement && (
+ event.target.tagName === 'INPUT'
+ || event.target.tagName === 'TEXTAREA'
+ )
+ )) {
+ return
+ }
+
+ const result = cb(event)
+ if (result === false) {
+ event.preventDefault()
+ }
+ }
+
+ onMounted(() => {
+ document.addEventListener(type, handler)
+ })
+
+ onUnmounted(() => {
+ document.removeEventListener(type, handler)
+ })
+}
+
+export function onKeyUp(cb: KeyboardHandler, force = false) {
+ handleKeyboard('keyup', cb, force)
+}
+
+export function onKeyDown(cb: KeyboardHandler, force = false) {
+ handleKeyboard('keydown', cb, force)
+}
diff --git a/vue-devtools/packages/app-frontend/src/util/queue.ts b/vue-devtools/packages/app-frontend/src/util/queue.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3fd4238b25051ea72b5f0b76039122fa769b074e
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/util/queue.ts
@@ -0,0 +1,48 @@
+export class Queue {
+ private existsMap: Map = new Map()
+ private firstItem: QueueItem | null = null
+ private lastItem: QueueItem | null = null
+
+ add(value: T) {
+ if (!this.existsMap.has(value)) {
+ this.existsMap.set(value, true)
+ const item = {
+ current: value,
+ next: null,
+ }
+ if (!this.firstItem) {
+ this.firstItem = item
+ }
+ if (this.lastItem) {
+ this.lastItem.next = item
+ }
+ this.lastItem = item
+ }
+ }
+
+ shift(): T | null {
+ if (this.firstItem) {
+ const item = this.firstItem
+ this.firstItem = item.next
+ if (!this.firstItem) {
+ this.lastItem = null
+ }
+ this.existsMap.delete(item.current)
+ return item.current
+ }
+ return null
+ }
+
+ isEmpty() {
+ return !this.firstItem
+ }
+
+ has(value: T) {
+ return this.existsMap.has(value)
+ }
+}
+
+interface QueueItem {
+ current: T
+ next: QueueItem | null
+}
diff --git a/vue-devtools/packages/app-frontend/src/util/reactivity.ts b/vue-devtools/packages/app-frontend/src/util/reactivity.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e80d07a85c5115154bc2c2244225d383871914ba
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/util/reactivity.ts
@@ -0,0 +1,39 @@
+import type { Ref } from 'vue'
+import { watch } from 'vue'
+import { getStorage, setStorage } from '@vue-devtools/shared-utils'
+
+export function nonReactive(ref: Ref) {
+ const holder = {
+ value: ref.value,
+ }
+
+ watch(ref, (value) => {
+ holder.value = value
+ }, {
+ flush: 'sync',
+ })
+
+ return holder
+}
+
+export function addNonReactiveProperties(target: T, props: Partial) {
+ for (const key in props) {
+ Object.defineProperty(target, key, {
+ value: props[key],
+ writable: true,
+ enumerable: true,
+ configurable: false,
+ })
+ }
+}
+
+export function useSavedRef(ref: Ref, storageKey: string) {
+ const savedValue = getStorage(storageKey)
+ if (savedValue != null) {
+ ref.value = savedValue
+ }
+
+ watch(ref, (value) => {
+ setStorage(storageKey, value)
+ })
+}
diff --git a/vue-devtools/packages/app-frontend/src/util/shared-data.ts b/vue-devtools/packages/app-frontend/src/util/shared-data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b708f35f39466f6cae1f85c1e1b78f084049a48
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/util/shared-data.ts
@@ -0,0 +1,10 @@
+import { onUnmounted } from 'vue'
+import { watchSharedData } from '@vue-devtools/shared-utils'
+
+export function onSharedDataChange(prop, handler) {
+ const off = watchSharedData(prop, handler)
+
+ onUnmounted(() => {
+ off()
+ })
+}
diff --git a/vue-devtools/packages/app-frontend/src/util/theme.ts b/vue-devtools/packages/app-frontend/src/util/theme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b40ba1b7c50031a0802114a0c20b5fc0c09a5c2a
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/util/theme.ts
@@ -0,0 +1,9 @@
+import { computed, ref } from 'vue'
+
+export const darkMode = ref(false)
+
+export function useDarkMode() {
+ return {
+ darkMode: computed(() => darkMode.value),
+ }
+}
diff --git a/vue-devtools/packages/app-frontend/src/util/time.ts b/vue-devtools/packages/app-frontend/src/util/time.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a0015f530d033737137e452507c73785bde6bc82
--- /dev/null
+++ b/vue-devtools/packages/app-frontend/src/util/time.ts
@@ -0,0 +1,17 @@
+import type { Ref } from 'vue'
+import { computed, ref } from 'vue'
+
+export const reactiveNow = ref(Date.now())
+
+setInterval(() => {
+ reactiveNow.value = Date.now()
+}, 100)
+
+export function useTimeAgo(time: Ref) {
+ return {
+ timeAgo: computed(() => {
+ const diff = reactiveNow.value - time.value
+ return `${Math.round(diff / 1000)}s ago`
+ }),
+ }
+}
diff --git a/vue-devtools/packages/build-tools/package.json b/vue-devtools/packages/build-tools/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..b239aeea406561b406dfd4d3c7c22c6f067ab6e2
--- /dev/null
+++ b/vue-devtools/packages/build-tools/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "@vue-devtools/build-tools",
+ "version": "0.0.0",
+ "private": true,
+ "main": "src/index.js",
+ "dependencies": {
+ "@babel/core": "^7.16.0",
+ "@babel/preset-env": "^7.16.4",
+ "@vue/compiler-sfc": "^3.3.4",
+ "babel-loader": "^8.2.3",
+ "css-loader": "^5.2.4",
+ "esbuild": "^0.11.20",
+ "esbuild-loader": "^2.13.0",
+ "friendly-errors-webpack-plugin": "^1.7.0",
+ "monaco-editor-webpack-plugin": "^3.1.0",
+ "path-browserify": "^1.0.1",
+ "postcss-loader": "^5.2.0",
+ "style-resources-loader": "^1.2.1",
+ "stylus": "^0.54.5",
+ "stylus-loader": "^5.0.0",
+ "terser-webpack-plugin": "^5.1.1",
+ "vue-loader": "^17.2.2",
+ "webpack": "^5.90.1",
+ "webpack-merge": "^5.10.0"
+ }
+}
diff --git a/vue-devtools/packages/build-tools/src/createConfig.js b/vue-devtools/packages/build-tools/src/createConfig.js
new file mode 100644
index 0000000000000000000000000000000000000000..92652e4a0b14475e3ef96e94ec77914e3dc29d6c
--- /dev/null
+++ b/vue-devtools/packages/build-tools/src/createConfig.js
@@ -0,0 +1,189 @@
+const webpack = require('webpack')
+const { mergeWithRules } = require('webpack-merge')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const { VueLoaderPlugin } = require('vue-loader')
+const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')
+
+exports.createConfig = (config, target = { chrome: 52, firefox: 48 }) => {
+ const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development'
+ // const workspace = path.basename(process.cwd())
+
+ const baseConfig = {
+ mode,
+ resolve: {
+ extensions: ['.js', '.ts', '.vue'],
+ alias: {
+ '@front': '@vue-devtools/app-frontend/src',
+ '@back': '@vue-devtools/app-backend-core/lib',
+ 'vue': require.resolve('vue/dist/vue.esm-bundler.js'),
+ },
+ // symlinks: false,
+ fallback: {
+ path: require.resolve('path-browserify'),
+ },
+ },
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ exclude: /node_modules|vue\/dist|vuex\/dist/,
+ loader: 'babel-loader',
+ },
+ {
+ test: /\.ts$/,
+ loader: 'esbuild-loader',
+ options: {
+ loader: 'ts',
+ target: 'es2015',
+ },
+ },
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ compilerOptions: {
+ preserveWhitespace: false,
+ },
+ isServerBuild: false,
+ transpileOptions: {
+ target,
+ objectAssign: 'Object.assign',
+ transforms: {
+ modules: false,
+ },
+ },
+ },
+ },
+ {
+ test: /\.(css|postcss|pcss)$/,
+ use: [
+ 'vue-style-loader',
+ 'css-loader',
+ 'postcss-loader',
+ ],
+ },
+ {
+ test: /\.styl(us)?$/,
+ use: [
+ 'vue-style-loader',
+ 'css-loader',
+ 'postcss-loader',
+ 'stylus-loader',
+ {
+ loader: 'style-resources-loader',
+ options: {
+ patterns: [
+ require.resolve('@vue-devtools/app-frontend/src/assets/style/imports.styl'),
+ ],
+ },
+ },
+ ],
+ },
+ {
+ test: /\.svg$/,
+ loader: 'svg-inline-loader',
+ exclude: /assets/,
+ },
+ {
+ test: /\.(png|woff2|ttf|svg)$/,
+ type: 'asset/inline',
+ exclude: /@akryum\/md-icons-svg\/svg/,
+ },
+ ],
+ },
+ performance: {
+ hints: false,
+ },
+ plugins: [
+ new VueLoaderPlugin(),
+ ...(process.env.VUE_DEVTOOL_TEST ? [] : [new FriendlyErrorsPlugin()]),
+ new webpack.DefinePlugin({
+ 'process.env.RELEASE_CHANNEL': JSON.stringify(process.env.RELEASE_CHANNEL || 'stable'),
+ '__VUE_OPTIONS_API__': true,
+ '__VUE_PROD_DEVTOOLS__': true,
+ }),
+ new MonacoEditorPlugin({
+ // https://github.com/Microsoft/monaco-editor-webpack-plugin#options
+ languages: ['javascript'],
+ }),
+ ],
+ devtool: 'eval-source-map',
+ devServer: {
+ port: process.env.PORT,
+ },
+ stats: {
+ colors: true,
+ },
+ // cache: {
+ // type: 'filesystem',
+ // cacheDirectory: path.resolve(process.cwd(), 'node_modules/.cache/webpack'),
+ // name: `${workspace}-${mode}`
+ // },
+ snapshot: {
+ managedPaths: [],
+ },
+ }
+
+ if (process.env.NODE_ENV === 'production') {
+ const TerserPlugin = require('terser-webpack-plugin')
+ baseConfig.plugins.push(
+ new webpack.DefinePlugin({
+ 'process.env.NODE_ENV': '"production"',
+ }),
+ )
+ baseConfig.optimization = {
+ minimizer: [
+ new TerserPlugin({
+ exclude: /backend/,
+ terserOptions: {
+ compress: {
+ // turn off flags with small gains to speed up minification
+ arrows: false,
+ collapse_vars: false,
+ comparisons: false,
+ computed_props: false,
+ hoist_funs: false,
+ hoist_props: false,
+ hoist_vars: false,
+ inline: false,
+ loops: false,
+ negate_iife: false,
+ properties: false,
+ reduce_funcs: false,
+ reduce_vars: false,
+ switches: false,
+ toplevel: false,
+ typeofs: false,
+
+ // a few flags with noticable gains/speed ratio
+ // numbers based on out of the box vendor bundle
+ booleans: true,
+ if_return: true,
+ sequences: true,
+ unused: true,
+
+ // required features to drop conditional branches
+ conditionals: true,
+ dead_code: true,
+ evaluate: true,
+ },
+ mangle: {
+ safari10: true,
+ },
+ },
+ parallel: false,
+ }),
+ ],
+ }
+ }
+
+ return mergeWithRules({
+ module: {
+ rules: {
+ test: 'match',
+ loader: 'replace',
+ options: 'merge',
+ },
+ },
+ })(baseConfig, config)
+}
diff --git a/vue-devtools/packages/build-tools/src/index.js b/vue-devtools/packages/build-tools/src/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..58a59684cd2c8979b6ec20dc15c6a589bfffd84f
--- /dev/null
+++ b/vue-devtools/packages/build-tools/src/index.js
@@ -0,0 +1,3 @@
+Object.assign(module.exports, {
+ ...require('./createConfig'),
+})
diff --git a/vue-devtools/packages/docs/package.json b/vue-devtools/packages/docs/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..ea755e0df30cdede9e1ecdaa5ee02dc2d21af88e
--- /dev/null
+++ b/vue-devtools/packages/docs/package.json
@@ -0,0 +1,8 @@
+{
+ "name": "@vue-devtools/docs",
+ "version": "0.0.0",
+ "devDependencies": {
+ "vitepress": "^0.22.3",
+ "vue": "^3.2.0"
+ }
+}
diff --git a/vue-devtools/packages/docs/postcss.config.js b/vue-devtools/packages/docs/postcss.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..1c6b09ca542b6369937127241873f41e0f93f8ec
--- /dev/null
+++ b/vue-devtools/packages/docs/postcss.config.js
@@ -0,0 +1,9 @@
+const path = require('node:path')
+
+module.exports = {
+ plugins: [
+ require('autoprefixer'),
+ require('tailwindcss')(path.resolve(__dirname, './tailwind.config.cjs')),
+ require('postcss-nested'),
+ ],
+}
diff --git a/vue-devtools/packages/docs/src/.vitepress/.gitignore b/vue-devtools/packages/docs/src/.vitepress/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..849ddff3b7ec917b5f4563e9a6d3ea63ea512a70
--- /dev/null
+++ b/vue-devtools/packages/docs/src/.vitepress/.gitignore
@@ -0,0 +1 @@
+dist/
diff --git a/vue-devtools/packages/docs/src/.vitepress/config.js b/vue-devtools/packages/docs/src/.vitepress/config.js
new file mode 100644
index 0000000000000000000000000000000000000000..e834b2677de8ff845d19e6788892fcd34d45d799
--- /dev/null
+++ b/vue-devtools/packages/docs/src/.vitepress/config.js
@@ -0,0 +1,71 @@
+import { defineConfig } from 'vitepress'
+
+export default defineConfig({
+ title: 'Vue Devtools',
+ description: 'Browser devtools extension for debugging Vue.js applications',
+
+ head: [
+ ['link', { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }],
+ ['link', { rel: 'icon', type: 'image/png', href: '/favicon.png' }],
+ ],
+
+ themeConfig: {
+ repo: 'vuejs/devtools',
+ logo: '/logo-header.svg',
+ docsDir: 'packages/docs/src',
+ docsBranch: 'main',
+ editLinks: true,
+ editLinkText: 'Suggest changes to this page',
+
+ algolia: {
+ appId: 'CFRGFZ1IGJ',
+ apiKey: 'cf7b3ddb7b310746c27c1a71ff7d4fe2',
+ indexName: 'devtools-vuejs',
+ },
+
+ nav: [
+ { text: 'Guide', link: '/guide/installation' },
+ {
+ text: 'Plugins',
+ items: [
+ { text: 'Plugin development guide', link: '/plugin/plugins-guide' },
+ { text: 'API Reference', link: '/plugin/api-reference' },
+ ],
+ },
+ {
+ text: '💚️ Sponsor',
+ link: 'https://github.com/sponsors/Akryum',
+ },
+ ],
+
+ sidebar: {
+ '/guide/': [
+ {
+ text: 'Guide',
+ children: [
+ {
+ text: 'Installation',
+ link: '/guide/installation',
+ },
+ {
+ text: 'Open in editor',
+ link: '/guide/open-in-editor',
+ },
+ {
+ text: 'F.A.Q.',
+ link: '/guide/faq',
+ },
+ {
+ text: 'Contributing',
+ link: '/guide/contributing',
+ },
+ {
+ text: 'Devtools performance',
+ link: '/guide/devtools-perf',
+ },
+ ],
+ },
+ ],
+ },
+ },
+})
diff --git a/vue-devtools/packages/docs/src/.vitepress/theme/custom.css b/vue-devtools/packages/docs/src/.vitepress/theme/custom.css
new file mode 100644
index 0000000000000000000000000000000000000000..cb84e107ad5e2a53742ff961fa559936d1027a4c
--- /dev/null
+++ b/vue-devtools/packages/docs/src/.vitepress/theme/custom.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.nav-bar-title .logo {
+ margin-top: 6px;
+}
+
+.home-hero {
+ figure {
+ .image {
+ max-height: 100px;
+ }
+ }
+}
diff --git a/vue-devtools/packages/docs/src/.vitepress/theme/index.js b/vue-devtools/packages/docs/src/.vitepress/theme/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..42fe9a936179c5c200dcb89b4c99225794e4c920
--- /dev/null
+++ b/vue-devtools/packages/docs/src/.vitepress/theme/index.js
@@ -0,0 +1,4 @@
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+
+export default DefaultTheme
diff --git a/vue-devtools/packages/docs/src/assets/chrome-settings1.png b/vue-devtools/packages/docs/src/assets/chrome-settings1.png
new file mode 100644
index 0000000000000000000000000000000000000000..9aa644cb1d921db4035e03afefdde7a4fd776313
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/chrome-settings1.png differ
diff --git a/vue-devtools/packages/docs/src/assets/chrome-settings2.png b/vue-devtools/packages/docs/src/assets/chrome-settings2.png
new file mode 100644
index 0000000000000000000000000000000000000000..43fbea14fa71a7ec0e4894e319c779198b4d58db
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/chrome-settings2.png differ
diff --git a/vue-devtools/packages/docs/src/assets/dev-shell-profile-export.png b/vue-devtools/packages/docs/src/assets/dev-shell-profile-export.png
new file mode 100644
index 0000000000000000000000000000000000000000..57567d5a58328eb0a00b3f113b18a28166c321f5
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/dev-shell-profile-export.png differ
diff --git a/vue-devtools/packages/docs/src/assets/dev-shell-profile-start.png b/vue-devtools/packages/docs/src/assets/dev-shell-profile-start.png
new file mode 100644
index 0000000000000000000000000000000000000000..5cef3a9de523210ad455d8cb70725a069f6c575f
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/dev-shell-profile-start.png differ
diff --git a/vue-devtools/packages/docs/src/assets/dev-shell-profile-stop.png b/vue-devtools/packages/docs/src/assets/dev-shell-profile-stop.png
new file mode 100644
index 0000000000000000000000000000000000000000..dd07f1ebe571f142bb5d375d05e91423e6db2355
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/dev-shell-profile-stop.png differ
diff --git a/vue-devtools/packages/docs/src/assets/dev-shell-url.png b/vue-devtools/packages/docs/src/assets/dev-shell-url.png
new file mode 100644
index 0000000000000000000000000000000000000000..8df2b0b11e54425431dd7c38bac83aa4b180f0df
--- /dev/null
+++ b/vue-devtools/packages/docs/src/assets/dev-shell-url.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:788541a1596d5a1637fe4a37cd63773536f942d6ae55d3e8169f38f6862bad9b
+size 105737
diff --git a/vue-devtools/packages/docs/src/assets/devtools-version.png b/vue-devtools/packages/docs/src/assets/devtools-version.png
new file mode 100644
index 0000000000000000000000000000000000000000..bda35c25812c5ab123520f7c075cda95eaf089ab
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/devtools-version.png differ
diff --git a/vue-devtools/packages/docs/src/assets/edge-settings1.png b/vue-devtools/packages/docs/src/assets/edge-settings1.png
new file mode 100644
index 0000000000000000000000000000000000000000..bbe6180535ffc796a7b8a2fc4e877cf877b7e5cc
--- /dev/null
+++ b/vue-devtools/packages/docs/src/assets/edge-settings1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d01a761a3a9ac46b0afe63e5eb2ff0aeabe3ef4eb8be41204100d1963ee6c5b1
+size 124760
diff --git a/vue-devtools/packages/docs/src/assets/edge-settings2.png b/vue-devtools/packages/docs/src/assets/edge-settings2.png
new file mode 100644
index 0000000000000000000000000000000000000000..d064b9b9c9d1beeb9b4bc8998c19f1547caa7a5d
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/edge-settings2.png differ
diff --git a/vue-devtools/packages/docs/src/assets/firefox-settings1.png b/vue-devtools/packages/docs/src/assets/firefox-settings1.png
new file mode 100644
index 0000000000000000000000000000000000000000..9247d297ccacebefe2ba6b62cd0e82f1a12cd687
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/firefox-settings1.png differ
diff --git a/vue-devtools/packages/docs/src/assets/firefox-settings2.png b/vue-devtools/packages/docs/src/assets/firefox-settings2.png
new file mode 100644
index 0000000000000000000000000000000000000000..73c27f82e1e1cc5b31c117ab744b307aee1880a9
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/firefox-settings2.png differ
diff --git a/vue-devtools/packages/docs/src/assets/firefox-settings3.png b/vue-devtools/packages/docs/src/assets/firefox-settings3.png
new file mode 100644
index 0000000000000000000000000000000000000000..884f8d0c572308030c57f2a133e624c3d991aa0b
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/firefox-settings3.png differ
diff --git a/vue-devtools/packages/docs/src/assets/open-in-editor.png b/vue-devtools/packages/docs/src/assets/open-in-editor.png
new file mode 100644
index 0000000000000000000000000000000000000000..299a386e5c41ce514187def8c08122a841ab72cd
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/open-in-editor.png differ
diff --git a/vue-devtools/packages/docs/src/assets/plugin-components-tags.png b/vue-devtools/packages/docs/src/assets/plugin-components-tags.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef88ec1a746018c96d8f175989f366b5289882ea
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/plugin-components-tags.png differ
diff --git a/vue-devtools/packages/docs/src/assets/plugin-custom-inspector-menu.png b/vue-devtools/packages/docs/src/assets/plugin-custom-inspector-menu.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ea6eaaa3489ee26e54c392e7d3f82ecd8625a5b
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/plugin-custom-inspector-menu.png differ
diff --git a/vue-devtools/packages/docs/src/assets/plugin-custom-inspector-state.png b/vue-devtools/packages/docs/src/assets/plugin-custom-inspector-state.png
new file mode 100644
index 0000000000000000000000000000000000000000..b384724c7915f3666feb7899a1d91a09b9e328dc
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/plugin-custom-inspector-state.png differ
diff --git a/vue-devtools/packages/docs/src/assets/plugin-custom-inspector-tree.png b/vue-devtools/packages/docs/src/assets/plugin-custom-inspector-tree.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b52661bf779222d80225a4adf59dfe1688b45be
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/plugin-custom-inspector-tree.png differ
diff --git a/vue-devtools/packages/docs/src/assets/plugin-settings.png b/vue-devtools/packages/docs/src/assets/plugin-settings.png
new file mode 100644
index 0000000000000000000000000000000000000000..13fd41287879bc58b353cd83281d7962424e2d54
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/plugin-settings.png differ
diff --git a/vue-devtools/packages/docs/src/assets/plugin-timeline-example1.png b/vue-devtools/packages/docs/src/assets/plugin-timeline-example1.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae8d7aef93d34264d1337bbf9d2ec2a77a54fdeb
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/plugin-timeline-example1.png differ
diff --git a/vue-devtools/packages/docs/src/assets/plugin-timeline-example2.png b/vue-devtools/packages/docs/src/assets/plugin-timeline-example2.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a607524e7d1737e5afee77d8568ba9ead90f0db
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/plugin-timeline-example2.png differ
diff --git a/vue-devtools/packages/docs/src/assets/plugin-timeline-group-state.png b/vue-devtools/packages/docs/src/assets/plugin-timeline-group-state.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c35c879b69f68153afa69cf3442cd62a0d966e3
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/plugin-timeline-group-state.png differ
diff --git a/vue-devtools/packages/docs/src/assets/plugin-timeline-group.png b/vue-devtools/packages/docs/src/assets/plugin-timeline-group.png
new file mode 100644
index 0000000000000000000000000000000000000000..75650332026b913219f6d8f30852fcd15dcd473d
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/plugin-timeline-group.png differ
diff --git a/vue-devtools/packages/docs/src/assets/plugin-timeline-layer.png b/vue-devtools/packages/docs/src/assets/plugin-timeline-layer.png
new file mode 100644
index 0000000000000000000000000000000000000000..b942bb7d7b011f98ae1eb5778d13260275cb9dd4
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/plugin-timeline-layer.png differ
diff --git a/vue-devtools/packages/docs/src/assets/pluygin-components-state.png b/vue-devtools/packages/docs/src/assets/pluygin-components-state.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6a9c81997d8856f6e38537e86095d0892b7cb0d
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/pluygin-components-state.png differ
diff --git a/vue-devtools/packages/docs/src/assets/vue-devtools-architecture.drawio b/vue-devtools/packages/docs/src/assets/vue-devtools-architecture.drawio
new file mode 100644
index 0000000000000000000000000000000000000000..72b15ad7207089d07b8b05bc9ec01aed34ab4473
--- /dev/null
+++ b/vue-devtools/packages/docs/src/assets/vue-devtools-architecture.drawio
@@ -0,0 +1 @@
+7V1Zb9s4EP41fmwgibr8GDt2W2ALBG33aN8YiZa5lUVBohN7f/2Stm7SsZxKot0qKFCROjnfzDfD4eEJmG927xMYrz8RH4UTQ/N3E/AwMQwd6Br7j9fsjzUOcI4VQYL97KKy4gv+D2WV2X3BFvsorV1ICQkpjuuVHoki5NFaHUwS8lK/bEXC+ltjGCCh4osHQ7H2b+zT9bHWNZyy/gPCwTp/s25Pj2c2ML84a0m6hj55qVWhHV2SiGaf+Jk8ETqxFmtKeePuJ8aS/VvxC+4CQoIQwRindx7ZsGovZZcsV3CDQy7Z473soWAxAfOEsMLhaLObo5Ajkgv7+OblibNFaxMU0TY3fDZWBtY/36f0E1i8Xzx//77X3gHz+JhnGG4zMWYioPtcrgnZRj7iT9EnYPayxhR9iaHHz74wTWJ1a7oJs9MpTciPQv6skTMulWXe+L9Q4sMIZtVzEpLk8BJgaXPXcXk9DsO8PiIRe8vMh+m6eD8vPEJKURIdagytfG3leYu5PjNMdiZrH0oo2p2UnF7gwawDkQ2iyZ5dkt1gaJkS5IbhZOWXUs1ArijrqopNs0qY6U1QPLsEih1kWF2Am6Orwk2QtKbN7t1FR5I2GpKeipI2XJmkrb4kDYzRQi62ELuthTi9waaNsF0MW1E+B5tp9oWb+2vymlkXNJDxminjtd4M5HocyHJmA2faj6CL8llBa30JuggqS8EinwWuWZEkdE0CEsFwUdbOStFrrFRe8wchcSbwfxGl+ywKh1tK6nCgHab/8NvvrKz0rXLmYZc9+VDY54WItfd4k2Hl5W/Vk+V9h1J+44VMWKM9QR2AaU6t0u64rF5XBiZask089BoGx+soTAJEXwur5MqVoBBS/Fz/ju4VRbDIv9hBh0YJBHFnfqgB1PLw9wquFU/Wtf06Dft1RfuVxX+9+aNCxa7eemtWdaFFnjbCCic4F3FCyoyN3vNuPavwQpim2MurlzjMW9qhkYNbMHIgGPljuA1wdAN2PrUd3wPd2DlwjPN2bg5o55aAy58pSljNfRwL2LB2UxkATXGLET8MccDDe4/JiT0ezLgUsQfD++zEBvv+gUNkiNd55RUbz+lJl4A+cLQ1lbC10RtbA7Vs7VTpumDoc8FWnVj1M8TaMnq60AN0yMP2LfCwYanVFGOAsPyX0RT9BA0Noyq24BpmCebNv36XrWlP0EUduexGbtaSJIuGDc3FjMVowkObsNPShG2VFuwIFvyBkB83Yb/d5SCb9msCxfYL3DFYu8h+ZwtNM0C39psP3p/3wYZSC7aV6kpVUUre75jraxmTjD6q6RLtrSqUtU/XRJVaLmdzdtBQVCX6pdZDKOYiBbFEq/Rcb/qGIr+h6qymougqVNABKlXQVTpOpE/eRnGXJYVHFTyngkq9bP6ZY1e3Hiq7uuqurtrw5/ZC5T66uno+qfWq+7pgTGxeQa+qraqo7VXln1kdjUzIbn8DdL9aPXnA74fuLddSS/dgpPsrsGGjrQ0rHZ3IF2mMfH8TuqIp5XtDjO+h9yM4qMMNkH6fMb6tmvR1cWoQBwdJkLnl+SdDT6sedP6Jo5iM3+S4a0xc8eIX53CGzll3SeCtpyKoJXBxLsKcbGImd9Zgww45Kzwl7CjgRx+jNEYeZXL7vajdAI30jepJxEDsZ834elc+wbAJ2lf41APfh2hFVbB9l6uV9BarlQZleyD32Hk41UT2EUoSqSO0MmhtRwzGBoXWFDPhaIPplUZiLdYRnsC4C7ZtLNkAlmiWshVX/WEnsu3948cROkkfyD0Pna4Pip1Iqen19oDUgtfgTNMBiu1O3EsixClF4tqWET1memYDPVMxeuIKmNHyTni8aaN/odzjid3CDUrTQ7zJ2pWmOApGIGXbjTh3Vj3wnIqB56BQWmLgKSCXrmHMD32yfQpRln2Z+ThhnX1MuOhSsuVff1nPvv26Ue3wJ/ZBuoDEbkJiSRaV5YPcNUh62yrBGh3bBQBaDXI0FJOjJTq2B/TMdyZLxz76T/TRZbtgDdpHt6YCUtc6YfJnxywLwj22uJvl8qYc7taZ7OzWR4J58jlXE7PZLWnuzHVMsWd3lSrA3BjcVy6L+QXp6fdYjbEfV3erjzt7ff5dpQYev6DUx0Imb1dRW5JGYsej3xDpxdQb+EiWJw3qN2zjfCTGHoPj9JR0K3DCw0gMK6zwjov4zduJnQq9zupLx2MsVsPNG6YYOAMJXKA3uMTM0fMWvfMLV3+VJqd+DN1ujqpIOrODunVbjNdu3O6mtvMw72jjFMHuJFMehrU7MffwjYUerKaMsrUTe9zcbmDdJaSCBUpyEMX+psOYoLhg+sZNsDFnpFMTBEC16xM3zZwz0R3mhGipl+C4j4FLVabXJZRN0wOSXNOwpucq3m/OeMMMsmKq90/PIPu1VwHme55d+SSz/DOrdLJNKd/LfpxhNpF2VpXPMHOU5sKUrBj5fWij7caWimlD7IB/xRsU4ui3Xz6smh1ckdHHAayT6DVmZigf3XfHOVGt/XJz5rfqwUdXTGYtk0Pf7FrxU5+RbI4gyX4EpqOM5ISjkf8A03HQp/xtLLD4Hw==
\ No newline at end of file
diff --git a/vue-devtools/packages/docs/src/assets/vue-devtools-architecture.png b/vue-devtools/packages/docs/src/assets/vue-devtools-architecture.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7860dec25038252bf8f6f146308fe56e1949451
Binary files /dev/null and b/vue-devtools/packages/docs/src/assets/vue-devtools-architecture.png differ
diff --git a/vue-devtools/packages/docs/src/assets/vue-devtools-architecture.svg b/vue-devtools/packages/docs/src/assets/vue-devtools-architecture.svg
new file mode 100644
index 0000000000000000000000000000000000000000..443c53e987d625e0516d802bfc61c3458da6780f
--- /dev/null
+++ b/vue-devtools/packages/docs/src/assets/vue-devtools-architecture.svg
@@ -0,0 +1,1676 @@
+
+
diff --git a/vue-devtools/packages/docs/src/components/InstallButton.vue b/vue-devtools/packages/docs/src/components/InstallButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..927635c381a900164eddb0adcaff4feaa6de181d
--- /dev/null
+++ b/vue-devtools/packages/docs/src/components/InstallButton.vue
@@ -0,0 +1,22 @@
+
+
+
+
+ ![]()
+ {{ label }}
+
+
diff --git a/vue-devtools/packages/docs/src/components/InstallButtons.vue b/vue-devtools/packages/docs/src/components/InstallButtons.vue
new file mode 100644
index 0000000000000000000000000000000000000000..78627d4532ebcad234985ed2b9df76b1d24caca9
--- /dev/null
+++ b/vue-devtools/packages/docs/src/components/InstallButtons.vue
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/docs/src/devtools-vue3.md b/vue-devtools/packages/docs/src/devtools-vue3.md
new file mode 100644
index 0000000000000000000000000000000000000000..09ae2e2c3eea4c30f1e8ba7a08a2ea5d8c596b1a
--- /dev/null
+++ b/vue-devtools/packages/docs/src/devtools-vue3.md
@@ -0,0 +1,25 @@
+# How to Setup Vue DevTools for Vue 3
+
+## Local Development
+
+```bash
+# Clone repo
+git clone git@github.com:vuejs/vue-devtools.git
+
+# Change into devtools directory
+cd vue-devtools
+
+# Checkout next branch
+git checkout next
+
+# Install dependencies
+yarn
+
+# Build TypeScript dependencies
+yarn build:watch
+
+# Start local environment
+yarn dev:shell-vue3
+```
+
+Once everything is setup, you should be able to visit `http://localhost:8090/`
diff --git a/vue-devtools/packages/docs/src/guide/contributing.md b/vue-devtools/packages/docs/src/guide/contributing.md
new file mode 100644
index 0000000000000000000000000000000000000000..bcbb83bb62f279e63667dd58e35a7c060b48fb19
--- /dev/null
+++ b/vue-devtools/packages/docs/src/guide/contributing.md
@@ -0,0 +1,98 @@
+# Contributing
+
+Hi! We are really excited that you are interested in contributing to the Vue devtools. Before submitting your contribution, please make sure to take a moment and read through the following guide.
+
+## Monorepo
+
+The repository is a monorepo with several nested packages:
+
+|Package|Description|
+|-------|-----------|
+[api](https://github.com/vuejs/devtools/tree/main/packages/api) | The public devtools API that can be installed in Vue plugins |
+[app-backend-api](https://github.com/vuejs/devtools/tree/main/packages/app-backend-api) | Abstract API to link the Public API, the core and Vue handlers |
+[app-backend-core](https://github.com/vuejs/devtools/tree/main/packages/app-backend-core) | The main logic injected in the page to interact with Vue apps |
+[app-backend-vue1](https://github.com/vuejs/devtools/tree/main/packages/app-backend-vue1) | Decoupled handlers to support Vue 1 (soon) |
+[app-backend-vue2](https://github.com/vuejs/devtools/tree/main/packages/app-backend-vue2) | Decoupled handlers to support Vue 2 |
+[app-backend-vue3](https://github.com/vuejs/devtools/tree/main/packages/app-backend-vue3) | Decoupled handlers to support Vue 3 |
+[app-frontend](https://github.com/vuejs/devtools/tree/main/packages/app-frontend) | Vue app displayed in the browser devtools pane |
+[shell-chrome](https://github.com/vuejs/devtools/tree/main/packages/shell-chrome) | Chrome/Firefox extension |
+[shell-electron](https://github.com/vuejs/devtools/tree/main/packages/shell-electron) | Electron standalone app |
+[shell-host](https://github.com/vuejs/devtools/tree/main/packages/shell-host) | Development environment |
+[shell-dev-vue2](https://github.com/vuejs/devtools/tree/main/packages/shell-dev-vue2) | Demo app for development (Vue 2) |
+[shell-dev-vue3](https://github.com/vuejs/devtools/tree/main/packages/shell-dev-vue3) | Demo app for development (Vue 3) |
+
+## Development
+
+1. Clone [this repo](https://github.com/vuejs/devtools)
+2. Run `yarn install` in the repository root to install dependencies.
+3. Run `yarn run build:watch` (compiles and watch the packages) and then `yarn run dev:vue3` (run the development shell) in two different terminals. Wait for the initial compilation in the first terminal to finish before running the second command.
+4. A plain shell with a test app will be available at `http://localhost:8090`.
+
+## Pull Request Guidelines
+
+Thank you for your code contribution! Before opening a PR, please make sure to read the following:
+
+- Checkout a topic branch from a base branch, e.g. `main`, and merge back against that branch. For example: `feat/my-new-feature`.
+
+- Please make sure that you allow maintainers to push changes to your branch when you create your PR.
+
+- If adding a new feature:
+
+
+ - Provide a convincing reason to add this feature. Ideally, you should open a suggestion issue first and have it approved before working on it.
+
+- If fixing bug:
+
+ - If you are resolving a special issue, add `(fix #xxxx[,#xxxx])` (#xxxx is the issue id) in your PR title for a better release log, e.g. `fix: update entities encoding/decoding (fix #3899)`.
+ - Provide a detailed description of the bug in the PR. Live demo preferred.
+
+
+- It's OK to have multiple small commits as you work on the PR - GitHub can automatically squash them before merging.
+
+
+
+- Commit messages must follow the [commit message convention](https://github.com/vuejs/devtools/blob/main/.github/commit-convention.md) so that changelogs can be automatically generated.
+
+## Running tests
+
+1. Run `yarn lint` to check code quality with ESLint.
+2. Run `yarn test` to run all tests. (@TODO)
+
+## Testing as Chrome addon
+
+This is useful when you want to build the extension with the source repo to get not-yet-released features.
+
+1. Clone this repo
+2. `cd devtools` the newly created folder
+3. run `yarn install`
+4. then run `yarn run build:watch` & `yarn run dev:chrome` in parallel
+5. Open the Chrome extension page (currently under `Menu` > `More Tools` > `Extensions`)
+6. Check "developer mode" on the top-right corner
+7. Click the "load unpacked" button on the left, and choose the folder: `devtools/packages/shell-chrome/` (it will have an orange disk icon)
+8. Make sure you disable all other versions of the extension
+
+## Testing as Firefox addon
+
+1. Install `web-ext`
+
+ ~~~~
+ $ yarn global add web-ext
+ ~~~~
+
+ Also, make sure `PATH` is set up. Something like this in `~/.bash_profile`:
+
+ ~~~~
+ $ PATH=$PATH:$(yarn global bin)
+ ~~~~
+
+2. Clone this repo
+3. run `yarn install`
+4. then run `yarn run build:watch` and `yarn run dev:firefox` in parallel
+5. run `yarn run:firefox`
+
+## Docs development
+
+1. Clone this repo
+2. `cd devtools` the newly created folder
+3. run `yarn install`
+4. run `docs:dev`
diff --git a/vue-devtools/packages/docs/src/guide/custom-vue2-app-scan-selector.md b/vue-devtools/packages/docs/src/guide/custom-vue2-app-scan-selector.md
new file mode 100644
index 0000000000000000000000000000000000000000..ebad25f6c420c165810c2c01b1c66222562351fc
--- /dev/null
+++ b/vue-devtools/packages/docs/src/guide/custom-vue2-app-scan-selector.md
@@ -0,0 +1,12 @@
+## Customize vue2 app scan selector
+> For example, if you are using micro-app as your micro-frontend framework, the devtools cannot find Vue2 apps in `` by default.
+
+You can set a custom selector used to scan for Vue2 apps in your project with the following code in your frontend app:
+
+```js
+if (process.env.NODE_ENV !== 'production') {
+ window.VUE_DEVTOOLS_CONFIG = {
+ customVue2ScanSelector: 'micro-app'
+ }
+}
+```
diff --git a/vue-devtools/packages/docs/src/guide/devtools-perf.md b/vue-devtools/packages/docs/src/guide/devtools-perf.md
new file mode 100644
index 0000000000000000000000000000000000000000..c3706bad1493a06e7efcedab8d42fc4d25433749
--- /dev/null
+++ b/vue-devtools/packages/docs/src/guide/devtools-perf.md
@@ -0,0 +1,83 @@
+# Profiling devtools performance
+
+If you experience performance issues while using the devtools, this guide will explain how to profile the devtools and share the result to the team.
+
+## 1. Setup environment
+
+First you need to clone and setup the devtools repository as [explained in the contributing guide](./contributing.md#development).
+
+## 2. Run Chrome with web security disabled
+
+The development shell for the devtools is a page with a development version of the devtools and an iframe mimicking the page being inspected.
+
+Normally inspecting the iframe would only work on the same domain (here `localhost`), but we can workaround this limitation by disabling web security in Chrome.
+
+```bash
+/path/to/chrome --disable-web-security --disable-site-isolation-trials --user-data-dir="temp-chrome-data"
+```
+
+::: danger
+Do not browse to any other website while using this Chrome instance, as it will disable some security features.
+:::
+
+## 3. Open dev shell
+
+Make sure you have run both the `build:watch` and the `dev:vue3` scripts as [explained in the contributing guide](./contributing.md#development).
+
+In the Chrome window, open the devtools development shell at `http://localhost:8090`.
+
+You can then change the target URL in the toolbar on top of the devtools:
+
+
+
+## 4. Create a profiling session
+
+Open the Chrome devtools and go to the Performance tab.
+
+Start a performance recording by clicking the record button:
+
+
+
+Then try to reproduce the performance issues by using your application and the devtools for 10 or 20 seconds.
+
+## 5. Export the profiling data
+
+When your are done, stop the recording by clicking the stop button:
+
+
+
+Then click the "Save profile..." button to export the profiling data:
+
+
+
+## 6. Share the profiling data
+
+Check your Vue devtools version number in the Extensions tab of Chrome:
+
+
+
+Post a new comment [here](https://github.com/vuejs/devtools/discussions/1968) with the following information:
+
+- Run `npx envinfo --system --browsers` and paste the result. Make sure is contains your OS version and Chrome version.
+- Vue Devtools version.
+- Upadload the profiling data file in the comment (you can drag and drop it in the comment box).
+
+Example:
+
+```
+ System:
+ OS: Linux 5.19 Fedora Linux 36 (Workstation Edition)
+ CPU: (24) x64 AMD Ryzen 9 3900XT 12-Core Processor
+ Memory: 34.66 GB / 62.71 GB
+ Container: Yes
+ Shell: 5.1.16 - /bin/bash
+ Browsers:
+ Chrome: 106.0.5249.103
+ Firefox: 105.0.1
+
+ Vue Devtools version: 6.4.3
+
+ (Don't forget to upload the profile data file!)
+```
+
+Thank you for your contribution!
diff --git a/vue-devtools/packages/docs/src/guide/faq.md b/vue-devtools/packages/docs/src/guide/faq.md
new file mode 100644
index 0000000000000000000000000000000000000000..e4f26b624d18aebfaaccca686c061938d41933e4
--- /dev/null
+++ b/vue-devtools/packages/docs/src/guide/faq.md
@@ -0,0 +1,49 @@
+# Frequently Asked Questions
+
+## How to use the devtools in IE/Safari or any other browser?
+
+In case your browser doesn't have our browser extension available, we made a standalone Vue devtools application.
+[Get it now!](./installation.md#standalone)
+
+## When opening an HTML file directly
+
+Fixing "Download the Vue Devtools for a better development experience" console message when working locally over `file://` protocol:
+- Google Chrome: Right click on vue-devtools icon and click "Manage Extensions" then search for vue-devtools on the extensions list. Check the "Allow access to file URLs" box.
+
+## The Vue devtools don't show up
+
+Here are some troubleshooting steps to help you if you don't the Vue devtools in your browser:
+
+- Check if you have the extension [installed](./installation.md).
+- If you are on a live website, there is a good chance it's using a production build of Vue.
+ - Use a non-minified, non-`prod` version of Vue on CDN
+ - Set the `__VUE_PROD_DEVTOOLS__` environment variable for Vue 3 when using a bundler like Webpack ([more info](https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags)).
+- Try closing the devtools pane, refreshing the page and opening the devtools pane again.
+- Try restarting the browser or the computer.
+- If you have multiple versions of the Vue devtools installed, it's recommended to disable/remove the others.
+- Try disabling other devtools extensions like React devtools.
+- Look for errors in the browser Console.
+- Update your project dependencies.
+- Even if the Vue logo in the toolbar is gray and says "Vue not detected", open your browser devtools and check if the Vue tab is showing up anyway.
+
+## The data isn't updating in the component inspector
+
+Make sure your data is used somewhere in your templates. Vue uses a lazy reactivity system for performance reasons, so the devtools could read some component data but Vue might not trigger updates on it as you would expect.
+
+You can also click on the `Force refresh` button at the top of the devtools to do a manual refresh of the component data.
+
+## A weird gray overlay is displayed on my page when I move the mouse in the timeline
+
+By default, the devtools will try to take screenshots of your application when something happens on the Timeline. But it can fail for various reasons (such as undocking the devtools pane on Chrome). In that case, you can turn the screenshots off by opening the 'More' menu on the top right of the devtools (three vertical dots).
+
+## Some package is polluting my devtools
+
+The new Vue devtools feature a powerful public API so that package authors can integrate with the devtools (for example vuex or pinia). Since great power comes with great responsibility, you can disable specific permissions of a plugin, or even turn it off entirely, by going to the 'More' menu (three vertical dots on the top right), and then 'Devtools plugins...'.
+
+## I can't open a component in my editor
+
+This feature needs some setup in your project to work correctly. See [here](./open-in-editor.md) for more information.
+
+## Something is broken in the new devtools
+
+See [installing the previous version](./installation.md#legacy) for more information.
diff --git a/vue-devtools/packages/docs/src/guide/installation.md b/vue-devtools/packages/docs/src/guide/installation.md
new file mode 100644
index 0000000000000000000000000000000000000000..0546165d89b7f15cddb65f7da3f5c7d366c624d4
--- /dev/null
+++ b/vue-devtools/packages/docs/src/guide/installation.md
@@ -0,0 +1,209 @@
+
+
+# Installation
+
+::: tip Previous version
+If you want to install the previous version of the devtools (v5), see [here](#legacy).
+:::
+
+
+
+## Chrome
+
+Install the extension on the Chrome Web Store:
+
+
+
+### Beta
+
+To install the beta version of the devtools, remove or disable any existing versions and install the extension from [here](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg).
+
+
+
+### Settings
+
+If you need to use the devtools in incognito mode or when you open an HTML file directly, you need to change the extension settings.
+
+1. Go to the extensions:
+
+
+
+2. Click on the `Details` button on the Vue.js Devtools extension.
+
+3. Make sure the relevant settings are set:
+
+
+
+## Firefox
+
+Install the extension on the Mozilla Addons website:
+
+
+
+### Beta
+
+To install or update the beta version of the devtools, remove or disable any existing versions, go to one of repository beta releases and download the `xpi` file.
+
+
+
+### Settings
+
+If you need to use the devtools in incognito mode, you need to change the extension settings.
+
+1. Open **Menu** and click **Add-ons and Themes**
+
+
+
+2. Click on **Manage** Option on **Vue.js devtools** Extension Options
+
+
+
+3. Make sure the relevant settings are set:
+
+
+
+## Edge
+
+Install the extension on the Edge Store:
+
+
+
+### Settings
+
+If you need to use the devtools in InPrivate mode or when you open an HTML file directly, you need to change the extension settings.
+
+1. Go to the extension page:
+
+
+
+2. Make sure the relevant settings are set:
+
+
+
+## Standalone
+
+In case you are using an unsupported browser, or if you have other specific needs (for example your application is in Electron), you can use the standalone application.
+
+Install the package globally:
+```bash
+npm install -g @vue/devtools
+```
+
+Or locally as project dependency:
+```bash
+npm install --save-dev @vue/devtools
+```
+
+### Using global package
+
+Once you installed the package globally, run:
+```bash
+vue-devtools
+```
+
+Then add this code to the `` section of your application HTML file:
+```html
+
+```
+
+Or if you want to debug your device remotely:
+```html
+
+
+```
+
+**(Don't forget to remove it before deploying to production!)**
+
+`` usually looks like this: `192.168.x.x`.
+
+Then start your development server like you are used to, *without* killing the `vue-devtools` command (for example, open a new terminal). Both need to run in parallel.
+
+```bash
+yarn dev
+#or
+yarn serve
+```
+
+### Using dependency package
+
+Once you installed the package as project dependency, run:
+```bash
+./node_modules/.bin/vue-devtools
+```
+
+You can also use the global `vue-devtools` to start the app, but you might want to check if the local version matches the global one in this scenario to avoid any incompatibilities.
+
+Then import it directly in your app:
+```js
+import devtools from '@vue/devtools'
+// import Vue from 'vue'
+```
+> Make sure you import devtools before Vue, otherwise it might not work as expected.
+
+And connect to host:
+```js
+if (process.env.NODE_ENV === 'development') {
+ devtools.connect(/* host, port */)
+}
+```
+
+**host** - is an optional argument that tells your application where devtools middleware server is running, if you debug your app on your computer you don't have to set this (the default is `http://localhost`), but if you want to debug your app on mobile devices, you might want to pass your local IP (e.g. `http://192.168.1.12`).
+
+**port** - is an optional argument that tells your application on what port devtools middleware server is running. If you use proxy server, you might want to set it to `null` so the port won't be added to connection URL.
+
+[More details](https://github.com/vuejs/devtools/tree/main/packages/shell-electron#vue-remote-devtools)
+
+## Legacy
+
+If something is broken with the new devtools, please [submit a new issue](https://github.com/vuejs/devtools/issues/new/choose)!
+
+Meanwhile, you can install the legacy version (v5) of the devtools:
+
+
+
+
+
+
+
+Make sure you disable any other versions of the Vue devtools. Only one version should be enabled at a time.
diff --git a/vue-devtools/packages/docs/src/guide/open-in-editor.md b/vue-devtools/packages/docs/src/guide/open-in-editor.md
new file mode 100644
index 0000000000000000000000000000000000000000..288d00b742e5fb70e90d515083efd18c23e8cfaf
--- /dev/null
+++ b/vue-devtools/packages/docs/src/guide/open-in-editor.md
@@ -0,0 +1,63 @@
+# Open component in editor
+
+When you select a component, you have the option to open the corresponding source file in your code editor.
+
+
+
+To able to work, this feature may need some configuration in your project.
+
+## Vue CLI 3
+
+Vue CLI 3 supports this feature out-of-the-box when running `vue-cli-service serve`.
+
+## Nuxt & Quasar CLI
+
+Nuxt & Quasar CLI supports this feature out-of-the-box. Make sure to be in debug mode.
+
+## Webpack
+
+In your Vue project, install the [launch-editor-middleware](https://github.com/yyx990803/launch-editor#middleware) package and modify your webpack configuration:
+
+1. Import the package:
+
+```js
+const openInEditor = require('launch-editor-middleware')
+```
+
+2. In the `devServer` option, register the `/__open-in-editor` HTTP route:
+
+```js
+export default {
+ devServer: {
+ before(app) {
+ app.use('/__open-in-editor', openInEditor())
+ }
+ }
+}
+```
+
+3. The editor to launch is guessed. You can also specify the editor app with the `editor` option. See the [supported editors list](https://github.com/yyx990803/launch-editor#supported-editors).
+
+```js
+openInEditor('code')
+```
+
+4. You can now click on the name of the component in the Component inspector pane (if the devtools knows about its file source, a tooltip will appear).
+
+## 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/'
+ }
+}
+```
diff --git a/vue-devtools/packages/docs/src/index.md b/vue-devtools/packages/docs/src/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..8c3b7f3e0e2af6adce9a1806d0d3c132e48abc52
--- /dev/null
+++ b/vue-devtools/packages/docs/src/index.md
@@ -0,0 +1,20 @@
+---
+home: true
+sidebar: false
+heroImage: /logo.svg
+
+actionText: Install now
+actionLink: /guide/installation
+
+footer: MIT Licensed | Copyright © 2014-present Evan You, Guillaume Chau
+---
+
+## Sponsors
+
+[💚️ Become a Sponsor](https://github.com/sponsors/Akryum)
+
+
+
+ 
+
+
diff --git a/vue-devtools/packages/docs/src/plugin/api-reference.md b/vue-devtools/packages/docs/src/plugin/api-reference.md
new file mode 100644
index 0000000000000000000000000000000000000000..3f13ca14173937a6391068ec6a5878c4e99c56b8
--- /dev/null
+++ b/vue-devtools/packages/docs/src/plugin/api-reference.md
@@ -0,0 +1,777 @@
+# Plugin API References
+
+::: warning
+The API is only available in Vue Devtools 6+
+:::
+
+## Plugin setup
+
+### setupDevtoolsPlugin
+
+Registers a devtools plugin. Describes the plugin and provides access to the devtools API.
+
+```js
+setupDevtoolsPlugin (pluginDescriptor, setupFn)
+```
+
+The plugin descriptor is an object describing the devtools plugin to the Vue devtools user.
+
+It has the following properties:
+
+- `id`: a unique id between all possible plugins. It's recommended to use a Reverse Domain Name notation, for example: `org.vuejs.router`, or the npm package name.
+- `app`: the current application instance. The devtools is scoped to a specific application, so you have to specify on which application instance the devtools plugin is going to work.
+- `label`: the label displayed to the user. It's recommended to use a user-friendly name from your plugin, for example: `'Vue Router'`. Do not put `'devtools'` or `'plugin'` in the name, since the user will be seeing this devtools plugin while using your Vue plugin already.
+- `packageName` (optional): The `npm` package name associated with the devtools plugin, for example `'vue-router'`.
+- `homepage` (optional): URL to your documentation.
+- `logo` (optional): URL to a logo of your Vue plugin.
+- `componentStateTypes` (optional): an array of custom component state section names you are going to add to the Component inspector. If you add new state to the component inspector, you should declare their sections here so the devtools can display the plugin icon.
+- `disableAppScope` (optional): if set to `true`, the hooks registered with this plugin will not be scoped to the associated app. In that case, you might need to use the `app` payload property to check what the current app is inside each hook.
+- `disablePluginScope` (optional): if set to `true`, the hooks registered with this plugin will not be scoped to the current plugin. In that case, you might need to use the `pluginId` payload property (depending on the hook) to check what the related plugin is inside each hook.
+- `enableEarlyProxy` (optional): if set to `true`, the plugin will run even if the Vue devtools are not connected yet using a proxy of the Plugin API and a buffer queue. This is useful if you need to add timeline events before the user opens the devtools.
+- `settings` (optional): an object describing the plugin settings. Learn more about plugin settings [here](./plugins-guide.md#plugin-settings).
+
+Example:
+
+```js
+const stateType = 'routing properties'
+
+setupDevtoolsPlugin({
+ id: 'org.vuejs.router',
+ app,
+ label: 'Vue Router',
+ packageName: 'vue-router',
+ homepage: 'https://router.vuejs.org/',
+ logo: 'https://vuejs.org/images/icons/favicon-96x96.png',
+ componentStateTypes: [
+ stateType
+ ]
+}, (api) => {
+ // Use the API here
+})
+```
+
+## Component inspector
+
+### on.visitComponentTree
+
+Use this hook to add tags in the component tree.
+
+The `payload` argument:
+- `app`: app instance currently active in the devtools
+- `componentInstance`: the current component instance data in the tree
+- `treeNode`: the tree node that will be sent to the devtools
+- `filter`: the current value of the seach input above the tree in the component inspector
+
+Example:
+
+```js
+api.on.visitComponentTree((payload) => {
+ const node = payload.treeNode
+ if (node.name === 'MyApp') {
+ node.tags.push({
+ label: 'root',
+ textColor: 0x000000,
+ backgroundColor: 0xFF984F
+ })
+ }
+ else {
+ node.tags.push({
+ label: 'test',
+ textColor: 0xFFAAAA,
+ backgroundColor: 0xFFEEEE,
+ tooltip: `It's a test!`
+ })
+ }
+})
+```
+
+### on.inspectComponent
+
+Use this hook to add new information to the state of the selected component.
+
+The `payload` argument:
+- `app`: app instance currently active in the devtools
+- `componentInstance`: the current component instance data in the tree
+- `instanceData`: the state that will be sent to the devtools
+
+To add new state, you can push new fields into the `instanceData.state` array:
+
+#### Basic field
+
+- `type`: name of the section under which the field will appear
+- `key`: name of the field
+- `value`: value of the field
+- `editable` (optional): boolean to enable edition
+
+#### Custom value
+
+By default, the devtools will display your field depending on whether it's an object, an array, etc. You can customize the field display by putting a `{ _custom: {} }` object to the value.
+
+The `_custom` object has the following properties:
+
+- `type`: Displays the type of the value. Examples: `'router'`, `'component'`, `'service'`...
+- `display`: Text displayed instead of the value. Example: `'5 minutes'`
+- `tooltip`: Tooltip when hovering the value text (`display`)
+- `value`: Actual value
+- `abstract`: No value is displayed. Useful for indexes. For example, `Set` objects have abstract index child fields: `0`, `1`...
+- `readOnly`: mark this value has not editable
+- `fields`: an object of configure immediate child fields
+ - `abstract`
+- `actions`: an array of buttons to add to the field
+ - `icon`: material icon identifier
+ - `tooltip`: button tooltip
+ - `action`: function to be executed
+
+When you add new sections with the `type` property, you should declare them in the `componentStateTypes` array in the plugin descriptor when you call the `setupDevtoolsPlugin`.
+
+Example:
+
+```js
+api.on.inspectComponent((payload) => {
+ if (payload.instanceData) {
+ payload.instanceData.state.push({
+ type: stateType,
+ key: 'foo',
+ value: 'bar'
+ })
+ payload.instanceData.state.push({
+ type: stateType,
+ key: 'time',
+ value: {
+ _custom: {
+ type: null,
+ readOnly: true,
+ display: `${time}s`,
+ tooltip: 'Elapsed time',
+ value: time,
+ actions: [
+ {
+ icon: 'input',
+ tooltip: 'Log to console',
+ action: () => console.log('current time:', time)
+ }
+ ]
+ }
+ }
+ })
+ }
+})
+```
+
+### on.editComponentState
+
+If you mark a field as `editable: true`, you should also use this hook to apply the new value sent by the devtools.
+
+You have to put a condition in the callback to target only your field type:
+
+```js
+api.on.editComponentState((payload) => {
+ if (payload.type === stateType) {
+ // Edit logic here
+ }
+})
+```
+
+The `payload` argument:
+- `app`: app instance currently active in the devtools
+- `type`: the current field type
+- `path`: an array of string that represents the property edited by the user. For example, if the user edits the `myObj.myProp.hello` property, the `path` will be `['myObj', 'myProp', 'hello']`.
+- `state`: object describing the edit with those properties:
+ - `value`: new value
+ - `newKey`: string that is set if the key of the value changed, usually when it's in an object
+ - `remove`: if `true`, the value should be removed from the object or array
+- `set`: an helper function that makes it easy to apply the edit on a state object
+
+Example:
+
+```js
+api.on.editComponentState((payload) => {
+ if (payload.type === stateType) {
+ payload.set(myState)
+ }
+})
+```
+
+Here is a full example of an editable custom component field:
+
+```js
+const myState = {
+ foo: 'bar'
+}
+
+api.on.inspectComponent((payload) => {
+ if (payload.instanceData) {
+ payload.instanceData.state.push({
+ type: stateType,
+ key: 'foo',
+ value: myState.foo,
+ editable: true
+ })
+ }
+})
+
+api.on.editComponentState((payload) => {
+ if (payload.type === stateType) {
+ payload.set(myState)
+ }
+})
+```
+
+As you can see, you should use an object to hold the field value so that it can be assigned to.
+
+### notifyComponentUpdate
+
+If your state has changed, you can tell the devtools to refresh the selected component state with the `notifyComponentUpdate` method:
+
+```js
+setInterval(() => {
+ api.notifyComponentUpdate()
+}, 5000)
+```
+
+You can also pass a specific component instance:
+
+```js
+api.notifyComponentUpdate(vm)
+```
+
+## Custom inspector
+
+Custom inspectors are useful to display debugging information about your library using an inspectable tree.
+
+### addInspector
+
+This function registers a new custom inspector.
+
+The options are:
+
+- `id`: unique custom inspector id
+- `label`: label displayed in the `Inspector` sub menu
+- `icon` (optional): [Material icon code](https://material.io/resources/icons/), for example `'star'`
+- `treeFilterPlaceholder` (optional): placeholder of the filter input above the tree
+- `stateFilterPlaceholder` (optional): placeholder of the filter input in the state inspector
+- `noSelectionText` (optional): text displayed in the inspector pane when no node is selected
+- `actions`: an array of buttons to add to the header of the inspector
+ - `icon`: material icon identifier
+ - `tooltip`: button tooltip
+ - `action`: function to be executed
+- `nodeActions`: an array of buttons to add to the selected node pane
+ - `icon`: material icon identifier
+ - `tooltip`: button tooltip
+ - `action`: function to be executed
+
+Example:
+
+```js
+const INSPECTOR_ID = 'test-inspector'
+
+api.addInspector({
+ id: INSPECTOR_ID,
+ label: 'Test inspector',
+ icon: 'tab_unselected',
+ treeFilterPlaceholder: 'Search for test...',
+ actions: [
+ {
+ icon: 'star',
+ tooltip: 'Test custom action',
+ action: () => console.log('Meow! 🐱')
+ }
+ ],
+ nodeActions: [
+ {
+ icon: 'star',
+ tooltip: 'Test node custom action',
+ action: nodeId => console.log('Node action:', nodeId)
+ }
+ ]
+})
+```
+
+::: tip
+It's recommended to use a variable to put the `id`, so that you can reuse it afterwards.
+:::
+
+### on.getInspectorTree
+
+This hook is called when the devtools wants to load the tree of any custom inspector.
+
+You have to put a condition in the callback to target only your inspector:
+
+```js
+api.on.getInspectorTree((payload) => {
+ if (payload.inspectorId === 'test-inspector') {
+ // Your logic here
+ }
+})
+```
+
+The `payload` argument:
+- `app`: app instance currently active in the devtools
+- `inspectorId`: id of the current custom inspector
+- `filter`: string of the user input in the search field
+- `rootNodes`: array of root nodes of the tree you want to display in the devtools
+
+Each node can have those properties:
+- `id`: a unique node id
+- `label`: the text displayed in the tree
+- `children` (optional): an array of child nodes
+- `tags` (optional): an array of tag objects:
+ - `label`: text displayed in the tag
+ - `textColor`: text color, for example: `0x000000` for black
+ - `backgroundColor`: background color, for example: `0xffffff` for white
+ - `tooltip` (optional): HTML for a tooltip over the tag
+
+Example:
+
+```js
+api.on.getInspectorTree((payload) => {
+ if (payload.inspectorId === 'test-inspector') {
+ payload.rootNodes = [
+ {
+ id: 'root',
+ label: `Root (${time})`,
+ children: [
+ {
+ id: 'child',
+ label: `Child ${payload.filter}`,
+ tags: [
+ {
+ label: 'active',
+ textColor: 0x000000,
+ backgroundColor: 0xFF984F
+ },
+ {
+ label: 'test',
+ textColor: 0xFFFFFF,
+ backgroundColor: 0x000000
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+})
+```
+
+### on.getInspectorState
+
+This hook is called when the devtools needs to load the state for the currently selected node in a custom inspector.
+
+You have to put a condition in the callback to target only your inspector:
+
+```js
+api.on.getInspectorState((payload) => {
+ if (payload.inspectorId === 'test-inspector') {
+ // Your logic here
+ }
+})
+```
+
+The `payload` argument:
+- `app`: app instance currently active in the devtools
+- `inspectorId`: id of the current custom inspector
+- `nodeId`: id of the currently selected node
+- `state`: state sent to the devtools
+
+The state is an object, which keys are the section names in the state inspector, and the value is an array of fields:
+
+```js
+payload.state = {
+ 'section 1': [
+ // fields
+ ],
+ 'section 2': [
+ // fields
+ ]
+}
+```
+
+Each field is an object with:
+
+- `type`: name of the section under which the field will appear
+- `key`: name of the field
+- `value`: value of the field
+- `editable` (optional): boolean to enable edition
+
+You can also use a [Custom value](#custom-value).
+
+Example:
+
+```js
+api.on.getInspectorState((payload) => {
+ if (payload.inspectorId === 'test-inspector') {
+ if (payload.nodeId === 'root') {
+ payload.state = {
+ 'root info': [
+ {
+ key: 'foo',
+ value: myState.foo,
+ editable: true
+ },
+ {
+ key: 'time',
+ value: time
+ }
+ ]
+ }
+ }
+ else {
+ payload.state = {
+ 'child info': [
+ {
+ key: 'answer',
+ value: {
+ _custom: {
+ display: '42!!!',
+ value: 42,
+ tooltip: 'The answer'
+ }
+ }
+ }
+ ]
+ }
+ }
+ }
+})
+```
+
+### on.editInspectorState
+
+If you mark a field as `editable: true`, you should also use this hook to apply the new value sent by the devtools.
+
+You have to put a condition in the callback to target only your inspector:
+
+```js
+api.on.editInspectorState((payload) => {
+ if (payload.inspectorId === 'test-inspector') {
+ // Edit logic here
+ }
+})
+```
+
+The `payload` argument:
+- `app`: app instance currently active in the devtools
+- `inspectorId`: id of the current custom inspector
+- `nodeId`: id of the currently selected node
+- `type`: the current field type
+- `path`: an array of string that represents the property edited by the user. For example, if the user edits the `myObj.myProp.hello` property, the `path` will be `['myObj', 'myProp', 'hello']`.
+- `state`: object describing the edit with those properties:
+ - `value`: new value
+ - `newKey`: string that is set if the key of the value changed, usually when it's in an object
+ - `remove`: if `true`, the value should be removed from the object or array
+- `set`: an helper function that makes it easy to apply the edit on a state object
+
+Example:
+
+```js
+api.on.editInspectorState((payload) => {
+ if (payload.inspectorId === 'test-inspector') {
+ if (payload.nodeId === 'root') {
+ payload.set(myState)
+ }
+ }
+})
+```
+
+### sendInspectorTree
+
+If you need to update the tree to the user, call this function to ask for a refresh.
+
+Example:
+
+```js
+setInterval(() => {
+ api.sendInspectorTree('test-inspector')
+}, 5000)
+```
+
+### sendInspectorState
+
+If you need to update the currently selected node state to the user, call this function to ask for a refresh.
+
+Example:
+
+```js
+setInterval(() => {
+ api.sendInspectorState('test-inspector')
+}, 5000)
+```
+
+### selectInspectorNode
+
+Select a specific node in the inspector tree. The arguments are:
+
+- `inspectorId`: the id of your inspector
+- `nodeId`: the id of the node to be selected
+
+Example:
+
+```js
+api.selectInspectorNode('test-inspector', 'some-node-id')
+```
+
+## Timeline
+
+### now
+
+Returns the current time with the maximum available precision.
+
+```js
+api.now()
+```
+
+### addTimelineLayer
+
+Register a new timeline layer with this method. The options are:
+- `id`: unique id of the layer. It's recommended to use a variable to store it.
+- `label`: text displayed in the layer list
+- `color`: color of the layer background and event graphics
+- `skipScreenshots` (optional): don't trigger a screenshot for the layer events
+- `groupsOnly` (optional): only display groups of events (they will be drawn as rectangles)
+- `ignoreNoDurationGroups` (optional): skip groups with no duration (useful when `groupsOnly` is `true`)
+
+Example:
+
+```js
+api.addTimelineLayer({
+ id: 'test-layer',
+ label: 'Test layer',
+ color: 0x92A2BF
+})
+```
+
+### addTimelineEvent
+
+Use this function to send a new event on the timeline.
+- `layerId`: id of the layer
+- `event`: event object
+ - `time`: time in millisecond when the event happened
+ - `data`: state displayed when selecting the event
+ - `title` (optional): text displayed in the event list
+ - `subtitle` (optional): secondary text displayed in the event list
+ - `logType` (optional): either `'default'`, `'warning'` or `'error'`
+ - `meta` (optional): object where you can store metadata about the object that will not be displayed when it's selected
+ - `groupId` (optional): id used to group multiple event together
+
+Example:
+
+```js
+api.addTimelineEvent({
+ layerId: 'test-layer',
+ event: {
+ time: api.now(),
+ data: {
+ info: 'window.keyup',
+ key: event.key
+ },
+ groupId: event.key,
+ title: 'Group test',
+ meta: {
+ foo: 'bar'
+ }
+ }
+})
+```
+
+### on.inspectTimelineEvent
+
+This hook is called when a timline event is selected. It's useful if you want to send additional information to the devtools in a lazy way.
+
+You have to put a condition in the callback to target only your timeline layer:
+
+```js
+api.on.inspectTimelineEvent((payload) => {
+ if (payload.layerId === 'test-layer') {
+ // Your logic here
+ }
+})
+```
+
+Example:
+
+```js
+api.on.inspectTimelineEvent((payload) => {
+ if (payload.layerId === 'test-layer') {
+ // Async operation example
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ payload.data = {
+ ...payload.data,
+ hey: 'hello'
+ }
+ resolve()
+ }, 1000)
+ })
+ }
+})
+```
+
+### on.timelineCleared
+
+This hook is called when the timeline is cleared by the user. Note that clearing the timeline affects all apps and layers simultaneously.
+
+```js
+api.on.timelineCleared(() => {
+ console.log('timeline is cleared!')
+})
+```
+
+## Settings
+
+Plugin settings allow the user to customize the plugin behavior. Learn more about plugin settings [here](./plugins-guide.md#plugin-settings).
+
+### getSettings
+
+Get the current plugin settings.
+
+Example:
+
+```js
+api.getSettings()
+```
+
+### on.setPluginSettings
+
+Hook called when the user changes the plugin settings.
+
+Payload properties:
+
+- `key`: settings item
+- `newValue`: new value for the changed settings
+- `oldValue`: its old value (deep clone)
+- `settings`: the whole current settings state object
+
+```js
+// Plugin settings change
+api.on.setPluginSettings((payload) => {
+ console.log(
+ 'plugin settings changed',
+ payload.settings,
+ // Info about the change
+ payload.key,
+ payload.newValue,
+ payload.oldValue
+ )
+})
+```
+
+## Utilities
+
+### getComponentInstances
+
+Component instances on the Vue app.
+- `app`: the target Vue app instance
+
+Example:
+
+```js
+let componentInstances = []
+
+api.on.getInspectorTree(async (payload) => {
+ if (payload.inspectorId === 'test-inspector') { // e.g. custom inspector
+ componentInstances = await api.getComponentInstances(app)
+ for (const instance of instances) {
+ payload.rootNodes.push({
+ id: instance.uid.toString(),
+ label: `Component ${instance.uid}`
+ })
+ }
+
+ // something todo ...
+ }
+})
+```
+
+### getComponentBounds
+
+Computes the component bounds on the page.
+
+Example:
+
+```js
+api.on.inspectComponent(async (payload) => {
+ if (payload.instanceData) {
+ const bounds = await api.getComponentBounds(payload.componentInstance)
+ payload.instanceData.state.push({
+ type: stateType,
+ key: 'bounds',
+ value: bounds
+ ? {
+ left: bounds.left,
+ top: bounds.top,
+ width: bounds.width,
+ height: bounds.height
+ }
+ : null
+ })
+ }
+})
+```
+
+### getComponentName
+
+Retrieves the component name.
+
+Example:
+
+```js
+api.on.inspectComponent(async (payload) => {
+ if (payload.instanceData) {
+ const componentName = await api.getComponentName(payload.componentInstance)
+ payload.instanceData.state.push({
+ type: stateType,
+ key: 'component name',
+ value: componentName
+ })
+ }
+})
+```
+
+### highlightElement
+
+Highlight the element of the component.
+- `instance`: the target component instance
+
+Example:
+
+```js
+const componentInstances = [] // keeped component instance of the Vue app (e.g. `getComponentInstances`)
+
+api.on.getInspectorState((payload) => {
+ if (payload.inspectorId === 'test-inspector') { // e.g. custom inspector
+ // find component instance from custom inspector node
+ const instance = componentInstances.find(instance => instance.uid.toString() === payload.nodeId)
+
+ if (instance) {
+ api.highlightElement(instance)
+ }
+
+ // something todo ...
+ }
+})
+```
+
+### unhighlightElement
+
+Unhighlight the element.
+- `instance`: the target component instance
+
+Example:
+
+```js
+const componentInstances = [] // keeped component instance of the Vue app (e.g. `getComponentInstances`)
+
+api.on.getInspectorState((payload) => {
+ if (payload.inspectorId === 'test-inspector') { // e.g. custom inspector
+ // find component instance from custom inspector node
+ const instance = componentInstances.find(instance => instance.uid.toString() === payload.nodeId)
+
+ if (instance) {
+ api.unhighlightElement(instance)
+ }
+
+ // something todo ...
+ }
+})
+```
diff --git a/vue-devtools/packages/docs/src/plugin/plugins-guide.md b/vue-devtools/packages/docs/src/plugin/plugins-guide.md
new file mode 100644
index 0000000000000000000000000000000000000000..424e49b4a8f73a9e1873bf1303a305318eb6b1b0
--- /dev/null
+++ b/vue-devtools/packages/docs/src/plugin/plugins-guide.md
@@ -0,0 +1,1273 @@
+---
+sidebarDepth: 5
+---
+
+# Plugin Development Guide
+
+::: warning Notice
+The API is only available in Vue Devtools 6+
+:::
+
+## Architecture
+
+A Vue Devtools Plugin is registered from your Vue package code in the user app. It interacts with the Vue Devtools Backend, *via* [the public API](./api-reference.md). The Backend is a script injected to the web page when Vue Devtools are opened by the user - it handles registering Vue applications and communicating with the Vue Devtools Frontend. The Frontend is the Vue application displayed in the browser devtools pane. The Hook is a global variable added to the page so that the Vue application and your plugin can send messages to the Backend.
+
+There are 3 main API categories:
+- **Components Inspector**: your plugin can add more information to the component tree and state.
+- **Custom Inspectors**: you can add new inspectors to display any kind of state. For example: routes, store current state...
+- **Timeline**: you can add custom layers and send events.
+
+Using the API, you can show information to the user and improve the app debugging experience. Official libraries like `vue-router` and `vuex` already use this API!
+
+### Architecture schema
+
+
+
+## Examples
+
+- [Vue 3 plugin](https://github.com/Akryum/vue3-devtools-plugin-example)
+- [Vue 2 plugin](https://github.com/Akryum/vue2-devtools-plugin-example)
+
+## Setup
+
+In your package, install `@vue/devtools-api` as a dependency:
+
+```bash
+yarn add @vue/devtools-api
+```
+
+This package will let you register a new Vue Devtools Plugin from your code and comes with full TypeScript typings.
+
+Your `package.json` file should look similar to this:
+
+```json
+{
+ "name": "my-awesome-plugin",
+ "version": "0.0.0",
+ "main": "dist/index.js",
+ "dependencies": {
+ "@vue/devtools-api": "^6.0.0-beta.14"
+ },
+ "peerDependencies": {
+ "vue": "^3.1.0"
+ },
+ "devDependencies": {
+ "vue": "^3.1.0"
+ }
+}
+```
+
+It's a good idea to also specify `vue` as a peer dependency to inform the user which version of Vue your package is compatible with.
+
+### TypeScript
+
+If you are using TS, your `package.json` file should look similar to this:
+
+```json
+{
+ "name": "my-awesome-plugin",
+ "version": "0.0.0",
+ "main": "dist/index.js",
+ "scripts": {
+ "dev": "tsc --watch -d",
+ "build": "tsc -d"
+ },
+ "dependencies": {
+ "@vue/devtools-api": "^6.0.0-beta.14"
+ },
+ "peerDependencies": {
+ "vue": "^3.1.0"
+ },
+ "devDependencies": {
+ "@types/node": "^20.11.16",
+ "typescript": "^5.3.3",
+ "vue": "^3.1.0"
+ }
+}
+```
+
+Here is an example `tsconfig.json` file to put next to the `package.json` file:
+
+```json
+{
+ "include": [
+ "src/global.d.ts",
+ "src/**/*.ts",
+ "__tests__/**/*.ts"
+ ],
+ "compilerOptions": {
+ "outDir": "dist",
+ "sourceMap": false,
+
+ "target": "esnext",
+ "module": "esnext",
+ "moduleResolution": "node",
+ "allowJs": false,
+ "skipLibCheck": true,
+
+ "noUnusedLocals": true,
+ "strictNullChecks": true,
+ "noImplicitAny": true,
+ "noImplicitThis": true,
+ "noImplicitReturns": false,
+ "strict": true,
+ "isolatedModules": true,
+
+ "experimentalDecorators": true,
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "removeComments": false,
+ "jsx": "preserve",
+ "lib": [
+ "esnext",
+ "dom"
+ ],
+ "types": [
+ "node"
+ ]
+ }
+}
+```
+
+### Rollup
+
+[Rollup](https://rollupjs.org/) is a general-purpose bundler. You can use it to compile your package for easier consumption. It's also very handy if you have `.vue` files to compile!
+
+```bash
+yarn add -D rollup rollup-plugin-vue @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-terser pascalcase rimraf
+```
+
+::: tip Notice about the packages
+- `rollup-plugin-vue` compiles the `.vue` files.
+- `@rollup/plugin-commonjs` converts CommonJS modules to ES2015 modules.
+- `@rollup/plugin-node-resolve` locates and bundles third-party dependencies in `node_modules`.
+- `@rollup/plugin-replace` allow us to replace some source code text like `process.env.NODE_ENV` with the values we want at build time.
+- `rollup-plugin-terser` minimizes the output for production.
+- `pascalcase` is used to convert your package name (from `package.json`) into Pascal case, for example `my-plugin` to `MyPlugin`.
+- `rimraf` is useful to clear the `dist` folder before building.
+:::
+
+#### Rollup config
+
+Create a `rollup.config.js` file next to the `package.json` file:
+
+[See example](https://gist.github.com/Akryum/b200b92689c6d7e3bb3871da906be01e)
+
+#### Rollup package
+
+Add the main fields, `exports` and `scripts` to your `package.json`:
+
+```json
+{
+ "name": "my-plugin",
+ "version": "0.0.0",
+ "description": "A demo Vue 3 plugin with devtools integration",
+ "author": {
+ "name": "Guillaume Chau",
+ "email": "guillaume.b.chau@gmail.com"
+ },
+ "main": "dist/my-plugin.cjs.js",
+ "module": "dist/my-plugin.esm-bundler.js",
+ "unpkg": "dist/my-plugin.global.js",
+ "jsdelivr": "dist/my-plugin.global.js",
+ "exports": {
+ ".": {
+ "require": "./dist/my-plugin.cjs.js",
+ "browser": "./dist/my-plugin.esm-browser.js",
+ "import": "./dist/my-plugin.esm-bundler.js",
+ "module": "./dist/my-plugin.esm-bundler.js"
+ },
+ "./package.json": "./package.json"
+ },
+ "sideEffects": false,
+ "scripts": {
+ "build": "rimraf dist && rollup -c rollup.config.js"
+ }
+ // ...
+}
+```
+
+Don't forget to replace `my-plugin` with your package name.
+
+You can now use the `build` script to compile the package:
+
+```bash
+yarn build
+```
+
+#### Rollup with TypeScript
+
+Install the Rollup TS plugin:
+
+```bash
+yarn add -D rollup-plugin-typescript2
+```
+
+Modify the Rollup config to compile the TS files:
+
+[See example](https://gist.github.com/Akryum/cb0a396904169bd55ddf964e3b20452a)
+
+And add the `types` field to your `package.json` file:
+
+```json{13}
+{
+ "name": "my-plugin",
+ "version": "0.0.0",
+ "description": "A demo Vue 3 plugin with devtools integration",
+ "author": {
+ "name": "Guillaume Chau",
+ "email": "guillaume.b.chau@gmail.com"
+ },
+ "main": "dist/my-plugin.cjs.js",
+ "module": "dist/my-plugin.esm-bundler.js",
+ "unpkg": "dist/my-plugin.global.js",
+ "jsdelivr": "dist/my-plugin.global.js",
+ "types": "dist/index.d.ts",
+ "exports": {
+ ".": {
+ "require": "./dist/my-plugin.cjs.js",
+ "browser": "./dist/my-plugin.esm-browser.js",
+ "import": "./dist/my-plugin.esm-bundler.js",
+ "module": "./dist/my-plugin.esm-bundler.js"
+ },
+ "./package.json": "./package.json"
+ },
+ "sideEffects": false,
+ "scripts": {
+ "build": "rimraf dist && rollup -c rollup.config.js"
+ }
+ ...
+}
+```
+
+See [TypeScript](#typescript) for a `tsconfig.json` example.
+
+
+
+## Registering your plugin
+
+Create a new `devtools.js` file in your source folder.
+
+### Plugin setup
+
+We are going to import [`setupDevtoolsPlugin`](./api-reference.md#setupdevtoolsplugin) from the `@vue/devtools-api` package:
+
+```js
+import { setupDevtoolsPlugin } from '@vue/devtools-api'
+```
+
+Then we export a function to setup our Vue Devtools plugin:
+
+```js
+export function setupDevtools() {
+ setupDevtoolsPlugin({ /* Options... */}, (api) => {
+ // Logic...
+ })
+}
+```
+
+Add the plugin options in the first argument:
+
+```js{2-5}
+setupDevtoolsPlugin({
+ id: 'my-awesome-devtools-plugin',
+ label: 'My Awesome Plugin',
+ packageName: 'my-awesome-plugin',
+ homepage: 'https://vuejs.org'
+}, api => {
+ // Logic...
+})
+```
+
+Every plugin is bound to a Vue application. You need to pass the user application to `setupDevtoolsPlugin` - the same that your plugin `install` method gets as the first argument.
+
+```js{1,7}
+export function setupDevtools (app) {
+ setupDevtoolsPlugin({
+ id: 'my-awesome-devtools-plugin',
+ label: 'My Awesome Plugin',
+ packageName: 'my-awesome-plugin',
+ homepage: 'https://vuejs.org',
+ app
+ }, api => {
+ // Logic...
+ })
+}
+```
+
+The second argument of `setupDevtoolsPlugin` is a callback which will get the Vue Devtools API as the first argument:
+
+```js{5-7}
+export function setupDevtools (app) {
+ setupDevtoolsPlugin({
+ id: 'my-awesome-devtools-plugin',
+ // ...
+ }, api => {
+ // Use the API here...
+ })
+}
+```
+
+We can now import and use our `setupDevtools` function in our Vue plugin:
+
+```js
+import { setupDevtools } from './devtools'
+
+export default {
+ install(app, options = {}) {
+ // Our Vue plugin logic
+
+ setupDevtools(app)
+ }
+}
+```
+
+### Vue 2
+
+In a Vue 2 app, you need to pass the root component instance as the `app` parameter:
+
+```js
+import { setupDevtools } from './devtools'
+
+export default {
+ install(Vue) {
+ Vue.mixin({
+ beforeCreate() {
+ if (this.$options.myPlugin) {
+ setupDevtools(this)
+ }
+ }
+ })
+ }
+}
+```
+
+In the user's app:
+
+```js
+import Vue from 'vue'
+import App from './App.vue'
+import DevtoolsPlugin from './DevtoolsPlugin'
+
+Vue.use(DevtoolsPlugin)
+
+new Vue({
+ render: h => h(App),
+ myPlugin: true,
+}).$mount('#app')
+```
+
+### Plugin settings
+
+With the `settings` option, your plugin can expose some settings to the user. This can be very useful to allow some customization!
+
+All settings items must have the following properties:
+- `type` (see below)
+- `label`: a string to describe the settings item
+- `defaultValue`
+
+Available settings types:
+- `boolean`
+- `text`
+- `choice`
+ - `options`: list of objects with type `{ value: any, label: string }`
+ - `component`: (optional) can be either `'select'` (default) or `'button-group'`
+
+Example:
+
+```js
+setupDevtoolsPlugin({
+ id: 'my-awesome-devtools-plugin',
+ settings: {
+ test1: {
+ label: 'I like vue devtools',
+ type: 'boolean',
+ defaultValue: true
+ },
+ test2: {
+ label: 'Quick choice',
+ type: 'choice',
+ defaultValue: 'a',
+ options: [
+ { value: 'a', label: 'A' },
+ { value: 'b', label: 'B' },
+ { value: 'c', label: 'C' }
+ ],
+ component: 'button-group'
+ },
+ test3: {
+ label: 'Long choice',
+ type: 'choice',
+ defaultValue: 'a',
+ options: [
+ { value: 'a', label: 'A' },
+ { value: 'b', label: 'B' },
+ { value: 'c', label: 'C' },
+ { value: 'd', label: 'D' },
+ { value: 'e', label: 'E' }
+ ]
+ },
+ test4: {
+ label: 'What is your name?',
+ type: 'text',
+ defaultValue: ''
+ }
+ },
+}, (api) => {
+ // Use `api.getSettings()` to get the current settings for the plugin
+ console.log(api.getSettings())
+})
+```
+
+
+
+You can listen for changes made to the settings by the user with the [`api.on.setPluginSettings`](./api-reference.md#on-setpluginsettings) hook:
+
+```js
+api.on.setPluginSettings((payload) => {
+ // Do something...
+})
+```
+
+### Tree-shaking for production
+
+As we are going to write code only for integrating for the Vue Devtools, it would be a good idea to strip it for the production versions of our package - thus improving size and performance.
+
+By default, Vue 3 doesn't include the devtools-related code in production. [It uses](https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags) the `__VUE_PROD_DEVTOOLS__` environment variable as a compile flag to force enable this code. We can use the same one for the same purpose, and we can also check for `NODE_ENV` to automatically include the devtools plugin in development.
+
+```js
+if (process.env.NODE_ENV === 'development' || __VUE_PROD_DEVTOOLS__) {
+ setupDevtools(app)
+}
+```
+
+In your build setup you should replace `process.env.NODE_ENV` and `__VUE_PROD_DEVTOOLS__` for the builds of your library that don't target bundlers. See [Rollup setup](#rollup) that includes an example usage of `@rollup/plugin-replace`.
+
+## Components
+
+The Components API allows you to:
+
+- Add tags to the components tree.
+- Display additional data in the component state inspector.
+
+### Hooks
+
+The Vue Devtools API includes **Hooks** which are available *via* `api.on`. Hooks are useful to add new debugging information to existing elements, such as components tree nodes, component state, timeline events... A new callback for a specific hook can be registered with `api.on.hookName(callback)`.
+
+Every hook expects the callback function to have those same arguments:
+- `payload` which holds the state related to the hook. It can be modified to pass back additional information.
+- `context` exposing data about the devtools
+
+Example:
+
+```js{6-8}
+export function setupDevtools (app) {
+ setupDevtoolsPlugin({
+ id: 'my-awesome-devtools-plugin',
+ // ...
+ }, api => {
+ api.on.hookNameHere((payload, context) => {
+ // Do something...
+ })
+ })
+}
+```
+
+Every hook handle asynchronous callbacks:
+
+```js{6-8}
+export function setupDevtools (app) {
+ setupDevtoolsPlugin({
+ id: 'my-awesome-devtools-plugin',
+ // ...
+ }, api => {
+ api.on.hookNameHere(async (payload, context) => {
+ await something()
+ })
+ })
+}
+```
+
+All the registered callbacks will be called sequentially including the asynchronous ones, in the order they were registered on the page.
+
+### Components tree
+
+To add tags to the components tree, we can use the [`visitComponentTree`](./api-reference.md#on-visitcomponenttree) hook:
+
+```js{6-14}
+export function setupDevtools (app) {
+ setupDevtoolsPlugin({
+ id: 'my-awesome-devtools-plugin',
+ // ...
+ }, api => {
+ api.on.visitComponentTree((payload, context) => {
+ const node = payload.treeNode
+ if (payload.componentInstance.type.meow) {
+ node.tags.push({
+ label: 'meow',
+ textColor: 0x000000,
+ backgroundColor: 0xff984f
+ })
+ }
+ })
+ })
+}
+```
+
+This example will add a `meow` tag to any component that add the `meow: true` option to its definition:
+
+```js
+export default {
+ meow: true
+}
+```
+
+Here is an example result:
+
+
+
+### Colors
+
+Colors in the Vue Devtools API are encoded as numbers instead of strings. You can use `0x` in JavaScript to write an hexadecimal value:
+
+```js
+0x000000 // black
+0xFFFFFF // white
+0xFF984F // orange
+0x41B86A // green
+```
+
+Example:
+
+```js{6-7}
+api.on.visitComponentTree((payload, context) => {
+ const node = payload.treeNode
+ if (payload.componentInstance.type.meow) {
+ node.tags.push({
+ label: 'meow',
+ textColor: 0x000000,
+ backgroundColor: 0xff984f
+ })
+ }
+})
+```
+
+### Notify a change
+
+By default the Vue Devtools will determine when to update the components tree (and thus calling the hook again). We can force a refresh with the [`api.notifyComponentUpdate`](./api-reference.md#notifycomponentupdate) function:
+
+```js
+api.notifyComponentUpdate(componentInstance)
+```
+
+That way, if we know that the tags of a specific component should be changed, we can notify the Vue Devtools and then our hook callback will be called again.
+
+### Component state
+
+Adding new data to the component state inspector can be achieved with the [`inspectComponent`](./api-reference.md#on-inspectcomponent) hook:
+
+```js
+api.on.inspectComponent((payload, context) => {
+ // ...
+})
+```
+
+Each new field should be added to the `payload.instanceData.state` array:
+
+```js{2-6,8-12}
+api.on.inspectComponent((payload, context) => {
+ payload.instanceData.state.push({
+ type: 'My Awesome Plugin state',
+ key: '$hello',
+ value: data.message
+ })
+
+ payload.instanceData.state.push({
+ type: 'My Awesome Plugin state',
+ key: 'time counter',
+ value: data.counter
+ })
+})
+```
+
+Notice how we are passing some data to the Vue Devtools plugin from our library with the `data` argument of `setupDevtools` (see below).
+
+The `type` will be used to create a new section in the state inspector. It is recommended to use a variable:
+
+```js{1,10,16}
+const stateType = 'My Awesome Plugin state'
+
+export function setupDevtools (app, data) {
+ setupDevtoolsPlugin({
+ id: 'my-awesome-devtools-plugin',
+ // ...
+ }, api => {
+ api.on.inspectComponent((payload, context) => {
+ payload.instanceData.state.push({
+ type: stateType,
+ key: '$hello',
+ value: data.message
+ })
+
+ payload.instanceData.state.push({
+ type: stateType,
+ key: 'time counter',
+ value: data.counter
+ })
+ })
+ })
+}
+```
+
+Then, use this variable to declare your data type in the Vue Devtools plugin options using `componentStateTypes`:
+
+```js{7-9}
+export function setupDevtools (app) {
+ setupDevtoolsPlugin({
+ id: 'my-awesome-devtools-plugin',
+ label: 'My Awesome Plugin',
+ packageName: 'my-awesome-plugin',
+ homepage: 'https://vuejs.org',
+ componentStateTypes: [
+ stateType
+ ],
+ app
+ }, api => {
+ // ...
+ })
+}
+```
+
+Here is an example result:
+
+
+
+You can again use `notifyComponentUpdate` to force a state refresh of the current component if you don't pass any argument:
+
+```js
+api.notifyComponentUpdate()
+```
+
+### Editing component state
+
+You can mark some of your state fields as `editable` to allow editing by the user:
+
+```js
+payload.instanceData.state.push({
+ type: stateType,
+ key: '$hello',
+ value: data.message,
+ editable: true
+})
+```
+
+You can then handle the edition submit with the [`editComponentState`](./api-reference.md#on-editcomponentstate) hook:
+
+```js
+api.on.editComponentState((payload) => {
+ // ...
+})
+```
+
+Then, you have to check if the field being edited is coming from your plugin with `payload.type`:
+
+```js{2}
+api.on.editComponentState(payload => {
+ if (payload.type === stateType) {
+ // ...
+ }
+})
+```
+
+This way we don't do anything if the user is editing something else (like data properties).
+
+An edited field can be modified in the following ways:
+
+- assigning a new value,
+- adding a new property (object) or item (array),
+- removing a property or item.
+
+You can then use the `payload.set` helper function to apply the edition. The argument to `payload.set` should be the object holding our editable state:
+
+```js{3}
+api.on.editComponentState(payload => {
+ if (payload.type === stateType) {
+ payload.set(data)
+ }
+})
+```
+
+In this example, we execute `payload.set(data)` because we are sending the `data.message` editable state:
+
+```js{4}
+payload.instanceData.state.push({
+ type: stateType,
+ key: '$hello',
+ value: data.message,
+ editable: true
+})
+```
+
+You can also use a separate object to hold your editable state ([example](./api-reference.md#on-editcomponentstate)).
+
+## Custom inspector
+
+The Vue Devtools only have one inspector by default: the Components inspector. Vue Devtools plugins can introduce new inspectors alongside it to display more debugging information.
+
+To setup a custom inspector, your plugin must:
+
+1. Register the custom inspector with `addInspector`.
+2. Handle the `getInspectorTree` hook to populate the inspector tree (on the left or top of the devtools).
+3. Handle the `getInspectorState` hook to send state (on the right or bottom of the devtools).
+
+### Register the custom inspector
+
+Let's start by regiustering our custom inspector with [`addInspector`](./api-reference.md#addinspector):
+
+```js
+api.addInspector({
+ id: 'my-awesome-plugin',
+ label: 'Awesome!',
+ icon: 'pets',
+})
+```
+
+It is recommended to use a variable to store the inspector id as it will be needed in the hooks later:
+
+```js{1,9}
+const inspectorId = 'my-awesome-plugin'
+
+export function setupDevtools (app, data) {
+ setupDevtoolsPlugin({
+ id: 'my-awesome-devtools-plugin',
+ // ...
+ }, api => {
+ api.addInspector({
+ id: inspectorId,
+ label: 'Awesome!',
+ icon: 'pets',
+ })
+ })
+}
+```
+
+You can use any [Material Icon](https://fonts.google.com/icons) code for the icon, for example `note_add` or `drag_indicator`.
+
+Here is an example result:
+
+
+
+### Send inspector tree
+
+With the [`getInspectorTree`](./api-reference.md#on-getinspectortree), we can display a tree of nodes in our inspector:
+
+```js
+api.on.getInspectorTree((payload, context) => {
+ // ...
+})
+```
+
+But before that, we need to check if hook is called for the correct inspector (ours):
+
+```js{2}
+api.on.getInspectorTree((payload, context) => {
+ if (payload.inspectorId === inspectorId) {
+ // ...
+ }
+})
+```
+
+We can then put the nodes tree into `payload.rootNodes`:
+
+```js{3-29}
+api.on.getInspectorTree((payload, context) => {
+ if (payload.inspectorId === inspectorId) {
+ payload.rootNodes = [
+ {
+ id: 'root',
+ label: 'Awesome root',
+ children: [
+ {
+ id: 'child-1',
+ label: 'Child 1',
+ tags: [
+ {
+ label: 'awesome',
+ textColor: 0xffffff,
+ backgroundColor: 0x000000
+ }
+ ]
+ },
+ {
+ id: 'child-2',
+ label: 'Child 2'
+ }
+ ]
+ },
+ {
+ id: 'root2',
+ label: 'Amazing root'
+ }
+ ]
+ }
+})
+```
+
+Here is an example result:
+
+
+
+### Send the inspector state
+
+Use the [`getInspectorState`](./api-reference.md#on-getinspectorstate) hook to send the state depending on the selected node (check `payload.nodeId`):
+
+```js
+api.on.getInspectorState((payload, context) => {
+ if (payload.inspectorId === inspectorId) {
+ if (payload.nodeId === 'child-1') {
+ payload.state = {
+ 'my section': [
+ {
+ key: 'cat',
+ value: 'meow',
+ }
+ ]
+ }
+ }
+ else if (payload.nodeId === 'child-2') {
+ payload.state = {
+ 'my section': [
+ {
+ key: 'dog',
+ value: 'waf',
+ }
+ ]
+ }
+ }
+ }
+})
+```
+
+Don't forget to check if the inspector is the right one with `payload.inspectorId`!
+
+Here is an example result when selecting "Child 1":
+
+
+
+### Refresh the inspector
+
+The Vue Devtools will not automatically refresh your custom inspector. To send updates, you have two different available functions:
+
+- [`sendInspectorTree`](./api-reference.md#sendinspectortree) to refresh the nodes tree,
+- [`sendInspectorState`](./api-reference.md#sendinspectorstate) to refersh the state inspector.
+
+Example:
+
+```js
+// Update tree
+api.sendInspectorTree(inspectorId)
+
+// Update state
+api.sendInspectorState(inspectorId)
+```
+
+Calling those functions will call the `getInspectorTree` and `getInspectorState` hooks respectively.
+
+## Timeline
+
+The Vue Devtools comes with a few built-in layers on the Timeline, such as the Mouse & Keyboard events, the Component events and the Performance flamechart. You can add custom Timeline layers with the following steps:
+
+1. Register the layer with `addTimelineLayer`.
+2. Send events with `addTimelineEvent`.
+
+### Register a layer
+
+Use the [`addTimelineLayer`](./api-reference.md#addtimelinelayer) function to register your custom Timeline layer:
+
+```js{1,8-12}
+const timelineLayerId = 'my-awesome-plugin'
+
+export function setupDevtools (app, data) {
+ setupDevtoolsPlugin({
+ id: 'my-awesome-devtools-plugin',
+ // ...
+ }, api => {
+ api.addTimelineLayer({
+ id: timelineLayerId,
+ color: 0xff984f,
+ label: 'Awesome!'
+ })
+ })
+}
+```
+
+Here is an example result:
+
+
+
+### Send an event
+
+Adding new events is done with the [`addTimelineEvent`](./api-reference.md#addtimelineevent) function:
+
+```js{2-11}
+window.addEventListener('click', event => {
+ api.addTimelineEvent({
+ layerId: timelineLayerId,
+ event: {
+ time: api.now(),
+ data: {
+ mouseX: event.clientX,
+ mouseY: event.clientY
+ }
+ }
+ })
+})
+```
+
+You can set the `enableEarlyProxy` plugin option to `true` to be able to send timeline events before the Vue devtools are opened and connected:
+
+```js{2-5}
+setupDevtoolsPlugin({
+ id: 'my-awesome-devtools-plugin',
+ app,
+ enableEarlyProxy: true
+}, api => {
+ // `api` will be a proxy waiting for the real API to be available
+})
+```
+
+### Event group
+
+You can group events together. It will display them inside a pill-shaped rectangle, and will display the total duration of the group in the event inspector.
+
+Set the `groupId` option on the `event` with an identical value to create a group. Here is an example of a group with 3 events:
+
+```js
+const groupId = 'group-1'
+
+devtoolsApi.addTimelineEvent({
+ layerId: timelineLayerId,
+ event: {
+ time: api.now(),
+ data: {
+ label: 'group test'
+ },
+ title: 'group test',
+ groupId
+ }
+})
+
+devtoolsApi.addTimelineEvent({
+ layerId: timelineLayerId,
+ event: {
+ time: api.now() + 10,
+ data: {
+ label: 'group test (event 2)',
+ },
+ title: 'group test',
+ groupId
+ }
+})
+
+devtoolsApi.addTimelineEvent({
+ layerId: timelineLayerId,
+ event: {
+ time: api.now() + 20,
+ data: {
+ label: 'group test (event 3)',
+ },
+ title: 'group test',
+ groupId
+ }
+})
+```
+
+Here is the result on the timeline with the first event of the group selected:
+
+
+
+And the event inspector view with the "Group" tab:
+
+
+
+Notice the "group info" section with additional information about the group.
+
+### Events from the package
+
+Let's use the `addTimelineEvent` API to track an asynchronous method expose by our Vue plugin. We will call it `$doSomething`:
+
+```js{5-15}
+import { setupDevtools } from './devtools'
+
+export default {
+ install (app, options = {}) {
+ app.mixin({
+ methods: {
+ $doSomething () {
+ return new Promise(resolve => {
+ setTimeout(() => {
+ resolve('done')
+ }, 1000)
+ })
+ }
+ }
+ })
+
+ if (process.env.NODE_ENV === 'development' || __VUE_PROD_DEVTOOLS__) {
+ setupDevtools(app, data)
+ }
+ }
+}
+```
+
+We can now call this method from any component in the user application:
+
+```js
+this.$doSomething()
+```
+
+We would like to track this method from our library code, so we need to return a set of helper functions from our `setupDevtools` function. The `devtoolsApi` variable will hold the Vue Devtools API and the `devtools` variable will be an object with helper functions, which we will return:
+
+```js{2,4-6,12,17}
+export function setupDevtools (app, data) {
+ let devtoolsApi
+
+ const devtools = {
+ // Our helpers here
+ }
+
+ setupDevtoolsPlugin({
+ id: 'my-awesome-devtools-plugin',
+ // ...
+ }, api => {
+ devtoolsApi = api
+
+ // ...
+ })
+
+ return devtools
+}
+```
+
+Back in our library code, we can create a `devtools` variable to retrieve the result of `setupDevtools`, i.e. the object that will contain our helper functions:
+
+```js{5,12}
+import { setupDevtools } from './devtools'
+
+export default {
+ install (app, options = {}) {
+ let devtools
+
+ app.mixin({
+ // ...
+ })
+
+ if (process.env.NODE_ENV === 'development' || __VUE_PROD_DEVTOOLS__) {
+ devtools = setupDevtools(app)
+ }
+ }
+}
+```
+
+Let's implement a `trackStart` helper function to create one event when we want to start tracking a call, and another event when the call is finished:
+
+```js{3,6-37}
+export function setupDevtools (app, data) {
+ let devtoolsApi
+ let trackId = 0
+
+ const devtools = {
+ trackStart: (label: string) => {
+ const groupId = 'track' + trackId++
+
+ // Start
+ devtoolsApi.addTimelineEvent({
+ layerId: timelineLayerId,
+ event: {
+ time: api.now(),
+ data: {
+ label
+ },
+ title: label,
+ groupId
+ }
+ })
+
+ return () => {
+ // End
+ devtoolsApi.addTimelineEvent({
+ layerId: timelineLayerId,
+ event: {
+ time: api.now(),
+ data: {
+ label,
+ done: true
+ },
+ title: label,
+ groupId
+ }
+ })
+ }
+ }
+ }
+
+ setupDevtoolsPlugin({
+ id: 'my-awesome-devtools-plugin',
+ // ...
+ }, api => {
+ devtoolsApi = api
+
+ // ...
+ })
+
+ return devtools
+}
+```
+
+The `trackId` is used to generate a unique group ID for each time we are going to call `startTrack`. By using the same ID, we will create a group with the two events, even if they are not both created at the same time.
+
+We can use this `trackStart` helper function like this:
+
+```js
+const trackEnd = devtools.trackStart('some-label')
+// Later
+trackEnd()
+```
+
+We can now use this `trackStart` function in our library code:
+
+```js{6,9}
+let devtools
+
+app.mixin({
+ methods: {
+ $doSomething () {
+ const trackEnd = devtools ? devtools.trackStart('$doSomething') : null
+ return new Promise(resolve => {
+ setTimeout(() => {
+ if (trackEnd) trackEnd()
+ resolve('done')
+ }, 1000)
+ })
+ }
+ }
+})
+
+if (process.env.NODE_ENV === 'development' || __VUE_PROD_DEVTOOLS__) {
+ devtools = setupDevtools(app, data)
+}
+```
+
+::: warning
+We must be careful of checking if our `devtools` variable is defined, because we strip the devtools code out in production! See [Tree-shaking for production](#tree-shaking-for-production).
+:::
+
+Here is an example result:
+
+
+
+And the event inspector:
+
+
+
+---
+
+Thank you for following the Vue Devtools Plugin development guide! You can find more detailed descriptions of the API in the [API Reference](./api-reference.md). Happy building! 😸
diff --git a/vue-devtools/packages/docs/src/public/favicon.png b/vue-devtools/packages/docs/src/public/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..8d28c87285409ff468065716f4addc909f28865a
Binary files /dev/null and b/vue-devtools/packages/docs/src/public/favicon.png differ
diff --git a/vue-devtools/packages/docs/src/public/favicon.svg b/vue-devtools/packages/docs/src/public/favicon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4ee2e82507b0bf83f7b3843db2616d2eee8b330f
--- /dev/null
+++ b/vue-devtools/packages/docs/src/public/favicon.svg
@@ -0,0 +1,41 @@
+
+
diff --git a/vue-devtools/packages/docs/src/public/logo-chrome.svg b/vue-devtools/packages/docs/src/public/logo-chrome.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c40feec734250bd185a3f877d20167f4ccfaf01c
--- /dev/null
+++ b/vue-devtools/packages/docs/src/public/logo-chrome.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/vue-devtools/packages/docs/src/public/logo-edge.png b/vue-devtools/packages/docs/src/public/logo-edge.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc7e5d615013707bf8a182cf48eca43eb46d60c3
--- /dev/null
+++ b/vue-devtools/packages/docs/src/public/logo-edge.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bfed419ac8e93983548b1df41c7726d4e5551d95dbba5a11aa59d54b24acce18
+size 144710
diff --git a/vue-devtools/packages/docs/src/public/logo-electron.svg b/vue-devtools/packages/docs/src/public/logo-electron.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dc81c99d2cf5b8b49a4726fdafdbe58a43ceb38d
--- /dev/null
+++ b/vue-devtools/packages/docs/src/public/logo-electron.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/vue-devtools/packages/docs/src/public/logo-firefox.svg b/vue-devtools/packages/docs/src/public/logo-firefox.svg
new file mode 100644
index 0000000000000000000000000000000000000000..138627426077f5b7ee67810d1ce5f4aba74d7fb1
--- /dev/null
+++ b/vue-devtools/packages/docs/src/public/logo-firefox.svg
@@ -0,0 +1,111 @@
+
+
+
\ No newline at end of file
diff --git a/vue-devtools/packages/docs/src/public/logo-header.svg b/vue-devtools/packages/docs/src/public/logo-header.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a4a3a7bd914f72ccfe8bc15ba08cb94ad7ae35dd
--- /dev/null
+++ b/vue-devtools/packages/docs/src/public/logo-header.svg
@@ -0,0 +1,25 @@
+
+
diff --git a/vue-devtools/packages/docs/src/public/logo.png b/vue-devtools/packages/docs/src/public/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..9fa4c9ddeae352f5a4ce79e6e907696982c9cea2
Binary files /dev/null and b/vue-devtools/packages/docs/src/public/logo.png differ
diff --git a/vue-devtools/packages/docs/src/public/logo.svg b/vue-devtools/packages/docs/src/public/logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3f2f52f8bd3f0cd89aba471d35d1bdeca2ec8010
--- /dev/null
+++ b/vue-devtools/packages/docs/src/public/logo.svg
@@ -0,0 +1,37 @@
+
+
diff --git a/vue-devtools/packages/docs/src/release.md b/vue-devtools/packages/docs/src/release.md
new file mode 100644
index 0000000000000000000000000000000000000000..533358b0ec91da429d4f456805ba46282ad3a429
--- /dev/null
+++ b/vue-devtools/packages/docs/src/release.md
@@ -0,0 +1,32 @@
+# Releasing Devtools
+
+> This is for maintainers only.
+
+## Pre-requisites
+
+1. Make sure you have publishing rights to the `@vue/devtools` and `@vue/devtools-api` npm packages (check with `npm owner ls @vue/devtools`). If not, ping @yyx990803 for publishing permission.
+
+2. Sign up and create [API keys for Firefox Addons](https://addons.mozilla.org/developers/addon/api/key/). Create `.amo.env.json` in project root with the keys:
+
+ ```json
+ {
+ "apiKey": "...",
+ "apiSecret": "..."
+ }
+ ```
+
+3. Run `npm run release:beta`.
+
+ If it completes without error, it should have published the necessary npm packages.
+
+ In addition, this should create the following files:
+
+ - `dist/chrome.zip`
+
+ This is the packed chrome extension which should be uploaded via [Chrome Web Store developer dashboard](https://chrome.google.com/webstore/devconsole). Note the items are under the `vuejs-dev` publisher group. We current have two extensions, one for beta (currently Vue 3 only) and one for stable (Vue 2 only). We will eventually replace the stable with this branch once it supports both Vue 2 and Vue 3, but for now the Vue 3 supporting version should be published under the beta channel.
+
+ - `distvue.js_devtools-x.x.x.zip`
+
+ Similarly, the stable version of the Firefox Addon can be updated [here](https://addons.mozilla.org/en-US/developers/addon/vue-js-devtools/edit). But before then, we simply publish it as a pre-signed zip file. It should be added as a binary to the GitHub release.
+
+4. The release should have updated the versions of a few `package.json` files. Add and commit them, then add a git tag in the format of `v6.x.x`. Push both the commit and the tag to GitHub, and publish the release on GitHub (we should probably automate this with local script + GitHub actions).
diff --git a/vue-devtools/packages/docs/tailwind.config.cjs b/vue-devtools/packages/docs/tailwind.config.cjs
new file mode 100644
index 0000000000000000000000000000000000000000..34366c5314eead253bded26ac3567161cfa95dc6
--- /dev/null
+++ b/vue-devtools/packages/docs/tailwind.config.cjs
@@ -0,0 +1,12 @@
+const path = require('node:path')
+const base = require('../../tailwind.config.js')
+
+base.purge.content.push(
+ path.resolve(__dirname, './src/**/*.{js,jsx,ts,tsx,vue}'),
+)
+
+base.corePlugins = {
+ preflight: false,
+}
+
+module.exports = base
diff --git a/vue-devtools/packages/shared-utils/package.json b/vue-devtools/packages/shared-utils/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..f037d5d9573c186ed5cbb745bbe57b55e9d42e1a
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "@vue-devtools/shared-utils",
+ "version": "0.0.0",
+ "private": true,
+ "sideEffects": false,
+ "main": "./lib/index.js",
+ "types": "./lib/index.d.ts",
+ "scripts": {
+ "build": "rimraf lib && yarn ts",
+ "build:watch": "yarn ts -w",
+ "ts": "tsc -p tsconfig.json -d -outDir lib"
+ },
+ "dependencies": {
+ "@vue/devtools-api": "^6.0.0-beta.11"
+ },
+ "devDependencies": {
+ "@types/node": "^20.11.16",
+ "@types/webpack-env": "^1.15.1",
+ "typescript": "^5.3.3"
+ }
+}
diff --git a/vue-devtools/packages/shared-utils/src/backend.ts b/vue-devtools/packages/shared-utils/src/backend.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e459789bdf75e2a09ee3d9b77a73e448111529d8
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/src/backend.ts
@@ -0,0 +1,80 @@
+export const backendInjections = {
+ instanceMap: new Map(),
+ isVueInstance: (() => false) as ((value: any) => boolean),
+ getCustomInstanceDetails: (() => ({})) as ((instance: any) => any),
+ getCustomObjectDetails: (() => undefined) as (value: any, proto: string) => any,
+}
+
+export function getInstanceMap() {
+ return backendInjections.instanceMap
+}
+
+export function getCustomInstanceDetails(instance) {
+ return backendInjections.getCustomInstanceDetails(instance)
+}
+
+export function getCustomObjectDetails(value, proto: string) {
+ return backendInjections.getCustomObjectDetails(value, proto)
+}
+
+export function isVueInstance(value) {
+ return backendInjections.isVueInstance(value)
+}
+
+// @TODO refactor
+export function getCustomRouterDetails(router) {
+ return {
+ _custom: {
+ type: 'router',
+ display: 'VueRouter',
+ value: {
+ options: router.options,
+ currentRoute: router.currentRoute,
+ },
+ fields: {
+ abstract: true,
+ },
+ },
+ }
+}
+
+// @TODO refactor
+export function getCustomStoreDetails(store) {
+ return {
+ _custom: {
+ type: 'store',
+ display: 'Store',
+ value: {
+ state: store.state,
+ getters: getCatchedGetters(store),
+ },
+ fields: {
+ abstract: true,
+ },
+ },
+ }
+}
+
+// @TODO refactor
+export function getCatchedGetters(store) {
+ const getters = {}
+
+ const origGetters = store.getters || {}
+ const keys = Object.keys(origGetters)
+ for (let i = 0; i < keys.length; i++) {
+ const key = keys[i]
+ Object.defineProperty(getters, key, {
+ enumerable: true,
+ get: () => {
+ try {
+ return origGetters[key]
+ }
+ catch (e) {
+ return e
+ }
+ },
+ })
+ }
+
+ return getters
+}
diff --git a/vue-devtools/packages/shared-utils/src/bridge.ts b/vue-devtools/packages/shared-utils/src/bridge.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6c6fab2b86dc492a76745f9f8fd5c5c3a829d29a
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/src/bridge.ts
@@ -0,0 +1,114 @@
+// eslint-disable-next-line unicorn/prefer-node-protocol
+import { EventEmitter } from 'events'
+import { raf } from './raf'
+
+const BATCH_DURATION = 100
+
+export class Bridge extends EventEmitter {
+ wall: any // @TODO
+ _batchingQueue: any[] // @TODO
+ _sendingQueue: any[][] // @TODO
+ _receivingQueue: any[] // @TODO
+ _sending: boolean
+ _timer: NodeJS.Timeout
+
+ constructor(wall) {
+ super()
+ this.setMaxListeners(Number.POSITIVE_INFINITY)
+ this.wall = wall
+ wall.listen((messages) => {
+ if (Array.isArray(messages)) {
+ messages.forEach(message => this._emit(message))
+ }
+ else {
+ this._emit(messages)
+ }
+ })
+ this._batchingQueue = []
+ this._sendingQueue = []
+ this._receivingQueue = []
+ this._sending = false
+ }
+
+ on(event: string | symbol, listener: (...args: any[]) => void): this {
+ const wrappedListener = async (...args) => {
+ try {
+ await listener(...args)
+ }
+ catch (e) {
+ console.error(`[Bridge] Error in listener for event ${event.toString()} with args:`, args)
+ console.error(e)
+ }
+ }
+ return super.on(event, wrappedListener)
+ }
+
+ send(event: string, payload?: any) {
+ this._batchingQueue.push({
+ event,
+ payload,
+ })
+
+ if (this._timer == null) {
+ this._timer = setTimeout(() => this._flush(), BATCH_DURATION)
+ }
+ }
+
+ /**
+ * Log a message to the devtools background page.
+ */
+
+ log(message: string) {
+ this.send('log', message)
+ }
+
+ _flush() {
+ if (this._batchingQueue.length) {
+ this._send(this._batchingQueue)
+ }
+ clearTimeout(this._timer)
+ this._timer = null
+ this._batchingQueue = []
+ }
+
+ // @TODO types
+ _emit(message) {
+ if (typeof message === 'string') {
+ this.emit(message)
+ }
+ else if (message._chunk) {
+ this._receivingQueue.push(message._chunk)
+ if (message.last) {
+ this.emit(message.event, this._receivingQueue)
+ this._receivingQueue = []
+ }
+ }
+ else if (message.event) {
+ this.emit(message.event, message.payload)
+ }
+ }
+
+ // @TODO types
+ _send(messages) {
+ this._sendingQueue.push(messages)
+ this._nextSend()
+ }
+
+ _nextSend() {
+ if (!this._sendingQueue.length || this._sending) {
+ return
+ }
+ this._sending = true
+ const messages = this._sendingQueue.shift()
+ try {
+ this.wall.send(messages)
+ }
+ catch (err) {
+ if (err.message === 'Message length exceeded maximum allowed length.') {
+ this._sendingQueue.splice(0, 0, messages.map(message => [message]))
+ }
+ }
+ this._sending = false
+ raf(() => this._nextSend())
+ }
+}
diff --git a/vue-devtools/packages/shared-utils/src/consts.ts b/vue-devtools/packages/shared-utils/src/consts.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3bddabb1adedf51d1bc6d8bfba5c3cef77760dcc
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/src/consts.ts
@@ -0,0 +1,136 @@
+export enum BuiltinTabs {
+ COMPONENTS = 'components',
+ TIMELINE = 'timeline',
+ PLUGINS = 'plugins',
+ SETTINGS = 'settings',
+}
+
+export enum BridgeEvents {
+ // Misc
+ TO_BACK_SUBSCRIBE = 'b:subscribe',
+ TO_BACK_UNSUBSCRIBE = 'b:unsubscribe',
+ /** Backend is ready */
+ TO_FRONT_READY = 'f:ready',
+ /** Displays the "detected Vue" console log */
+ TO_BACK_LOG_DETECTED_VUE = 'b:log-detected-vue',
+ /** Force refresh */
+ TO_BACK_REFRESH = 'b:refresh',
+ /** Tab was switched */
+ TO_BACK_TAB_SWITCH = 'b:tab:switch',
+ TO_BACK_LOG = 'b:log',
+ /** Reconnected after background script is terminated (idle) */
+ TO_FRONT_RECONNECTED = 'f:reconnected',
+ /** Change app title (electron) */
+ TO_FRONT_TITLE = 'f:title',
+
+ // Apps
+ /** App was registered */
+ TO_FRONT_APP_ADD = 'f:app:add',
+ /** Get app list */
+ TO_BACK_APP_LIST = 'b:app:list',
+ TO_FRONT_APP_LIST = 'f:app:list',
+ TO_FRONT_APP_REMOVE = 'f:app:remove',
+ TO_BACK_APP_SELECT = 'b:app:select',
+ TO_FRONT_APP_SELECTED = 'f:app:selected',
+ TO_BACK_SCAN_LEGACY_APPS = 'b:app:scan-legacy',
+
+ // Components
+ TO_BACK_COMPONENT_TREE = 'b:component:tree',
+ TO_FRONT_COMPONENT_TREE = 'f:component:tree',
+ TO_BACK_COMPONENT_SELECTED_DATA = 'b:component:selected-data',
+ TO_FRONT_COMPONENT_SELECTED_DATA = 'f:component:selected-data',
+ TO_BACK_COMPONENT_EXPAND = 'b:component:expand',
+ TO_FRONT_COMPONENT_EXPAND = 'f:component:expand',
+ TO_BACK_COMPONENT_SCROLL_TO = 'b:component:scroll-to',
+ TO_BACK_COMPONENT_FILTER = 'b:component:filter',
+ TO_BACK_COMPONENT_MOUSE_OVER = 'b:component:mouse-over',
+ TO_BACK_COMPONENT_MOUSE_OUT = 'b:component:mouse-out',
+ TO_BACK_COMPONENT_CONTEXT_MENU_TARGET = 'b:component:context-menu-target',
+ TO_BACK_COMPONENT_EDIT_STATE = 'b:component:edit-state',
+ TO_BACK_COMPONENT_PICK = 'b:component:pick',
+ TO_FRONT_COMPONENT_PICK = 'f:component:pick',
+ TO_BACK_COMPONENT_PICK_CANCELED = 'b:component:pick-canceled',
+ TO_FRONT_COMPONENT_PICK_CANCELED = 'f:component:pick-canceled',
+ TO_BACK_COMPONENT_INSPECT_DOM = 'b:component:inspect-dom',
+ TO_FRONT_COMPONENT_INSPECT_DOM = 'f:component:inspect-dom',
+ TO_BACK_COMPONENT_RENDER_CODE = 'b:component:render-code',
+ TO_FRONT_COMPONENT_RENDER_CODE = 'f:component:render-code',
+ TO_FRONT_COMPONENT_UPDATED = 'f:component:updated',
+
+ // Timeline
+ TO_FRONT_TIMELINE_EVENT = 'f:timeline:event',
+ TO_BACK_TIMELINE_LAYER_LIST = 'b:timeline:layer-list',
+ TO_FRONT_TIMELINE_LAYER_LIST = 'f:timeline:layer-list',
+ TO_FRONT_TIMELINE_LAYER_ADD = 'f:timeline:layer-add',
+ TO_BACK_TIMELINE_SHOW_SCREENSHOT = 'b:timeline:show-screenshot',
+ TO_BACK_TIMELINE_CLEAR = 'b:timeline:clear',
+ TO_BACK_TIMELINE_EVENT_DATA = 'b:timeline:event-data',
+ TO_FRONT_TIMELINE_EVENT_DATA = 'f:timeline:event-data',
+ TO_BACK_TIMELINE_LAYER_LOAD_EVENTS = 'b:timeline:layer-load-events',
+ TO_FRONT_TIMELINE_LAYER_LOAD_EVENTS = 'f:timeline:layer-load-events',
+ TO_BACK_TIMELINE_LOAD_MARKERS = 'b:timeline:load-markers',
+ TO_FRONT_TIMELINE_LOAD_MARKERS = 'f:timeline:load-markers',
+ TO_FRONT_TIMELINE_MARKER = 'f:timeline:marker',
+
+ // Plugins
+ TO_BACK_DEVTOOLS_PLUGIN_LIST = 'b:devtools-plugin:list',
+ TO_FRONT_DEVTOOLS_PLUGIN_LIST = 'f:devtools-plugin:list',
+ TO_FRONT_DEVTOOLS_PLUGIN_ADD = 'f:devtools-plugin:add',
+ TO_BACK_DEVTOOLS_PLUGIN_SETTING_UPDATED = 'b:devtools-plugin:setting-updated',
+
+ // Custom inspectors
+ TO_BACK_CUSTOM_INSPECTOR_LIST = 'b:custom-inspector:list',
+ TO_FRONT_CUSTOM_INSPECTOR_LIST = 'f:custom-inspector:list',
+ TO_FRONT_CUSTOM_INSPECTOR_ADD = 'f:custom-inspector:add',
+ TO_BACK_CUSTOM_INSPECTOR_TREE = 'b:custom-inspector:tree',
+ TO_FRONT_CUSTOM_INSPECTOR_TREE = 'f:custom-inspector:tree',
+ TO_BACK_CUSTOM_INSPECTOR_STATE = 'b:custom-inspector:state',
+ TO_FRONT_CUSTOM_INSPECTOR_STATE = 'f:custom-inspector:state',
+ TO_BACK_CUSTOM_INSPECTOR_EDIT_STATE = 'b:custom-inspector:edit-state',
+ TO_BACK_CUSTOM_INSPECTOR_ACTION = 'b:custom-inspector:action',
+ TO_BACK_CUSTOM_INSPECTOR_NODE_ACTION = 'b:custom-inspector:node-action',
+ TO_FRONT_CUSTOM_INSPECTOR_SELECT_NODE = 'f:custom-inspector:select-node',
+
+ // Custom state
+ TO_BACK_CUSTOM_STATE_ACTION = 'b:custom-state:action',
+}
+
+export enum BridgeSubscriptions {
+ SELECTED_COMPONENT_DATA = 'component:selected-data',
+ COMPONENT_TREE = 'component:tree',
+}
+
+export enum HookEvents {
+ INIT = 'init',
+ APP_INIT = 'app:init',
+ APP_ADD = 'app:add',
+ APP_UNMOUNT = 'app:unmount',
+ COMPONENT_UPDATED = 'component:updated',
+ COMPONENT_ADDED = 'component:added',
+ COMPONENT_REMOVED = 'component:removed',
+ COMPONENT_EMIT = 'component:emit',
+ COMPONENT_HIGHLIGHT = 'component:highlight',
+ COMPONENT_UNHIGHLIGHT = 'component:unhighlight',
+ SETUP_DEVTOOLS_PLUGIN = 'devtools-plugin:setup',
+ TIMELINE_LAYER_ADDED = 'timeline:layer-added',
+ TIMELINE_EVENT_ADDED = 'timeline:event-added',
+ CUSTOM_INSPECTOR_ADD = 'custom-inspector:add',
+ CUSTOM_INSPECTOR_SEND_TREE = 'custom-inspector:send-tree',
+ CUSTOM_INSPECTOR_SEND_STATE = 'custom-inspector:send-state',
+ CUSTOM_INSPECTOR_SELECT_NODE = 'custom-inspector:select-node',
+ PERFORMANCE_START = 'perf:start',
+ PERFORMANCE_END = 'perf:end',
+ PLUGIN_SETTINGS_SET = 'plugin:settings:set',
+ /**
+ * @deprecated
+ */
+ FLUSH = 'flush',
+ /**
+ * @deprecated
+ */
+ TRACK_UPDATE = '_track-update',
+ /**
+ * @deprecated
+ */
+ FLASH_UPDATE = '_flash-update',
+}
diff --git a/vue-devtools/packages/shared-utils/src/edit.ts b/vue-devtools/packages/shared-utils/src/edit.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b365c7f4ffe6ccdbe83bdb7260bad387b1a333f2
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/src/edit.ts
@@ -0,0 +1,89 @@
+import type { EditStatePayload } from '@vue/devtools-api'
+
+export class StateEditor {
+ set(object, path, value, cb = null) {
+ const sections = Array.isArray(path) ? path : path.split('.')
+ while (sections.length > 1) {
+ object = object[sections.shift()]
+ if (this.isRef(object)) {
+ object = this.getRefValue(object)
+ }
+ }
+ const field = sections[0]
+ if (cb) {
+ cb(object, field, value)
+ }
+ else if (this.isRef(object[field])) {
+ this.setRefValue(object[field], value)
+ }
+ else {
+ object[field] = value
+ }
+ }
+
+ get(object, path) {
+ const sections = Array.isArray(path) ? path : path.split('.')
+ for (let i = 0; i < sections.length; i++) {
+ object = object[sections[i]]
+ if (this.isRef(object)) {
+ object = this.getRefValue(object)
+ }
+ if (!object) {
+ return undefined
+ }
+ }
+ return object
+ }
+
+ has(object, path, parent = false) {
+ if (typeof object === 'undefined') {
+ return false
+ }
+
+ const sections = Array.isArray(path) ? path.slice() : path.split('.')
+ const size = !parent ? 1 : 2
+ while (object && sections.length > size) {
+ object = object[sections.shift()]
+ if (this.isRef(object)) {
+ object = this.getRefValue(object)
+ }
+ }
+ return object != null && Object.prototype.hasOwnProperty.call(object, sections[0])
+ }
+
+ createDefaultSetCallback(state: EditStatePayload) {
+ return (obj, field, value) => {
+ if (state.remove || state.newKey) {
+ if (Array.isArray(obj)) {
+ obj.splice(field, 1)
+ }
+ else {
+ delete obj[field]
+ }
+ }
+ if (!state.remove) {
+ const target = obj[state.newKey || field]
+ if (this.isRef(target)) {
+ this.setRefValue(target, value)
+ }
+ else {
+ obj[state.newKey || field] = value
+ }
+ }
+ }
+ }
+
+ isRef(_ref: any): boolean {
+ // To implement in subclass
+ return false
+ }
+
+ setRefValue(_ref: any, _value: any): void {
+ // To implement in subclass
+ }
+
+ getRefValue(ref: any): any {
+ // To implement in subclass
+ return ref
+ }
+}
diff --git a/vue-devtools/packages/shared-utils/src/env.ts b/vue-devtools/packages/shared-utils/src/env.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bba23763386b912c51fe37d0197148979a7a6145
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/src/env.ts
@@ -0,0 +1,46 @@
+import type { App } from 'vue'
+
+export const isBrowser = typeof navigator !== 'undefined'
+export const target: any = isBrowser
+ ? window
+ : typeof globalThis !== 'undefined'
+ ? globalThis
+ : {}
+export const isChrome = typeof target.chrome !== 'undefined' && !!target.chrome.devtools
+export const isFirefox = isBrowser && navigator.userAgent.includes('Firefox')
+export const isWindows = isBrowser && navigator.platform.indexOf('Win') === 0
+export const isMac = isBrowser && navigator.platform === 'MacIntel'
+export const isLinux = isBrowser && navigator.platform.indexOf('Linux') === 0
+export const keys = {
+ ctrl: isMac ? '⌘' : 'Ctrl',
+ shift: 'Shift',
+ alt: isMac ? '⌥' : 'Alt',
+ del: 'Del',
+ enter: 'Enter',
+ esc: 'Esc',
+}
+
+export function initEnv(app: App) {
+ if (Object.prototype.hasOwnProperty.call(app.config.globalProperties, '$isChrome')) {
+ return
+ }
+
+ Object.defineProperties(app.config.globalProperties, {
+ $isChrome: { get: () => isChrome },
+ $isFirefox: { get: () => isFirefox },
+ $isWindows: { get: () => isWindows },
+ $isMac: { get: () => isMac },
+ $isLinux: { get: () => isLinux },
+ $keys: { get: () => keys },
+ })
+
+ if (isWindows) {
+ document.body.classList.add('platform-windows')
+ }
+ if (isMac) {
+ document.body.classList.add('platform-mac')
+ }
+ if (isLinux) {
+ document.body.classList.add('platform-linux')
+ }
+}
diff --git a/vue-devtools/packages/shared-utils/src/index.ts b/vue-devtools/packages/shared-utils/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fc485f5fb346c6f1ee62b4f42ec06d191f71f1a9
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/src/index.ts
@@ -0,0 +1,14 @@
+export * from './backend'
+export * from './bridge'
+export * from './consts'
+export * from './edit'
+export * from './env'
+export * from './plugin-permissions'
+export * from './plugin-settings'
+export * from './shared-data'
+export * from './shell'
+export * from './storage'
+export * from './throttle'
+export * from './transfer'
+export * from './util'
+export * from './raf'
diff --git a/vue-devtools/packages/shared-utils/src/plugin-permissions.ts b/vue-devtools/packages/shared-utils/src/plugin-permissions.ts
new file mode 100644
index 0000000000000000000000000000000000000000..19ef867771334ca9182e978a7368c4abe6ce8097
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/src/plugin-permissions.ts
@@ -0,0 +1,23 @@
+import { SharedData } from './shared-data'
+
+export enum PluginPermission {
+ ENABLED = 'enabled',
+ COMPONENTS = 'components',
+ CUSTOM_INSPECTOR = 'custom-inspector',
+ TIMELINE = 'timeline',
+}
+
+export function hasPluginPermission(pluginId: string, permission: PluginPermission) {
+ const result = SharedData.pluginPermissions[`${pluginId}:${permission}`]
+ if (result == null) {
+ return true
+ }
+ return !!result
+}
+
+export function setPluginPermission(pluginId: string, permission: PluginPermission, active: boolean) {
+ SharedData.pluginPermissions = {
+ ...SharedData.pluginPermissions,
+ [`${pluginId}:${permission}`]: active,
+ }
+}
diff --git a/vue-devtools/packages/shared-utils/src/plugin-settings.ts b/vue-devtools/packages/shared-utils/src/plugin-settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d351fd129ae689441dc330e458d0a2b09659e536
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/src/plugin-settings.ts
@@ -0,0 +1,27 @@
+import type { PluginSettingsItem } from '@vue/devtools-api'
+import { SharedData } from './shared-data'
+
+export function getPluginSettings = any>(pluginId: string, defaultSettings?: TSettings): TSettings {
+ return {
+ ...defaultSettings ?? {},
+ ...SharedData.pluginSettings[pluginId] ?? {},
+ }
+}
+
+export function setPluginSettings = any>(pluginId: string, settings: TSettings) {
+ SharedData.pluginSettings = {
+ ...SharedData.pluginSettings,
+ [pluginId]: settings,
+ }
+}
+
+export function getPluginDefaultSettings = any>(schema: Record): TSettings {
+ const result: Record = {}
+ if (schema) {
+ for (const id in schema) {
+ const item = schema[id]
+ result[id] = item.defaultValue
+ }
+ }
+ return result as TSettings
+}
diff --git a/vue-devtools/packages/shared-utils/src/raf.ts b/vue-devtools/packages/shared-utils/src/raf.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fe16a210603a8e1fa0223b4fe8f394ad78ee04e8
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/src/raf.ts
@@ -0,0 +1,20 @@
+let pendingCallbacks: Array<(time: number) => void> = []
+
+/**
+ * requestAnimationFrame that also works on non-browser environments like Node.
+ */
+export const raf = typeof requestAnimationFrame === 'function'
+ ? requestAnimationFrame
+ : (fn: (time: number) => void) => {
+ if (!pendingCallbacks.length) {
+ setImmediate(() => {
+ const now = performance.now()
+ const cbs = pendingCallbacks
+ // in case cbs add new callbacks
+ pendingCallbacks = []
+ cbs.forEach(cb => cb(now))
+ })
+ }
+
+ pendingCallbacks.push(fn)
+ }
diff --git a/vue-devtools/packages/shared-utils/src/shared-data.ts b/vue-devtools/packages/shared-utils/src/shared-data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4987dbf44b6f0315ce7262fb2f811018c750b92f
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/src/shared-data.ts
@@ -0,0 +1,240 @@
+import { reactive } from 'vue'
+import { getStorage, setStorage } from './storage'
+import type { Bridge } from './bridge'
+import { isBrowser, isMac } from './env'
+
+// Initial state
+const internalSharedData = {
+ openInEditorHost: '/',
+ componentNameStyle: 'class',
+ theme: 'auto',
+ displayDensity: 'low',
+ timeFormat: 'default',
+ recordVuex: true,
+ cacheVuexSnapshotsEvery: 50,
+ cacheVuexSnapshotsLimit: 10,
+ snapshotLoading: false,
+ componentEventsEnabled: true,
+ performanceMonitoringEnabled: true,
+ editableProps: false,
+ logDetected: true,
+ vuexNewBackend: false,
+ vuexAutoload: false,
+ vuexGroupGettersByModule: true,
+ showMenuScrollTip: true,
+ timelineRecording: false,
+ timelineTimeGrid: true,
+ timelineScreenshots: false,
+ menuStepScrolling: isMac,
+ pluginPermissions: {} as any,
+ pluginSettings: {} as any,
+ pageConfig: {} as any,
+ legacyApps: false,
+ trackUpdates: true,
+ flashUpdates: false,
+ debugInfo: false,
+ isBrowser,
+}
+
+type TSharedData = typeof internalSharedData
+
+const persisted = [
+ 'componentNameStyle',
+ 'theme',
+ 'displayDensity',
+ 'recordVuex',
+ 'editableProps',
+ 'logDetected',
+ 'vuexNewBackend',
+ 'vuexAutoload',
+ 'vuexGroupGettersByModule',
+ 'timeFormat',
+ 'showMenuScrollTip',
+ 'timelineRecording',
+ 'timelineTimeGrid',
+ 'timelineScreenshots',
+ 'menuStepScrolling',
+ 'pluginPermissions',
+ 'pluginSettings',
+ 'performanceMonitoringEnabled',
+ 'componentEventsEnabled',
+ 'trackUpdates',
+ 'flashUpdates',
+ 'debugInfo',
+]
+
+const storageVersion = '6.0.0-alpha.1'
+
+// ---- INTERNALS ---- //
+
+let bridge
+// List of fields to persist to storage (disabled if 'false')
+// This should be unique to each shared data client to prevent conflicts
+let persist = false
+let data
+
+let initRetryInterval
+let initRetryCount = 0
+
+export interface SharedDataParams {
+ bridge: Bridge
+ persist: boolean
+}
+
+const initCbs = []
+
+export function initSharedData(params: SharedDataParams): Promise {
+ return new Promise((resolve) => {
+ // Mandatory params
+ bridge = params.bridge
+ persist = !!params.persist
+
+ if (persist) {
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log('[shared data] Master init in progress...')
+ }
+ // Load persisted fields
+ persisted.forEach((key) => {
+ const value = getStorage(`vue-devtools-${storageVersion}:shared-data:${key}`)
+ if (value !== null) {
+ internalSharedData[key] = value
+ }
+ })
+ bridge.on('shared-data:load', () => {
+ // Send all fields
+ Object.keys(internalSharedData).forEach((key) => {
+ sendValue(key, internalSharedData[key])
+ })
+ bridge.send('shared-data:load-complete')
+ })
+ bridge.on('shared-data:init-complete', () => {
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log('[shared data] Master init complete')
+ }
+ clearInterval(initRetryInterval)
+ resolve()
+ })
+
+ bridge.send('shared-data:master-init-waiting')
+ // In case backend init is executed after frontend
+ bridge.on('shared-data:minion-init-waiting', () => {
+ bridge.send('shared-data:master-init-waiting')
+ })
+
+ initRetryCount = 0
+ clearInterval(initRetryInterval)
+ initRetryInterval = setInterval(() => {
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log('[shared data] Master init retrying...')
+ }
+ bridge.send('shared-data:master-init-waiting')
+ initRetryCount++
+ if (initRetryCount > 30) {
+ clearInterval(initRetryInterval)
+ console.error('[shared data] Master init failed')
+ }
+ }, 2000)
+ }
+ else {
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log('[shared data] Minion init in progress...')
+ }
+ bridge.on('shared-data:master-init-waiting', () => {
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log('[shared data] Minion loading data...')
+ }
+ // Load all persisted shared data
+ bridge.send('shared-data:load')
+ bridge.once('shared-data:load-complete', () => {
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log('[shared data] Minion init complete')
+ }
+ bridge.send('shared-data:init-complete')
+ resolve()
+ })
+ })
+ bridge.send('shared-data:minion-init-waiting')
+ }
+
+ data = reactive({ ...internalSharedData })
+
+ // Update value from other shared data clients
+ bridge.on('shared-data:set', ({ key, value }) => {
+ setValue(key, value)
+ })
+
+ initCbs.forEach(cb => cb())
+ })
+}
+
+export function onSharedDataInit(cb) {
+ initCbs.push(cb)
+ return () => {
+ const index = initCbs.indexOf(cb)
+ if (index !== -1) {
+ initCbs.splice(index, 1)
+ }
+ }
+}
+
+let watchers: Partial unknown)[]>> = {}
+
+export function destroySharedData() {
+ bridge.removeAllListeners('shared-data:set')
+ watchers = {}
+}
+
+function setValue(key: string, value: any) {
+ // Storage
+ if (persist && persisted.includes(key)) {
+ setStorage(`vue-devtools-${storageVersion}:shared-data:${key}`, value)
+ }
+ const oldValue = data[key]
+ data[key] = value
+ const handlers = watchers[key]
+ if (handlers) {
+ handlers.forEach(h => h(value, oldValue))
+ }
+ // Validate Proxy set trap
+ return true
+}
+
+function sendValue(key: string, value: any) {
+ bridge && bridge.send('shared-data:set', {
+ key,
+ value,
+ })
+}
+
+export function watchSharedData<
+ TKey extends keyof TSharedData,
+>(prop: TKey, handler: (value: TSharedData[TKey], oldValue: TSharedData[TKey]) => unknown) {
+ const list = watchers[prop] || (watchers[prop] = [])
+ list.push(handler)
+ return () => {
+ const index = list.indexOf(handler)
+ if (index !== -1) {
+ list.splice(index, 1)
+ }
+ }
+}
+
+const proxy: Partial = {}
+Object.keys(internalSharedData).forEach((key) => {
+ Object.defineProperty(proxy, key, {
+ configurable: false,
+ get: () => data[key],
+ set: (value) => {
+ sendValue(key, value)
+ setValue(key, value)
+ },
+ })
+})
+
+export const SharedData = proxy
diff --git a/vue-devtools/packages/shared-utils/src/shell.ts b/vue-devtools/packages/shared-utils/src/shell.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1bdc75b92eb0f2b489a9d5c2d2dff9d0509965d6
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/src/shell.ts
@@ -0,0 +1,6 @@
+import type { Bridge } from './bridge'
+
+export interface Shell {
+ connect: (cb: ((bridge: Bridge) => void | Promise)) => void
+ onReload: (cb: (() => void | Promise)) => void
+}
diff --git a/vue-devtools/packages/shared-utils/src/storage.ts b/vue-devtools/packages/shared-utils/src/storage.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5cd4e2c203dce1d0b2eaab7d284c4087e432be37
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/src/storage.ts
@@ -0,0 +1,91 @@
+import { target } from './env'
+
+// If we can, we use the browser extension API to store data
+// it's async though, so we synchronize changes from an intermediate
+// storageData object
+const useStorage = typeof target.chrome !== 'undefined' && typeof target.chrome.storage !== 'undefined'
+
+let storageData = null
+
+export function initStorage(): Promise {
+ return new Promise((resolve) => {
+ if (useStorage) {
+ target.chrome.storage.local.get(null, (result) => {
+ storageData = result
+ resolve()
+ })
+ }
+ else {
+ storageData = {}
+ resolve()
+ }
+ })
+}
+
+export function getStorage(key: string, defaultValue: any = null) {
+ checkStorage()
+ if (useStorage) {
+ return getDefaultValue(storageData[key], defaultValue)
+ }
+ else {
+ try {
+ return getDefaultValue(JSON.parse(localStorage.getItem(key)), defaultValue)
+ }
+ catch (e) {}
+ }
+}
+
+export function setStorage(key: string, val: any) {
+ checkStorage()
+ if (useStorage) {
+ storageData[key] = val
+ target.chrome.storage.local.set({ [key]: val })
+ }
+ else {
+ try {
+ localStorage.setItem(key, JSON.stringify(val))
+ }
+ catch (e) {}
+ }
+}
+
+export function removeStorage(key: string) {
+ checkStorage()
+ if (useStorage) {
+ delete storageData[key]
+ target.chrome.storage.local.remove([key])
+ }
+ else {
+ try {
+ localStorage.removeItem(key)
+ }
+ catch (e) {}
+ }
+}
+
+export function clearStorage() {
+ checkStorage()
+ if (useStorage) {
+ storageData = {}
+ target.chrome.storage.local.clear()
+ }
+ else {
+ try {
+ localStorage.clear()
+ }
+ catch (e) {}
+ }
+}
+
+function checkStorage() {
+ if (!storageData) {
+ throw new Error('Storage wasn\'t initialized with \'init()\'')
+ }
+}
+
+function getDefaultValue(value, defaultValue) {
+ if (value == null) {
+ return defaultValue
+ }
+ return value
+}
diff --git a/vue-devtools/packages/shared-utils/src/throttle.ts b/vue-devtools/packages/shared-utils/src/throttle.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ccf981ed33645ac90d3b81c5131543fc5aa16646
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/src/throttle.ts
@@ -0,0 +1,38 @@
+import throttle from 'lodash/throttle'
+
+interface ThrottleQueueItem {
+ fn: Function
+ key: string
+}
+
+export function createThrottleQueue(wait: number) {
+ const queue: ThrottleQueueItem[] = []
+ const tracker: Map = new Map()
+
+ function flush() {
+ for (const item of queue) {
+ item.fn()
+ tracker.delete(item.key)
+ }
+ queue.length = 0
+ }
+
+ const throttledFlush = throttle(flush, wait)
+
+ function add(key: string, fn: Function) {
+ if (!tracker.has(key)) {
+ const item = { key, fn }
+ queue.push(item)
+ tracker.set(key, item)
+ throttledFlush()
+ }
+ else {
+ const item = tracker.get(key)!
+ item.fn = fn
+ }
+ }
+
+ return {
+ add,
+ }
+}
diff --git a/vue-devtools/packages/shared-utils/src/transfer.ts b/vue-devtools/packages/shared-utils/src/transfer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2a576ee5a50b2f81c1c3034f54f62669eccd5978
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/src/transfer.ts
@@ -0,0 +1,126 @@
+const MAX_SERIALIZED_SIZE = 512 * 1024 // 1MB
+
+function encode(data, replacer, list, seen) {
+ let stored, key, value, i, l
+ const seenIndex = seen.get(data)
+ if (seenIndex != null) {
+ return seenIndex
+ }
+ const index = list.length
+ const proto = Object.prototype.toString.call(data)
+ if (proto === '[object Object]') {
+ stored = {}
+ seen.set(data, index)
+ list.push(stored)
+ const keys = Object.keys(data)
+ for (i = 0, l = keys.length; i < l; i++) {
+ key = keys[i]
+ try {
+ value = data[key]
+ if (replacer) {
+ value = replacer.call(data, key, value)
+ }
+ }
+ catch (e) {
+ value = e
+ }
+ stored[key] = encode(value, replacer, list, seen)
+ }
+ }
+ else if (proto === '[object Array]') {
+ stored = []
+ seen.set(data, index)
+ list.push(stored)
+ for (i = 0, l = data.length; i < l; i++) {
+ try {
+ value = data[i]
+ if (replacer) {
+ value = replacer.call(data, i, value)
+ }
+ }
+ catch (e) {
+ value = e
+ }
+ stored[i] = encode(value, replacer, list, seen)
+ }
+ }
+ else {
+ list.push(data)
+ }
+ return index
+}
+
+function decode(list, reviver) {
+ let i = list.length
+ let j, k, data, key, value, proto
+ while (i--) {
+ data = list[i]
+ proto = Object.prototype.toString.call(data)
+ if (proto === '[object Object]') {
+ const keys = Object.keys(data)
+ for (j = 0, k = keys.length; j < k; j++) {
+ key = keys[j]
+ value = list[data[key]]
+ if (reviver) {
+ value = reviver.call(data, key, value)
+ }
+ data[key] = value
+ }
+ }
+ else if (proto === '[object Array]') {
+ for (j = 0, k = data.length; j < k; j++) {
+ value = list[data[j]]
+ if (reviver) {
+ value = reviver.call(data, j, value)
+ }
+ data[j] = value
+ }
+ }
+ }
+}
+
+export function stringifyCircularAutoChunks(data: any, replacer: (this: any, key: string, value: any) => any = null, space: number = null) {
+ let result
+ try {
+ result = arguments.length === 1
+ ? JSON.stringify(data)
+ : JSON.stringify(data, replacer, space)
+ }
+ catch (e) {
+ result = stringifyStrictCircularAutoChunks(data, replacer, space)
+ }
+ if (result.length > MAX_SERIALIZED_SIZE) {
+ const chunkCount = Math.ceil(result.length / MAX_SERIALIZED_SIZE)
+ const chunks = []
+ for (let i = 0; i < chunkCount; i++) {
+ chunks.push(result.slice(i * MAX_SERIALIZED_SIZE, (i + 1) * MAX_SERIALIZED_SIZE))
+ }
+ return chunks
+ }
+ return result
+}
+
+export function parseCircularAutoChunks(data: any, reviver: (this: any, key: string, value: any) => any = null) {
+ if (Array.isArray(data)) {
+ data = data.join('')
+ }
+ const hasCircular = /^\s/.test(data)
+ if (!hasCircular) {
+ return arguments.length === 1
+ ? JSON.parse(data)
+ : JSON.parse(data, reviver)
+ }
+ else {
+ const list = JSON.parse(data)
+ decode(list, reviver)
+ return list[0]
+ }
+}
+
+export function stringifyStrictCircularAutoChunks(data: any, replacer: (this: any, key: string, value: any) => any = null, space: number = null) {
+ const list = []
+ encode(data, replacer, list, new Map())
+ return space
+ ? ` ${JSON.stringify(list, null, space)}`
+ : ` ${JSON.stringify(list)}`
+}
diff --git a/vue-devtools/packages/shared-utils/src/util.ts b/vue-devtools/packages/shared-utils/src/util.ts
new file mode 100644
index 0000000000000000000000000000000000000000..61fc5f8422b903399c10c9de41eb6c975f2adb9b
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/src/util.ts
@@ -0,0 +1,877 @@
+// eslint-disable-next-line unicorn/prefer-node-protocol
+import path from 'path'
+import type { CustomState } from '@vue/devtools-api'
+import { parseCircularAutoChunks, stringifyCircularAutoChunks } from './transfer'
+import {
+ getCustomInstanceDetails,
+ getCustomObjectDetails,
+ getCustomRouterDetails,
+ getCustomStoreDetails,
+ getInstanceMap,
+ isVueInstance,
+} from './backend'
+import { SharedData } from './shared-data'
+import { isChrome, target } from './env'
+
+function cached(fn) {
+ const cache = Object.create(null)
+ return function cachedFn(str) {
+ const hit = cache[str]
+ return hit || (cache[str] = fn(str))
+ }
+}
+
+const classifyRE = /(?:^|[-_/])(\w)/g
+export const classify = cached((str) => {
+ // fix: str.replace may causes '"replace" is not a function' exception.
+ // This bug may causes the UI 'Component Filter' to not work properly
+ // e.g. The type of 'str' is Number.
+ // So need cover 'str' to String.
+ return str && (`${str}`).replace(classifyRE, toUpper)
+})
+
+const camelizeRE = /-(\w)/g
+export const camelize = cached((str) => {
+ return str && str.replace(camelizeRE, toUpper)
+})
+
+const kebabizeRE = /([a-z0-9])([A-Z])/g
+export const kebabize = cached((str) => {
+ return str && str
+ .replace(kebabizeRE, (_, lowerCaseCharacter, upperCaseLetter) => {
+ return `${lowerCaseCharacter}-${upperCaseLetter}`
+ })
+ .toLowerCase()
+})
+
+function toUpper(_, c) {
+ return c ? c.toUpperCase() : ''
+}
+
+export function getComponentDisplayName(originalName, style = 'class') {
+ switch (style) {
+ case 'class':
+ return classify(originalName)
+ case 'kebab':
+ return kebabize(originalName)
+ case 'original':
+ default:
+ return originalName
+ }
+}
+
+export function inDoc(node) {
+ if (!node) {
+ return false
+ }
+ const doc = node.ownerDocument.documentElement
+ const parent = node.parentNode
+ return doc === node
+ || doc === parent
+ || !!(parent && parent.nodeType === 1 && (doc.contains(parent)))
+}
+
+/**
+ * Stringify/parse data using CircularJSON.
+ */
+
+export const UNDEFINED = '__vue_devtool_undefined__'
+export const INFINITY = '__vue_devtool_infinity__'
+export const NEGATIVE_INFINITY = '__vue_devtool_negative_infinity__'
+export const NAN = '__vue_devtool_nan__'
+
+export const SPECIAL_TOKENS = {
+ 'true': true,
+ 'false': false,
+ 'undefined': UNDEFINED,
+ 'null': null,
+ '-Infinity': NEGATIVE_INFINITY,
+ 'Infinity': INFINITY,
+ 'NaN': NAN,
+}
+
+export const MAX_STRING_SIZE = 10000
+export const MAX_ARRAY_SIZE = 5000
+
+export function specialTokenToString(value) {
+ if (value === null) {
+ return 'null'
+ }
+ else if (value === UNDEFINED) {
+ return 'undefined'
+ }
+ else if (value === NAN) {
+ return 'NaN'
+ }
+ else if (value === INFINITY) {
+ return 'Infinity'
+ }
+ else if (value === NEGATIVE_INFINITY) {
+ return '-Infinity'
+ }
+ return false
+}
+
+/**
+ * Needed to prevent stack overflow
+ * while replacing complex objects
+ * like components because we create
+ * new objects with the CustomValue API
+ * (.i.e `{ _custom: { ... } }`)
+ */
+class EncodeCache {
+ map: Map
+
+ constructor() {
+ this.map = new Map()
+ }
+
+ /**
+ * Returns a result unique to each input data
+ * @param {*} data Input data
+ * @param {*} factory Function used to create the unique result
+ */
+ cache(data: TData, factory: (data: TData) => TResult): TResult {
+ const cached: TResult = this.map.get(data)
+ if (cached) {
+ return cached
+ }
+ else {
+ const result = factory(data)
+ this.map.set(data, result)
+ return result
+ }
+ }
+
+ clear() {
+ this.map.clear()
+ }
+}
+
+const encodeCache = new EncodeCache()
+
+class ReviveCache {
+ map: Map
+ index: number
+ size: number
+ maxSize: number
+
+ constructor(maxSize: number) {
+ this.maxSize = maxSize
+ this.map = new Map()
+ this.index = 0
+ this.size = 0
+ }
+
+ cache(value: any) {
+ const currentIndex = this.index
+ this.map.set(currentIndex, value)
+ this.size++
+ if (this.size > this.maxSize) {
+ this.map.delete(currentIndex - this.size)
+ this.size--
+ }
+ this.index++
+ return currentIndex
+ }
+
+ read(id: number) {
+ return this.map.get(id)
+ }
+}
+
+const reviveCache = new ReviveCache(1000)
+
+const replacers = {
+ internal: replacerForInternal,
+ user: replaceForUser,
+}
+
+export function stringify(data, target: keyof typeof replacers = 'internal') {
+ // Create a fresh cache for each serialization
+ encodeCache.clear()
+ return stringifyCircularAutoChunks(data, replacers[target])
+}
+
+function replacerForInternal(key) {
+ // @ts-expect-error meow
+ const val = this[key]
+ const type = typeof val
+ if (Array.isArray(val)) {
+ const l = val.length
+ if (l > MAX_ARRAY_SIZE) {
+ return {
+ _isArray: true,
+ length: l,
+ items: val.slice(0, MAX_ARRAY_SIZE),
+ }
+ }
+ return val
+ }
+ else if (typeof val === 'string') {
+ if (val.length > MAX_STRING_SIZE) {
+ return `${val.substring(0, MAX_STRING_SIZE)}... (${(val.length)} total length)`
+ }
+ else {
+ return val
+ }
+ }
+ else if (type === 'undefined') {
+ return UNDEFINED
+ }
+ else if (val === Number.POSITIVE_INFINITY) {
+ return INFINITY
+ }
+ else if (val === Number.NEGATIVE_INFINITY) {
+ return NEGATIVE_INFINITY
+ }
+ else if (type === 'function') {
+ return getCustomFunctionDetails(val)
+ }
+ else if (type === 'symbol') {
+ return `[native Symbol ${Symbol.prototype.toString.call(val)}]`
+ }
+ else if (type === 'bigint') {
+ return getCustomBigIntDetails(val)
+ }
+ else if (val !== null && type === 'object') {
+ const proto = Object.prototype.toString.call(val)
+ if (proto === '[object Map]') {
+ return encodeCache.cache(val, () => getCustomMapDetails(val))
+ }
+ else if (proto === '[object Set]') {
+ return encodeCache.cache(val, () => getCustomSetDetails(val))
+ }
+ else if (proto === '[object RegExp]') {
+ // special handling of native type
+ return `[native RegExp ${RegExp.prototype.toString.call(val)}]`
+ }
+ else if (proto === '[object Date]') {
+ return getCustomDateDetails(val)
+ }
+ else if (proto === '[object Error]') {
+ return `[native Error ${val.message}<>${val.stack}]`
+ }
+ else if (val.state && val._vm) {
+ return encodeCache.cache(val, () => getCustomStoreDetails(val))
+ }
+ else if (val.constructor && val.constructor.name === 'VueRouter') {
+ return encodeCache.cache(val, () => getCustomRouterDetails(val))
+ }
+ else if (isVueInstance(val)) {
+ return encodeCache.cache(val, () => getCustomInstanceDetails(val))
+ }
+ else if (typeof val.render === 'function') {
+ return encodeCache.cache(val, () => getCustomComponentDefinitionDetails(val))
+ }
+ else if (val.constructor && val.constructor.name === 'VNode') {
+ return `[native VNode <${val.tag}>]`
+ }
+ else if (typeof HTMLElement !== 'undefined' && val instanceof HTMLElement) {
+ return encodeCache.cache(val, () => getCustomHTMLElementDetails(val))
+ }
+ else if (val.constructor?.name === 'Store' && val._wrappedGetters) {
+ return `[object Store]`
+ }
+ else if (val.currentRoute) {
+ return `[object Router]`
+ }
+ const customDetails = getCustomObjectDetails(val, proto)
+ if (customDetails != null) {
+ return customDetails
+ }
+ }
+ else if (Number.isNaN(val)) {
+ return NAN
+ }
+ return sanitize(val)
+}
+
+// @TODO revive from backend to have more data to the clipboard
+function replaceForUser(key) {
+ // @ts-expect-error meow
+ let val = this[key]
+ const type = typeof val
+ if (val?._custom && 'value' in val._custom) {
+ val = val._custom.value
+ }
+ if (type !== 'object') {
+ if (val === UNDEFINED) {
+ return undefined
+ }
+ else if (val === INFINITY) {
+ return Number.POSITIVE_INFINITY
+ }
+ else if (val === NEGATIVE_INFINITY) {
+ return Number.NEGATIVE_INFINITY
+ }
+ else if (val === NAN) {
+ return Number.NaN
+ }
+ return val
+ }
+ return sanitize(val)
+}
+
+export function getCustomMapDetails(val) {
+ const list = []
+ val.forEach(
+ (value, key) => list.push({
+ key,
+ value,
+ }),
+ )
+ return {
+ _custom: {
+ type: 'map',
+ display: 'Map',
+ value: list,
+ readOnly: true,
+ fields: {
+ abstract: true,
+ },
+ },
+ }
+}
+
+export function reviveMap(val) {
+ const result = new Map()
+ const list = val._custom.value
+ for (let i = 0; i < list.length; i++) {
+ const { key, value } = list[i]
+ result.set(key, revive(value))
+ }
+ return result
+}
+
+export function getCustomSetDetails(val) {
+ const list = Array.from(val)
+ return {
+ _custom: {
+ type: 'set',
+ display: `Set[${list.length}]`,
+ value: list,
+ readOnly: true,
+ },
+ }
+}
+
+export function reviveSet(val) {
+ const result = new Set()
+ const list = val._custom.value
+ for (let i = 0; i < list.length; i++) {
+ const value = list[i]
+ result.add(revive(value))
+ }
+ return result
+}
+
+export function getCustomBigIntDetails(val) {
+ const stringifiedBigInt = BigInt.prototype.toString.call(val)
+ return {
+ _custom: {
+ type: 'bigint',
+ display: `BigInt(${stringifiedBigInt})`,
+ value: stringifiedBigInt,
+ },
+ }
+}
+
+export function getCustomDateDetails(val: Date) {
+ const dateCopy = new Date(val.getTime())
+ dateCopy.setMinutes(dateCopy.getMinutes() - dateCopy.getTimezoneOffset())
+
+ const displayedTime = Date.prototype.toString.call(val)
+ return {
+ _custom: {
+ type: 'date',
+ display: displayedTime,
+ value: dateCopy.toISOString().slice(0, -1),
+ skipSerialize: true,
+ },
+ }
+}
+
+// Use a custom basename functions instead of the shimed version
+// because it doesn't work on Windows
+export function basename(filename, ext) {
+ filename = filename.replace(/\\/g, '/')
+ if (filename.includes(`/index${ext}`)) {
+ filename = filename.replace(`/index${ext}`, ext)
+ }
+ return path.basename(
+ filename.replace(/^[a-z]:/i, ''),
+ ext,
+ )
+}
+
+export function getComponentName(options) {
+ const name = options.displayName || options.name || options._componentTag
+ if (name) {
+ return name
+ }
+ const file = options.__file // injected by vue-loader
+ if (file) {
+ return classify(basename(file, '.vue'))
+ }
+}
+
+export function getCustomComponentDefinitionDetails(def) {
+ let display = getComponentName(def)
+ if (display) {
+ if (def.name && def.__file) {
+ display += ` (${def.__file})`
+ }
+ }
+ else {
+ display = 'Unknown Component'
+ }
+ return {
+ _custom: {
+ type: 'component-definition',
+ display,
+ tooltip: 'Component definition',
+ ...def.__file
+ ? {
+ file: def.__file,
+ }
+ : {},
+ },
+ }
+}
+
+export function getCustomFunctionDetails(func: Function): CustomState {
+ let string = ''
+ let matches = null
+ try {
+ string = Function.prototype.toString.call(func)
+ matches = String.prototype.match.call(string, /\([\s\S]*?\)/)
+ }
+ catch (e) {
+ // Func is probably a Proxy, which can break Function.prototype.toString()
+ }
+ // Trim any excess whitespace from the argument string
+ const match = matches && matches[0]
+ const args = typeof match === 'string'
+ ? match
+ : '(?)'
+ const name = typeof func.name === 'string' ? func.name : ''
+ return {
+ _custom: {
+ type: 'function',
+ display: `function ${escape(name)}${args}`,
+ tooltip: string.trim() ? `${string}` : null,
+ _reviveId: reviveCache.cache(func),
+ },
+ }
+}
+
+export function getCustomHTMLElementDetails(value: HTMLElement): CustomState {
+ try {
+ return {
+ _custom: {
+ type: 'HTMLElement',
+ display: `<${value.tagName.toLowerCase()}>`,
+ value: namedNodeMapToObject(value.attributes),
+ actions: [
+ {
+ icon: 'input',
+ tooltip: 'Log element to console',
+ action: () => {
+ // eslint-disable-next-line no-console
+ console.log(value)
+ },
+ },
+ ],
+ },
+ }
+ }
+ catch (e) {
+ return {
+ _custom: {
+ type: 'HTMLElement',
+ display: `${String(value)}`,
+ },
+ }
+ }
+}
+
+function namedNodeMapToObject(map: NamedNodeMap) {
+ const result: any = {}
+ const l = map.length
+ for (let i = 0; i < l; i++) {
+ const node = map.item(i)
+ result[node.name] = node.value
+ }
+ return result
+}
+
+export function getCustomRefDetails(instance, key, ref) {
+ let value
+ if (Array.isArray(ref)) {
+ value = ref.map(r => getCustomRefDetails(instance, key, r)).map(data => data.value)
+ }
+ else {
+ let name
+ if (ref._isVue) {
+ name = getComponentName(ref.$options)
+ }
+ else {
+ name = ref.tagName.toLowerCase()
+ }
+
+ value = {
+ _custom: {
+ display: `<${name}${
+ ref.id ? ` id="${ref.id}"` : ''
+ }${ref.className ? ` class="${ref.className}"` : ''}>`,
+ uid: instance.__VUE_DEVTOOLS_UID__,
+ type: 'reference',
+ },
+ }
+ }
+ return {
+ type: '$refs',
+ key,
+ value,
+ editable: false,
+ }
+}
+
+export function parse(data: any, revive = false) {
+ return revive
+ ? parseCircularAutoChunks(data, reviver)
+ : parseCircularAutoChunks(data)
+}
+
+const specialTypeRE = /^\[native (\w+) (.*?)(?:<>[.\s]*)?\]$/
+const symbolRE = /^\[native Symbol Symbol\((.*)\)\]$/
+
+function reviver(key, val) {
+ return revive(val)
+}
+
+export function revive(val) {
+ if (val === UNDEFINED) {
+ return undefined
+ }
+ else if (val === INFINITY) {
+ return Number.POSITIVE_INFINITY
+ }
+ else if (val === NEGATIVE_INFINITY) {
+ return Number.NEGATIVE_INFINITY
+ }
+ else if (val === NAN) {
+ return Number.NaN
+ }
+ else if (val && val._custom) {
+ const { _custom: custom }: CustomState = val
+ if (custom.type === 'component') {
+ return getInstanceMap().get(custom.id)
+ }
+ else if (custom.type === 'map') {
+ return reviveMap(val)
+ }
+ else if (custom.type === 'set') {
+ return reviveSet(val)
+ }
+ else if (custom.type === 'bigint') {
+ return BigInt(custom.value)
+ }
+ else if (custom.type === 'date') {
+ return new Date(custom.value)
+ }
+ else if (custom._reviveId) {
+ return reviveCache.read(custom._reviveId)
+ }
+ else {
+ return revive(custom.value)
+ }
+ }
+ else if (symbolRE.test(val)) {
+ const [, string] = symbolRE.exec(val)
+ return Symbol.for(string)
+ }
+ else if (specialTypeRE.test(val)) {
+ const [, type, string,, details] = specialTypeRE.exec(val)
+ const result = new target[type](string)
+ if (type === 'Error' && details) {
+ result.stack = details
+ }
+ return result
+ }
+ else {
+ return val
+ }
+}
+
+/**
+ * Sanitize data to be posted to the other side.
+ * Since the message posted is sent with structured clone,
+ * we need to filter out any types that might cause an error.
+ *
+ * @param {*} data
+ * @return {*}
+ */
+
+function sanitize(data) {
+ if (
+ !isPrimitive(data)
+ && !Array.isArray(data)
+ && !isPlainObject(data)
+ ) {
+ // handle types that will probably cause issues in
+ // the structured clone
+ return Object.prototype.toString.call(data)
+ }
+ else {
+ return data
+ }
+}
+
+export function isPlainObject(obj) {
+ return Object.prototype.toString.call(obj) === '[object Object]'
+}
+
+function isPrimitive(data) {
+ if (data == null) {
+ return true
+ }
+ const type = typeof data
+ return (
+ type === 'string'
+ || type === 'number'
+ || type === 'boolean'
+ )
+}
+
+/**
+ * Searches a key or value in the object, with a maximum deepness
+ * @param {*} obj Search target
+ * @param {string} searchTerm Search string
+ * @returns {boolean} Search match
+ */
+export function searchDeepInObject(obj, searchTerm) {
+ const seen = new Map()
+ const result = internalSearchObject(obj, searchTerm.toLowerCase(), seen, 0)
+ seen.clear()
+ return result
+}
+
+const SEARCH_MAX_DEPTH = 10
+
+/**
+ * Executes a search on each field of the provided object
+ * @param {*} obj Search target
+ * @param {string} searchTerm Search string
+ * @param {Map} seen Map containing the search result to prevent stack overflow by walking on the same object multiple times
+ * @param {number} depth Deep search depth level, which is capped to prevent performance issues
+ * @returns {boolean} Search match
+ */
+function internalSearchObject(obj, searchTerm, seen, depth) {
+ if (depth > SEARCH_MAX_DEPTH) {
+ return false
+ }
+ let match = false
+ const keys = Object.keys(obj)
+ let key, value
+ for (let i = 0; i < keys.length; i++) {
+ key = keys[i]
+ value = obj[key]
+ match = internalSearchCheck(searchTerm, key, value, seen, depth + 1)
+ if (match) {
+ break
+ }
+ }
+ return match
+}
+
+/**
+ * Executes a search on each value of the provided array
+ * @param {*} array Search target
+ * @param {string} searchTerm Search string
+ * @param {Map} seen Map containing the search result to prevent stack overflow by walking on the same object multiple times
+ * @param {number} depth Deep search depth level, which is capped to prevent performance issues
+ * @returns {boolean} Search match
+ */
+function internalSearchArray(array, searchTerm, seen, depth) {
+ if (depth > SEARCH_MAX_DEPTH) {
+ return false
+ }
+ let match = false
+ let value
+ for (let i = 0; i < array.length; i++) {
+ value = array[i]
+ match = internalSearchCheck(searchTerm, null, value, seen, depth + 1)
+ if (match) {
+ break
+ }
+ }
+ return match
+}
+
+/**
+ * Checks if the provided field matches the search terms
+ * @param {string} searchTerm Search string
+ * @param {string} key Field key (null if from array)
+ * @param {*} value Field value
+ * @param {Map} seen Map containing the search result to prevent stack overflow by walking on the same object multiple times
+ * @param {number} depth Deep search depth level, which is capped to prevent performance issues
+ * @returns {boolean} Search match
+ */
+function internalSearchCheck(searchTerm, key, value, seen, depth) {
+ let match = false
+ let result
+ if (key === '_custom') {
+ key = value.display
+ value = value.value
+ }
+ (result = specialTokenToString(value)) && (value = result)
+ if (key && compare(key, searchTerm)) {
+ match = true
+ seen.set(value, true)
+ }
+ else if (seen.has(value)) {
+ match = seen.get(value)
+ }
+ else if (Array.isArray(value)) {
+ seen.set(value, null)
+ match = internalSearchArray(value, searchTerm, seen, depth)
+ seen.set(value, match)
+ }
+ else if (isPlainObject(value)) {
+ seen.set(value, null)
+ match = internalSearchObject(value, searchTerm, seen, depth)
+ seen.set(value, match)
+ }
+ else if (compare(value, searchTerm)) {
+ match = true
+ seen.set(value, true)
+ }
+ return match
+}
+
+/**
+ * Compares two values
+ * @param {*} value Mixed type value that will be cast to string
+ * @param {string} searchTerm Search string
+ * @returns {boolean} Search match
+ */
+function compare(value, searchTerm) {
+ return (`${value}`).toLowerCase().includes(searchTerm)
+}
+
+export function sortByKey(state) {
+ return state && state.slice().sort((a, b) => {
+ if (a.key < b.key) {
+ return -1
+ }
+ if (a.key > b.key) {
+ return 1
+ }
+ return 0
+ })
+}
+
+export function simpleGet(object, path) {
+ const sections = Array.isArray(path) ? path : path.split('.')
+ for (let i = 0; i < sections.length; i++) {
+ object = object[sections[i]]
+ if (!object) {
+ return undefined
+ }
+ }
+ return object
+}
+
+export function focusInput(el) {
+ el.focus()
+ el.setSelectionRange(0, el.value.length)
+}
+
+export function openInEditor(file) {
+ // Console display
+ const fileName = file.replace(/\\/g, '\\\\')
+ const src = `fetch('${SharedData.openInEditorHost}__open-in-editor?file=${encodeURI(file)}').then(response => {
+ if (response.ok) {
+ console.log('File ${fileName} opened in editor')
+ } else {
+ const msg = 'Opening component ${fileName} failed'
+ const target = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : {}
+ if (target.__VUE_DEVTOOLS_TOAST__) {
+ target.__VUE_DEVTOOLS_TOAST__(msg, 'error')
+ } else {
+ console.log('%c' + msg, 'color:red')
+ }
+ console.log('Check the setup of your project, see https://devtools.vuejs.org/guide/open-in-editor.html')
+ }
+ })`
+ if (isChrome) {
+ target.chrome.devtools.inspectedWindow.eval(src)
+ }
+ else {
+ // eslint-disable-next-line no-eval
+ eval(src)
+ }
+}
+
+const ESC = {
+ '<': '<',
+ '>': '>',
+ '"': '"',
+ '&': '&',
+}
+
+export function escape(s) {
+ return s.replace(/[<>"&]/g, escapeChar)
+}
+
+function escapeChar(a) {
+ return ESC[a] || a
+}
+
+export function copyToClipboard(state) {
+ let text: string
+
+ if (typeof state !== 'object') {
+ text = String(state)
+ }
+ else {
+ text = stringify(state, 'user')
+ }
+
+ // @TODO navigator.clipboard is buggy in extensions
+ if (typeof document === 'undefined') {
+ return
+ }
+ const dummyTextArea = document.createElement('textarea')
+ dummyTextArea.textContent = text
+ document.body.appendChild(dummyTextArea)
+ dummyTextArea.select()
+ document.execCommand('copy')
+ document.body.removeChild(dummyTextArea)
+}
+
+export function isEmptyObject(obj) {
+ return obj === UNDEFINED || !obj || Object.keys(obj).length === 0
+}
+
+/**
+ * chunk an array into smaller chunk of given size.
+ * @see https://stackoverflow.com/a/37826698
+ * @param array
+ * @param size
+ */
+export function chunk(array: unknown[], size: number): unknown[][] {
+ return array.reduce((resultArray, item, index) => {
+ const chunkIndex = Math.floor(index / size)
+
+ if (!resultArray[chunkIndex]) {
+ resultArray[chunkIndex] = [] // start a new chunk
+ }
+
+ resultArray[chunkIndex].push(item)
+
+ return resultArray
+ }, []) as unknown[][]
+}
diff --git a/vue-devtools/packages/shared-utils/tsconfig.json b/vue-devtools/packages/shared-utils/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..0cbd10f3e673f806cf5c4f8b554e7501d234f848
--- /dev/null
+++ b/vue-devtools/packages/shared-utils/tsconfig.json
@@ -0,0 +1,29 @@
+{
+ "compilerOptions": {
+ "target": "ES2019",
+ "module": "CommonJS",
+ "moduleResolution": "Node",
+ "resolveJsonModule": true,
+ "types": [
+ "node",
+ "webpack-env"
+ ],
+ "strictBindCallApply": true,
+ "strictFunctionTypes": true,
+ "alwaysStrict": true,
+ // Strict
+ "noImplicitAny": false,
+ "noImplicitThis": true,
+ "sourceMap": true,
+ "allowSyntheticDefaultImports": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "preserveWatchOutput": true
+ },
+ "include": [
+ "src/**/*"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
+}
diff --git a/vue-devtools/packages/shell-chrome/devtools-background.html b/vue-devtools/packages/shell-chrome/devtools-background.html
new file mode 100644
index 0000000000000000000000000000000000000000..1de9677747be50e3ae981ec8ce2c679eb691e512
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/devtools-background.html
@@ -0,0 +1,2 @@
+
+
diff --git a/vue-devtools/packages/shell-chrome/devtools.html b/vue-devtools/packages/shell-chrome/devtools.html
new file mode 100644
index 0000000000000000000000000000000000000000..a791e60b77fe5ef642912af80e3ecc93972f159a
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/devtools.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-chrome/icons/128-beta.png b/vue-devtools/packages/shell-chrome/icons/128-beta.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9642998d77ab097c511ec6a2aa3d9e405035f1e
Binary files /dev/null and b/vue-devtools/packages/shell-chrome/icons/128-beta.png differ
diff --git a/vue-devtools/packages/shell-chrome/icons/128-gray.png b/vue-devtools/packages/shell-chrome/icons/128-gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..f78d5dbcd85b69d6c73666107045d355520b44a3
Binary files /dev/null and b/vue-devtools/packages/shell-chrome/icons/128-gray.png differ
diff --git a/vue-devtools/packages/shell-chrome/icons/128.nuxt.png b/vue-devtools/packages/shell-chrome/icons/128.nuxt.png
new file mode 100644
index 0000000000000000000000000000000000000000..fad57759a0eef1f3dfba4506f2668a5d6b19b627
Binary files /dev/null and b/vue-devtools/packages/shell-chrome/icons/128.nuxt.png differ
diff --git a/vue-devtools/packages/shell-chrome/icons/128.png b/vue-devtools/packages/shell-chrome/icons/128.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0033f9afc2db03e92bb84d64e2672fcdf385dca
Binary files /dev/null and b/vue-devtools/packages/shell-chrome/icons/128.png differ
diff --git a/vue-devtools/packages/shell-chrome/icons/16-beta.png b/vue-devtools/packages/shell-chrome/icons/16-beta.png
new file mode 100644
index 0000000000000000000000000000000000000000..469c8e9212112ecde4467ddc91c8b38c8261b325
Binary files /dev/null and b/vue-devtools/packages/shell-chrome/icons/16-beta.png differ
diff --git a/vue-devtools/packages/shell-chrome/icons/16-gray.png b/vue-devtools/packages/shell-chrome/icons/16-gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..4192c5e477248f34a39b1b1a38ab3a9425641c0b
Binary files /dev/null and b/vue-devtools/packages/shell-chrome/icons/16-gray.png differ
diff --git a/vue-devtools/packages/shell-chrome/icons/16.nuxt.png b/vue-devtools/packages/shell-chrome/icons/16.nuxt.png
new file mode 100644
index 0000000000000000000000000000000000000000..05e23ae4e920df740080cce1a68e162a8c1bafec
Binary files /dev/null and b/vue-devtools/packages/shell-chrome/icons/16.nuxt.png differ
diff --git a/vue-devtools/packages/shell-chrome/icons/16.png b/vue-devtools/packages/shell-chrome/icons/16.png
new file mode 100644
index 0000000000000000000000000000000000000000..2fcb5a47acbb7c6b41f09d71260df66420fe3c07
Binary files /dev/null and b/vue-devtools/packages/shell-chrome/icons/16.png differ
diff --git a/vue-devtools/packages/shell-chrome/icons/48-beta.png b/vue-devtools/packages/shell-chrome/icons/48-beta.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c898eb89e19bcc1c09c1923c008d676e07fb0a4
Binary files /dev/null and b/vue-devtools/packages/shell-chrome/icons/48-beta.png differ
diff --git a/vue-devtools/packages/shell-chrome/icons/48-gray.png b/vue-devtools/packages/shell-chrome/icons/48-gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1729d8fe15f475041f3dce2c792c0c7b7ebdf24
Binary files /dev/null and b/vue-devtools/packages/shell-chrome/icons/48-gray.png differ
diff --git a/vue-devtools/packages/shell-chrome/icons/48.nuxt.png b/vue-devtools/packages/shell-chrome/icons/48.nuxt.png
new file mode 100644
index 0000000000000000000000000000000000000000..7aa05062c14d98fa26208eb881c66314a6c4bb14
Binary files /dev/null and b/vue-devtools/packages/shell-chrome/icons/48.nuxt.png differ
diff --git a/vue-devtools/packages/shell-chrome/icons/48.png b/vue-devtools/packages/shell-chrome/icons/48.png
new file mode 100644
index 0000000000000000000000000000000000000000..95278785897f944c760d3b797dc9f07c3ab5a4dc
Binary files /dev/null and b/vue-devtools/packages/shell-chrome/icons/48.png differ
diff --git a/vue-devtools/packages/shell-chrome/manifest.json b/vue-devtools/packages/shell-chrome/manifest.json
new file mode 100644
index 0000000000000000000000000000000000000000..d4e0b419b7c453a0a8b670e8a40f78726be030a5
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/manifest.json
@@ -0,0 +1,71 @@
+{
+ "name": "Vue.js devtools",
+ "version": "6.6.3",
+ "version_name": "6.6.3",
+ "description": "Browser DevTools extension for debugging Vue.js applications.",
+ "manifest_version": 3,
+ "icons": {
+ "16": "icons/16.png",
+ "48": "icons/48.png",
+ "128": "icons/128.png"
+ },
+ "action": {
+ "default_icon": {
+ "16": "icons/16-gray.png",
+ "48": "icons/48-gray.png",
+ "128": "icons/128-gray.png"
+ },
+ "default_title": "Vue Devtools",
+ "default_popup": "popups/not-found.html"
+ },
+ "web_accessible_resources": [
+ {
+ "resources": [
+ "devtools.html",
+ "devtools-background.html",
+ "build/backend.js",
+ "build/proxy.js",
+ "build/hook-exec.js",
+ "build/detector-exec.js"
+ ],
+ "matches": [
+ ""
+ ],
+ "extension_ids": []
+ }
+ ],
+ "devtools_page": "devtools-background.html",
+ "background": {
+ "service_worker": "build/service-worker.js"
+ },
+ "permissions": [
+ "storage",
+ "scripting"
+ ],
+ "host_permissions": [
+ ""
+ ],
+ "content_scripts": [
+ {
+ "matches": [
+ ""
+ ],
+ "js": [
+ "build/hook.js"
+ ],
+ "run_at": "document_start"
+ },
+ {
+ "matches": [
+ ""
+ ],
+ "js": [
+ "build/detector.js"
+ ],
+ "run_at": "document_idle"
+ }
+ ],
+ "content_security_policy": {
+ "extension_pages": "script-src 'self'; object-src 'self'"
+ }
+}
\ No newline at end of file
diff --git a/vue-devtools/packages/shell-chrome/package.json b/vue-devtools/packages/shell-chrome/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..1ec89326460e989b437536e716629b8237d5c4d8
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/package.json
@@ -0,0 +1,18 @@
+{
+ "name": "@vue-devtools/shell-chrome",
+ "version": "0.0.0",
+ "scripts": {
+ "build": "rimraf ./build && cross-env NODE_ENV=production webpack --progress"
+ },
+ "dependencies": {
+ "@vue-devtools/app-backend-core": "^0.0.0",
+ "@vue-devtools/app-frontend": "^0.0.0",
+ "@vue-devtools/shared-utils": "^0.0.0"
+ },
+ "devDependencies": {
+ "@vue-devtools/build-tools": "^0.0.0",
+ "rimraf": "^3.0.2",
+ "webpack": "^5.90.1",
+ "webpack-cli": "^5.1.4"
+ }
+}
diff --git a/vue-devtools/packages/shell-chrome/popups/devtools-screenshot.png b/vue-devtools/packages/shell-chrome/popups/devtools-screenshot.png
new file mode 100644
index 0000000000000000000000000000000000000000..2cf3e0e1a6044f604c3caf3ec29b26c996f0cf9c
Binary files /dev/null and b/vue-devtools/packages/shell-chrome/popups/devtools-screenshot.png differ
diff --git a/vue-devtools/packages/shell-chrome/popups/disabled.html b/vue-devtools/packages/shell-chrome/popups/disabled.html
new file mode 100644
index 0000000000000000000000000000000000000000..1e7841b162bdf06e8de488ed826338ca69498057
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/popups/disabled.html
@@ -0,0 +1,8 @@
+
+
+
+
+ Vue.js is detected on this page.
+ Devtools inspection is not available because it's in
+ production mode or explicitly disabled by the author.
+
diff --git a/vue-devtools/packages/shell-chrome/popups/disabled.nuxt.html b/vue-devtools/packages/shell-chrome/popups/disabled.nuxt.html
new file mode 100644
index 0000000000000000000000000000000000000000..0a8a8af3d7432b97bebf8014969c28f4a4004c39
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/popups/disabled.nuxt.html
@@ -0,0 +1,8 @@
+
+
+
+
+ Nuxt + Vue.js is detected on this page.
+ Devtools inspection is not available because it's in
+ production mode or explicitly disabled by the author.
+
diff --git a/vue-devtools/packages/shell-chrome/popups/enabled.html b/vue-devtools/packages/shell-chrome/popups/enabled.html
new file mode 100644
index 0000000000000000000000000000000000000000..a8ac2725f5ca5d44eba9bafa5eb4f7d14b0449d1
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/popups/enabled.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+ Vue.js is detected on this page.
+ Open DevTools and look for the Vue panel.
+
+
+
+ Troubleshooting
+
+
+
+
+
+
+
+
+
+ Nuxt + Vue.js is detected on this page.
+ Open DevTools and look for the Vue panel.
+
+
+
+ Troubleshooting
+
+
+
+ Vue.js not detected
+
diff --git a/vue-devtools/packages/shell-chrome/popups/popup.css b/vue-devtools/packages/shell-chrome/popups/popup.css
new file mode 100644
index 0000000000000000000000000000000000000000..91a1e8bc3f61d658af3fa0e38de3782d143c6a51
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/popups/popup.css
@@ -0,0 +1,47 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,700i');
+
+body {
+ font-family: Roboto, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1.4;
+ padding: 18px 24px;
+ color: #2c3e50;
+}
+
+body,
+p {
+ margin: 0;
+}
+
+p {
+ min-width: 200px;
+ max-width: 300px;
+}
+
+.short-paragraph {
+ min-width: initial;
+ white-space: nowrap;
+}
+
+a {
+ color: #42B983;
+}
+
+.flex {
+ display: flex;
+ align-items: center;
+}
+
+.screenshot {
+ position: relative;
+}
+
+.screenshot > img {
+ width: 140px;
+ height: 140px;
+ object-fit: cover;
+ border-radius: 100%;
+ margin-right: 24px;
+ box-shadow: 0 0 15px rgb(0 0 0 / 10%);
+}
diff --git a/vue-devtools/packages/shell-chrome/src/backend.js b/vue-devtools/packages/shell-chrome/src/backend.js
new file mode 100644
index 0000000000000000000000000000000000000000..d0456e1dd0ddeaf8982d9d462eee33ba69e84cd0
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/src/backend.js
@@ -0,0 +1,55 @@
+// this is injected to the app page when the panel is activated.
+
+import { initBackend } from '@back'
+import { Bridge } from '@vue-devtools/shared-utils'
+
+window.addEventListener('message', handshake)
+
+function sendListening() {
+ window.postMessage({
+ source: 'vue-devtools-backend-injection',
+ payload: 'listening',
+ }, '*')
+}
+sendListening()
+
+function handshake(e) {
+ if (e.data.source === 'vue-devtools-proxy' && e.data.payload === 'init') {
+ window.removeEventListener('message', handshake)
+
+ let listeners = []
+ const bridge = new Bridge({
+ listen(fn) {
+ const listener = (evt) => {
+ if (evt.data.source === 'vue-devtools-proxy' && evt.data.payload) {
+ fn(evt.data.payload)
+ }
+ }
+ window.addEventListener('message', listener)
+ listeners.push(listener)
+ },
+ send(data) {
+ // if (process.env.NODE_ENV !== 'production') {
+ // console.log('[chrome] backend -> devtools', data)
+ // }
+ window.postMessage({
+ source: 'vue-devtools-backend',
+ payload: data,
+ }, '*')
+ },
+ })
+
+ bridge.on('shutdown', () => {
+ listeners.forEach((l) => {
+ window.removeEventListener('message', l)
+ })
+ listeners = []
+ window.addEventListener('message', handshake)
+ })
+
+ initBackend(bridge)
+ }
+ else {
+ sendListening()
+ }
+}
diff --git a/vue-devtools/packages/shell-chrome/src/detector-exec.js b/vue-devtools/packages/shell-chrome/src/detector-exec.js
new file mode 100644
index 0000000000000000000000000000000000000000..da5f8813ec7e2e43c3932a1d4b2cb6f55b1a0137
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/src/detector-exec.js
@@ -0,0 +1,85 @@
+import { installToast } from '@back/toast'
+
+function sendMessage(message) {
+ window.postMessage({
+ key: '_vue-devtools-send-message',
+ message,
+ })
+}
+
+function detect() {
+ let delay = 1000
+ let detectRemainingTries = 10
+
+ function runDetect() {
+ // Method 1: Check Nuxt.js
+ const nuxtDetected = !!(window.__NUXT__ || window.$nuxt)
+
+ if (nuxtDetected) {
+ let Vue
+
+ if (window.$nuxt) {
+ Vue = window.$nuxt.$root && window.$nuxt.$root.constructor
+ }
+
+ sendMessage({
+ devtoolsEnabled: (/* Vue 2 */ Vue && Vue.config.devtools)
+ || (/* Vue 3.2.14+ */ window.__VUE_DEVTOOLS_GLOBAL_HOOK__ && window.__VUE_DEVTOOLS_GLOBAL_HOOK__.enabled),
+ vueDetected: true,
+ nuxtDetected: true,
+ }, '*')
+
+ return
+ }
+
+ // Method 2: Check Vue 3
+ const vueDetected = !!(window.__VUE__)
+ if (vueDetected) {
+ sendMessage({
+ devtoolsEnabled: /* Vue 3.2.14+ */ window.__VUE_DEVTOOLS_GLOBAL_HOOK__ && window.__VUE_DEVTOOLS_GLOBAL_HOOK__.enabled,
+ vueDetected: true,
+ }, '*')
+
+ return
+ }
+
+ // Method 3: Scan all elements inside document
+ const all = document.querySelectorAll('*')
+ let el
+ for (let i = 0; i < all.length; i++) {
+ if (all[i].__vue__) {
+ el = all[i]
+ break
+ }
+ }
+ if (el) {
+ let Vue = Object.getPrototypeOf(el.__vue__).constructor
+ while (Vue.super) {
+ Vue = Vue.super
+ }
+ sendMessage({
+ devtoolsEnabled: Vue.config.devtools,
+ vueDetected: true,
+ }, '*')
+ return
+ }
+
+ if (detectRemainingTries > 0) {
+ detectRemainingTries--
+ setTimeout(() => {
+ runDetect()
+ }, delay)
+ delay *= 5
+ }
+ }
+
+ setTimeout(() => {
+ runDetect()
+ }, 100)
+}
+
+// inject the hook
+if (document instanceof HTMLDocument) {
+ detect()
+ installToast()
+}
diff --git a/vue-devtools/packages/shell-chrome/src/detector.js b/vue-devtools/packages/shell-chrome/src/detector.js
new file mode 100644
index 0000000000000000000000000000000000000000..9c6397312883b40b61ee5d5733136da2ca90b8cf
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/src/detector.js
@@ -0,0 +1,12 @@
+window.addEventListener('message', (event) => {
+ if (event.data.key === '_vue-devtools-send-message') {
+ chrome.runtime.sendMessage(event.data.message)
+ }
+}, false)
+
+const script = document.createElement('script')
+script.src = chrome.runtime.getURL('build/detector-exec.js')
+script.onload = () => {
+ script.remove()
+}
+;(document.head || document.documentElement).appendChild(script)
diff --git a/vue-devtools/packages/shell-chrome/src/devtools-background.js b/vue-devtools/packages/shell-chrome/src/devtools-background.js
new file mode 100644
index 0000000000000000000000000000000000000000..69aeb183b2878cdfa5b8b9328a5d5d638db3be5f
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/src/devtools-background.js
@@ -0,0 +1,48 @@
+// This is the devtools script, which is called when the user opens the
+// Chrome devtool on a page. We check to see if we global hook has detected
+// Vue presence on the page. If yes, create the Vue panel; otherwise poll
+// for 10 seconds.
+
+let created = false
+let checkCount = 0
+
+chrome.devtools.network.onNavigated.addListener(createPanelIfHasVue)
+const checkVueInterval = setInterval(createPanelIfHasVue, 1000)
+createPanelIfHasVue()
+
+function createPanelIfHasVue() {
+ if (created || checkCount++ > 10) {
+ clearInterval(checkVueInterval)
+ return
+ }
+ chrome.devtools.inspectedWindow.eval(
+ '!!(window.__VUE_DEVTOOLS_GLOBAL_HOOK__ && (window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue || window.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.length))',
+ (hasVue) => {
+ if (!hasVue || created) {
+ return
+ }
+ clearInterval(checkVueInterval)
+ created = true
+ chrome.devtools.panels.create(
+ 'Vue',
+ 'icons/128.png',
+ 'devtools.html',
+ (panel) => {
+ // panel loaded
+ panel.onShown.addListener(onPanelShown)
+ panel.onHidden.addListener(onPanelHidden)
+ },
+ )
+ },
+ )
+}
+
+// Manage panel visibility
+
+function onPanelShown() {
+ chrome.runtime.sendMessage('vue-panel-shown')
+}
+
+function onPanelHidden() {
+ chrome.runtime.sendMessage('vue-panel-hidden')
+}
diff --git a/vue-devtools/packages/shell-chrome/src/devtools.js b/vue-devtools/packages/shell-chrome/src/devtools.js
new file mode 100644
index 0000000000000000000000000000000000000000..a18aca85eec50495a4eb31e91a8b683bb92b244d
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/src/devtools.js
@@ -0,0 +1,115 @@
+// this script is called when the VueDevtools panel is activated.
+
+import { initDevTools, setAppConnected } from '@front'
+import { Bridge, BridgeEvents } from '@vue-devtools/shared-utils'
+
+let disconnected = false
+let connectCount = 0
+let retryConnectTimer
+
+initDevTools({
+
+ /**
+ * Inject backend, connect to background, and send back the bridge.
+ *
+ * @param {Function} cb
+ */
+
+ connect(cb) {
+ // 1. inject backend code into page
+ injectScript(chrome.runtime.getURL('build/backend.js'), () => {
+ // 2. connect to background to setup proxy
+ let port
+
+ const onMessageHandlers = []
+
+ function connect() {
+ try {
+ clearTimeout(retryConnectTimer)
+ connectCount++
+ port = chrome.runtime.connect({
+ name: `${chrome.devtools.inspectedWindow.tabId}`,
+ })
+ disconnected = false
+ port.onDisconnect.addListener(() => {
+ disconnected = true
+ setAppConnected(false)
+
+ // Retry
+ retryConnectTimer = setTimeout(connect, 500)
+ })
+
+ if (connectCount > 1) {
+ onMessageHandlers.forEach(fn => port.onMessage.addListener(fn))
+ }
+ }
+ catch (e) {
+ console.error(e)
+ disconnected = true
+ setAppConnected(false)
+
+ // Retry
+ retryConnectTimer = setTimeout(connect, 1000)
+ }
+ }
+ connect()
+
+ const bridge = new Bridge({
+ listen(fn) {
+ port.onMessage.addListener(fn)
+ onMessageHandlers.push(fn)
+ },
+ send(data) {
+ if (!disconnected) {
+ // if (process.env.NODE_ENV !== 'production') {
+ // console.log('[chrome] devtools -> backend', data)
+ // }
+ port.postMessage(data)
+ }
+ },
+ })
+
+ bridge.on(BridgeEvents.TO_FRONT_RECONNECTED, () => {
+ setAppConnected(true)
+ })
+
+ // 3. send a proxy API to the panel
+ cb(bridge)
+ })
+ },
+
+ /**
+ * Register a function to reload the devtools app.
+ *
+ * @param {Function} reloadFn
+ */
+
+ onReload(reloadFn) {
+ chrome.devtools.network.onNavigated.addListener(reloadFn)
+ },
+})
+
+/**
+ * Inject a globally evaluated script, in the same context with the actual
+ * user app.
+ *
+ * @param {string} scriptName
+ * @param {Function} cb
+ */
+
+function injectScript(scriptName, cb) {
+ const src = `
+ (function() {
+ var script = document.constructor.prototype.createElement.call(document, 'script');
+ script.src = "${scriptName}";
+ document.documentElement.appendChild(script);
+ script.parentNode.removeChild(script);
+ })()
+ `
+ chrome.devtools.inspectedWindow.eval(src, (res, err) => {
+ if (err) {
+ console.error(err)
+ }
+ cb()
+ })
+}
diff --git a/vue-devtools/packages/shell-chrome/src/hook-exec.js b/vue-devtools/packages/shell-chrome/src/hook-exec.js
new file mode 100644
index 0000000000000000000000000000000000000000..7549d0f1680ea57e63532157a23d3551096b1079
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/src/hook-exec.js
@@ -0,0 +1,3 @@
+import { installHook } from '@back/hook'
+
+installHook(window)
diff --git a/vue-devtools/packages/shell-chrome/src/hook.js b/vue-devtools/packages/shell-chrome/src/hook.js
new file mode 100644
index 0000000000000000000000000000000000000000..16269d7e34059f76424ef26015ec4bb42b0335ac
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/src/hook.js
@@ -0,0 +1,6 @@
+const script = document.createElement('script')
+script.src = chrome.runtime.getURL('build/hook-exec.js')
+script.onload = () => {
+ script.remove()
+}
+;(document.head || document.documentElement).appendChild(script)
diff --git a/vue-devtools/packages/shell-chrome/src/proxy.js b/vue-devtools/packages/shell-chrome/src/proxy.js
new file mode 100644
index 0000000000000000000000000000000000000000..cb7e0e88abd90f2d66619e6725305b3808518ddf
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/src/proxy.js
@@ -0,0 +1,37 @@
+// This is a content-script that is injected only when the devtools are
+// activated. Because it is not injected using eval, it has full privilege
+// to the chrome runtime API. It serves as a proxy between the injected
+// backend and the Vue devtools panel.
+
+const port = chrome.runtime.connect({
+ name: 'content-script',
+})
+
+port.onMessage.addListener(sendMessageToBackend)
+window.addEventListener('message', sendMessageToDevtools)
+port.onDisconnect.addListener(handleDisconnect)
+
+sendMessageToBackend('init')
+
+function sendMessageToBackend(payload) {
+ window.postMessage({
+ source: 'vue-devtools-proxy',
+ payload,
+ }, '*')
+}
+
+function sendMessageToDevtools(e) {
+ if (e.data && e.data.source === 'vue-devtools-backend') {
+ port.postMessage(e.data.payload)
+ }
+ else if (e.data && e.data.source === 'vue-devtools-backend-injection') {
+ if (e.data.payload === 'listening') {
+ sendMessageToBackend('init')
+ }
+ }
+}
+
+function handleDisconnect() {
+ window.removeEventListener('message', sendMessageToDevtools)
+ sendMessageToBackend('shutdown')
+}
diff --git a/vue-devtools/packages/shell-chrome/src/service-worker.js b/vue-devtools/packages/shell-chrome/src/service-worker.js
new file mode 100644
index 0000000000000000000000000000000000000000..32fdaedb5d7a521491b4c51d2fa206554a38138e
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/src/service-worker.js
@@ -0,0 +1,130 @@
+// the background script runs all the time and serves as a central message
+// hub for each vue devtools (panel + proxy + backend) instance.
+
+const ports = {}
+
+chrome.runtime.onConnect.addListener((port) => {
+ let tab
+ let name
+ if (isNumeric(port.name)) {
+ tab = port.name
+ name = 'devtools'
+ installProxy(+port.name)
+ }
+ else {
+ tab = port.sender.tab.id
+ name = 'backend'
+ }
+
+ if (!ports[tab]) {
+ ports[tab] = {
+ devtools: null,
+ backend: null,
+ }
+ }
+ ports[tab][name] = port
+
+ if (ports[tab].devtools && ports[tab].backend) {
+ doublePipe(tab, ports[tab].devtools, ports[tab].backend)
+ }
+})
+
+function isNumeric(str) {
+ return `${+str}` === str
+}
+
+function installProxy(tabId) {
+ chrome.scripting.executeScript({
+ target: { tabId },
+ files: ['build/proxy.js'],
+ }, (res) => {
+ if (!res) {
+ ports[tabId].devtools.postMessage('proxy-fail')
+ }
+ else {
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log(`injected proxy to tab ${tabId}`)
+ }
+ }
+ })
+}
+
+function doublePipe(id, one, two) {
+ one.onMessage.addListener(lOne)
+ function lOne(message) {
+ if (message.event === 'log') {
+ // eslint-disable-next-line no-console
+ return console.log(`tab ${id}`, message.payload)
+ }
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log('%cdevtools -> backend', 'color:#888;', message)
+ }
+ two.postMessage(message)
+ }
+ two.onMessage.addListener(lTwo)
+ function lTwo(message) {
+ if (message.event === 'log') {
+ // eslint-disable-next-line no-console
+ return console.log(`tab ${id}`, message.payload)
+ }
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log('%cbackend -> devtools', 'color:#888;', message)
+ }
+ one.postMessage(message)
+ }
+ function shutdown() {
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log(`tab ${id} disconnected.`)
+ }
+ one.onMessage.removeListener(lOne)
+ two.onMessage.removeListener(lTwo)
+ one.disconnect()
+ two.disconnect()
+ ports[id] = null
+ }
+ one.onDisconnect.addListener(shutdown)
+ two.onDisconnect.addListener(shutdown)
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log(`tab ${id} connected.`)
+ }
+}
+
+chrome.runtime.onMessage.addListener((req, sender) => {
+ if (sender.tab && req.vueDetected) {
+ const suffix = req.nuxtDetected ? '.nuxt' : ''
+
+ chrome.action.setIcon({
+ tabId: sender.tab.id,
+ path: {
+ 16: chrome.runtime.getURL(`icons/16${suffix}.png`),
+ 48: chrome.runtime.getURL(`icons/48${suffix}.png`),
+ 128: chrome.runtime.getURL(`icons/128${suffix}.png`),
+ },
+ }, () => {
+ // noop
+ })
+ chrome.action.setPopup({
+ tabId: sender.tab.id,
+ popup: chrome.runtime.getURL(req.devtoolsEnabled ? `popups/enabled${suffix}.html` : `popups/disabled${suffix}.html`),
+ }, () => {
+ // noop
+ })
+ }
+
+ if (req.action === 'vue-take-screenshot' && sender.envType === 'devtools_child') {
+ browser.tabs.captureVisibleTab({
+ format: 'png',
+ }).then((dataUrl) => {
+ browser.runtime.sendMessage({
+ action: 'vue-screenshot-result',
+ id: req.id,
+ dataUrl,
+ })
+ })
+ }
+})
diff --git a/vue-devtools/packages/shell-chrome/webpack.config.js b/vue-devtools/packages/shell-chrome/webpack.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..ad00f1ee8d74da26ddccb9db644595998dfa60b9
--- /dev/null
+++ b/vue-devtools/packages/shell-chrome/webpack.config.js
@@ -0,0 +1,23 @@
+const path = require('node:path')
+const { createConfig } = require('@vue-devtools/build-tools')
+
+module.exports = createConfig({
+ entry: {
+ 'hook': './src/hook.js',
+ 'hook-exec': './src/hook-exec.js',
+ 'devtools': './src/devtools.js',
+ 'service-worker': './src/service-worker.js',
+ 'devtools-background': './src/devtools-background.js',
+ 'backend': './src/backend.js',
+ 'proxy': './src/proxy.js',
+ 'detector': './src/detector.js',
+ 'detector-exec': './src/detector-exec.js',
+ },
+ output: {
+ path: path.join(__dirname, 'build'),
+ filename: '[name].js',
+ },
+ devtool: process.env.NODE_ENV !== 'production'
+ ? 'inline-source-map'
+ : false,
+})
diff --git a/vue-devtools/packages/shell-dev-vue2/package.json b/vue-devtools/packages/shell-dev-vue2/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..8db2857751e6464c744be84540a596f53ddb8ba0
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "@vue-devtools/shell-dev-vue2",
+ "version": "0.0.0",
+ "private": true,
+ "scripts": {
+ "dev": "cross-env TAILWIND_MODE=watch PORT=8100 webpack serve"
+ },
+ "dependencies": {
+ "@vue-devtools/shell-host": "^0.0.0",
+ "vue": "^2.7.10",
+ "vue-router": "^3.6.5",
+ "vuex": "^3.6.2"
+ },
+ "devDependencies": {
+ "@vue-devtools/build-tools": "^0.0.0",
+ "cross-env": "^5.2.0",
+ "launch-editor-middleware": "^2.2.1",
+ "vue-loader": "^15.7.1",
+ "webpack": "^5.90.1",
+ "webpack-cli": "^5.1.4"
+ }
+}
diff --git a/vue-devtools/packages/shell-dev-vue2/public/target-electron.html b/vue-devtools/packages/shell-dev-vue2/public/target-electron.html
new file mode 100644
index 0000000000000000000000000000000000000000..c6c59bd5a2e9073bd15fd2712794ea15c6ed5948
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/public/target-electron.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue2/public/target-iframe.html b/vue-devtools/packages/shell-dev-vue2/public/target-iframe.html
new file mode 100644
index 0000000000000000000000000000000000000000..a52924bd2f2a692164f036b45d3e6d1fc5ecf5c4
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/public/target-iframe.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue2/public/target.html b/vue-devtools/packages/shell-dev-vue2/public/target.html
new file mode 100644
index 0000000000000000000000000000000000000000..1528f888c6d23a88005a9e60f6dd67a6884f9b65
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/public/target.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/Child.vue b/vue-devtools/packages/shell-dev-vue2/src/Child.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b09f6425c57054d03b38fb8c61cbe7faa7e7d2e0
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/Child.vue
@@ -0,0 +1,17 @@
+
+
+
+
+ {{ count }}
+
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/Counter.vue b/vue-devtools/packages/shell-dev-vue2/src/Counter.vue
new file mode 100644
index 0000000000000000000000000000000000000000..84d581a29e36fc62e9d9e76cc6f2a807ee549fa3
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/Counter.vue
@@ -0,0 +1,257 @@
+
+
+
+
+
{{ count }}
+
+
+
+
+
+
+
+
+
+
+
+
+
Your counter is {{ $store.getters.isPositive ? 'positive' : 'negative' }}
+
+
Vuex Module
+
+
+
foo: {{ foo }}
+
twoFoos: {{ twoFoos }}
+
+
+
+
+
+
+ {{ $store.state.dynamic }}
+ {{ $store.getters }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ $store.state.instant }}
+
+
{{ $store.state.deeplyNested }}
+
+
{{ $store.state.nested.nestedNested }}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/EventChild1.vue b/vue-devtools/packages/shell-dev-vue2/src/EventChild1.vue
new file mode 100644
index 0000000000000000000000000000000000000000..460865dd5f10a4b2d18ec3e7f6cb334dfad44ea6
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/EventChild1.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/EventChildCond.vue b/vue-devtools/packages/shell-dev-vue2/src/EventChildCond.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6bd3b4eec88221fd257462d5804f2f5f8d3d1471
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/EventChildCond.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/Events.vue b/vue-devtools/packages/shell-dev-vue2/src/Events.vue
new file mode 100644
index 0000000000000000000000000000000000000000..88bb4b04d88240f268a2acb9299325f0e01046f5
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/Events.vue
@@ -0,0 +1,42 @@
+
+
+
+
+
Events
+
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/Functional.vue b/vue-devtools/packages/shell-dev-vue2/src/Functional.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d1e97909e31f4ed0f9b31d1285ecc03a0d83a458
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/Functional.vue
@@ -0,0 +1,6 @@
+
+
+ Hello {{ props.name }}
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/Hidden.vue b/vue-devtools/packages/shell-dev-vue2/src/Hidden.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4f96f7170eb67e324dcd174f15cadc11bd9fe4ff
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/Hidden.vue
@@ -0,0 +1,11 @@
+
+
+
+ I'm hidden in the devtools
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/Init.vue b/vue-devtools/packages/shell-dev-vue2/src/Init.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1d31b18c4c264ca666f974aa972a79a61cda1a8b
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/Init.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/MyClass.js b/vue-devtools/packages/shell-dev-vue2/src/MyClass.js
new file mode 100644
index 0000000000000000000000000000000000000000..7260b4456d6490d367da4f9e4fa1e411cd959ba7
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/MyClass.js
@@ -0,0 +1,5 @@
+export default class MyClass {
+ constructor() {
+ this.msg = 'hi'
+ }
+}
diff --git a/vue-devtools/packages/shell-dev-vue2/src/NativeTypes.vue b/vue-devtools/packages/shell-dev-vue2/src/NativeTypes.vue
new file mode 100644
index 0000000000000000000000000000000000000000..48cd021bec906935c9075003a7ee902c9e18879d
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/NativeTypes.vue
@@ -0,0 +1,217 @@
+
+
+
+
+
Date: {{ date.toString() }} - Hours: {{ hours }} - Prototype: {{ date | prototypeString }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Large array size: {{ largeArray.length }}
+
+
+
Set
+
{{ setDisplay() }}
+
+
Map
+
{{ mapDisplay() }}
+
+
BigInt
+
{{ bigInt }}
+
+
+
+
+
+
+
{{ someArray }}
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/Other.vue b/vue-devtools/packages/shell-dev-vue2/src/Other.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5b99443543a6e080cda8630b92c178df6cf2bd90
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/Other.vue
@@ -0,0 +1,64 @@
+
+
+
+
+ Other {{ id }}
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/RefTester.vue b/vue-devtools/packages/shell-dev-vue2/src/RefTester.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b831afd2d6766aea966d9ce9d637cbe23c35a4a1
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/RefTester.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/Target.vue b/vue-devtools/packages/shell-dev-vue2/src/Target.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f7bc3d157d71086dff124978b233cdcf124df44e
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/Target.vue
@@ -0,0 +1,137 @@
+
+
+
+
+
{{ localMsg }} {{ msg }}
+
Regex: {{ regex.toString() }}
+
+
(Press enter to set)
+
+
+
+
+
+
+
+ Mouse over
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ hello
+
+
+
+
+
+
+
+
+
+ {{ item }}
+
+
+
+
+
Vuex Object
+
{{ object }}
+
Child route
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/router/NamedRoute.vue b/vue-devtools/packages/shell-dev-vue2/src/router/NamedRoute.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2bfe542afa715c17e8bcd8108c58c8a5fce94749
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/router/NamedRoute.vue
@@ -0,0 +1,10 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/router/ParentRoute.vue b/vue-devtools/packages/shell-dev-vue2/src/router/ParentRoute.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a31f026aa452e8cf1a7cb761a5ee6e0999c13418
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/router/ParentRoute.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
Parent
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/router/RouteOne.vue b/vue-devtools/packages/shell-dev-vue2/src/router/RouteOne.vue
new file mode 100644
index 0000000000000000000000000000000000000000..76706842dd70d8fb6931a580bdddeccfa667341f
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/router/RouteOne.vue
@@ -0,0 +1,11 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/router/RouteTwo.vue b/vue-devtools/packages/shell-dev-vue2/src/router/RouteTwo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6734e7f66b7072a56a9905dafad774b05236aa6
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/router/RouteTwo.vue
@@ -0,0 +1,11 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue2/src/router/RouteWithAlias.vue b/vue-devtools/packages/shell-dev-vue2/src/router/RouteWithAlias.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c2f4fae1b2f3be6a4482fd92af97d233cd9a1ecc
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue2/src/router/RouteWithAlias.vue
@@ -0,0 +1,10 @@
+
+
+
+
+
Hello from route with alias
+
+
Hello from before enter route
+
+
Hello from route with params: Username: {{ $route.params.username }}, Id: {{ $route.params.id }}
+
+
Hello from route with props: Username: {{ username }}, Id: {{ id }}
+
+
Hello from route with query: {{ $route.query }}
+
+
+
+ Go to Route One
+
+
+
+
+ Go to Route Two
+
+
+
+
+ Go to route with params
+
+
+
+
+ Go to named route
+
+
+
+
+ Go to route with query
+
+
+
+
+ Go to route with before enter
+
+
+
+
+ Go to route with redirect
+
+
+
+
+ Go to route with alias
+
+
+
+
+ Go to route with dyn. component
+
+
+
+
+ Go to route with props
+
+
+
+
+ Go to route with props (default)
+
+
+
+
+ Go to route parent
+
+
+
+
+ Go to route child
+
+
+
+
+
+
+
+
+
Hello from Vue 3
+
+
+ {{ count }}
+
+ {{ text }}
+
+
+
+
+
+ {{ time }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Store
+
+ {{ $store.getters.answer }}
+
+ {{ $store.getters.twoFoo }}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/App3.vue b/vue-devtools/packages/shell-dev-vue3/src/App3.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dbde1815a931bd0121301afec749c14a9844bc74
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/App3.vue
@@ -0,0 +1,30 @@
+
+
+
+ App 3
+
+
+
+
+
+ {{ msg }}
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/AsyncComponent.vue b/vue-devtools/packages/shell-dev-vue3/src/AsyncComponent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3dbaf9a858abd29126459eae6bde99618e23ce16
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/AsyncComponent.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/AsyncSetup.vue b/vue-devtools/packages/shell-dev-vue3/src/AsyncSetup.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dc7ca36e511996f99c71159b432346622c3ee59f
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/AsyncSetup.vue
@@ -0,0 +1,29 @@
+
+
+
+
+ Async setup:
+
{{ message }}
+
+ Child: {{ answer }} x2: {{ doubleAnswer }} x4: {{ reactiveObject.nestedComputed }}
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/Condition.vue b/vue-devtools/packages/shell-dev-vue3/src/Condition.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d17c44140e00840803a899754c37dae7a1f7776d
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/Condition.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/DomOrder.vue b/vue-devtools/packages/shell-dev-vue3/src/DomOrder.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dae74f0bb4739ee18e46354e35f775b1fb590902
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/DomOrder.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/EventEmit.vue b/vue-devtools/packages/shell-dev-vue3/src/EventEmit.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a715fa9cb7aba55d39c9e4c52956d5f87b3e7918
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/EventEmit.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/EventNesting.vue b/vue-devtools/packages/shell-dev-vue3/src/EventNesting.vue
new file mode 100644
index 0000000000000000000000000000000000000000..81f6941c496dc9cad8c0f9f93660ebd3ce6635f4
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/EventNesting.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/Form.vue b/vue-devtools/packages/shell-dev-vue3/src/Form.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5063d91c88eff9db65cd09a10f397243dd1f7d2b
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/Form.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/FormSection.vue b/vue-devtools/packages/shell-dev-vue3/src/FormSection.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c9fa4766763a542e378086ee620759aa45a7d43e
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/FormSection.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/Functional.vue b/vue-devtools/packages/shell-dev-vue3/src/Functional.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9310b6e0dca2bdcfb833c2704e1b01f272d19160
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/Functional.vue
@@ -0,0 +1,14 @@
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/Ghost.vue b/vue-devtools/packages/shell-dev-vue3/src/Ghost.vue
new file mode 100644
index 0000000000000000000000000000000000000000..60cf2ba709daf8409bd978a119e596f3a6340982
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/Ghost.vue
@@ -0,0 +1,11 @@
+
+
+
+ I'm a ghost component that will be not displayed in the devtools
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/Heavy.vue b/vue-devtools/packages/shell-dev-vue3/src/Heavy.vue
new file mode 100644
index 0000000000000000000000000000000000000000..87e23bd8f9621daacf48901ef9a3f4c789706ce4
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/Heavy.vue
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/Hello.vue b/vue-devtools/packages/shell-dev-vue3/src/Hello.vue
new file mode 100644
index 0000000000000000000000000000000000000000..85e3eeca1fdd12d502c58ec8fc581426d0ae8187
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/Hello.vue
@@ -0,0 +1,3 @@
+
+ Hello
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/IframeApp.vue b/vue-devtools/packages/shell-dev-vue3/src/IframeApp.vue
new file mode 100644
index 0000000000000000000000000000000000000000..64df44c23283a7747f2db27e5757d353c38bc983
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/IframeApp.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+ {{ msg }}
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/IndexComponent/index.vue b/vue-devtools/packages/shell-dev-vue3/src/IndexComponent/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a7e5dfc247159fe13ba212eaeb095fca375b6705
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/IndexComponent/index.vue
@@ -0,0 +1,3 @@
+
+ Index component
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/Mixins.vue b/vue-devtools/packages/shell-dev-vue3/src/Mixins.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4ac97f36bea4fbafc23409c09465f57018db66b5
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/Mixins.vue
@@ -0,0 +1,106 @@
+
+
+
+
+ {{ computedFromExtends }}
+
+ {{ computedFromMixin }}
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/NativeTypes.vue b/vue-devtools/packages/shell-dev-vue3/src/NativeTypes.vue
new file mode 100644
index 0000000000000000000000000000000000000000..06e7ee954dcca732ce5c591f9071c9e164ee18fb
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/NativeTypes.vue
@@ -0,0 +1,170 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Large array size: {{ largeArray.length }}
+
+
+
Set
+
{{ setDisplay() }}
+
+
Map
+
{{ mapDisplay() }}
+
+
BigInt
+
{{ bigInt }}
+
+
Date
+
{{ localDate }}
+
+
+ Nest children
+
+
+
+
+
+
+ Other {{ id }}
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/Provide.vue b/vue-devtools/packages/shell-dev-vue3/src/Provide.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8cfaec04ca441804f90dda96e8541010e08032d6
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/Provide.vue
@@ -0,0 +1,51 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/SetupDataLike.vue b/vue-devtools/packages/shell-dev-vue3/src/SetupDataLike.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e9b8cb826724ef3d4a5f0fe1a5f62e509b776512
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/SetupDataLike.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/SetupRender.js b/vue-devtools/packages/shell-dev-vue3/src/SetupRender.js
new file mode 100644
index 0000000000000000000000000000000000000000..6f063885760d0c93c44dce15826704e3b3333924
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/SetupRender.js
@@ -0,0 +1,15 @@
+import { defineComponent, h, reactive } from 'vue'
+
+export default defineComponent({
+ name: 'SetupRender',
+
+ setup() {
+ const state = reactive({
+ name: 'Foo bar',
+ })
+
+ return () => {
+ return h('h1', state.name)
+ }
+ },
+})
diff --git a/vue-devtools/packages/shell-dev-vue3/src/SetupScript.vue b/vue-devtools/packages/shell-dev-vue3/src/SetupScript.vue
new file mode 100644
index 0000000000000000000000000000000000000000..883bd3335c64bc1cce2ef8219f35448fea40928a
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/SetupScript.vue
@@ -0,0 +1,46 @@
+
+
+
+ {{ count }}
+ {{ double }}
+
+
+
+
+
+ {{ state2 }}
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/SetupTSScriptProps.vue b/vue-devtools/packages/shell-dev-vue3/src/SetupTSScriptProps.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b190264be1731391afe055f00800659d59cf5fa1
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/SetupTSScriptProps.vue
@@ -0,0 +1,9 @@
+
+
+
+ {{ props }}
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/SuspenseExample.vue b/vue-devtools/packages/shell-dev-vue3/src/SuspenseExample.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cca49b84b0f9f3a7995192cfadc8b7ebe0c14d43
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/SuspenseExample.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/VModelExample.vue b/vue-devtools/packages/shell-dev-vue3/src/VModelExample.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0d52e2ec06c2354b7016ee3725717e92da471837
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/VModelExample.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/devtools-plugin/index.js b/vue-devtools/packages/shell-dev-vue3/src/devtools-plugin/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ed2cca8c0dd767a800e249923941ea333da34a3c
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/devtools-plugin/index.js
@@ -0,0 +1,368 @@
+import { setupDevtoolsPlugin } from '@vue/devtools-api'
+import { reactive, ref } from 'vue'
+
+/** @type {import('@vue/devtools-api').DevtoolsPluginApi} */
+let devtoolsApi
+
+const stateType = 'extra properties (test)'
+
+export default {
+ install: (app) => {
+ setupDevtoolsPlugin({
+ id: 'test-plugin',
+ label: 'Test devtools plugin',
+ packageName: '@vue/devtools-shell-dev-vue3',
+ homepage: 'https://github.com/vuejs/vue-devtools',
+ logo: 'https://nodepackjs.com/favicon.png',
+ componentStateTypes: [
+ stateType,
+ ],
+ enableEarlyProxy: true,
+ settings: {
+ test1: {
+ label: 'I like vue devtools',
+ type: 'boolean',
+ defaultValue: true,
+ },
+ test2: {
+ label: 'Quick choice',
+ type: 'choice',
+ defaultValue: 'a',
+ options: [
+ { value: 'a', label: 'A' },
+ { value: 'b', label: 'B' },
+ { value: 'c', label: 'C' },
+ ],
+ component: 'button-group',
+ },
+ test3: {
+ label: 'Long choice',
+ type: 'choice',
+ defaultValue: 'a',
+ options: [
+ { value: 'a', label: 'A' },
+ { value: 'b', label: 'B' },
+ { value: 'c', label: 'C' },
+ { value: 'd', label: 'D' },
+ { value: 'e', label: 'E' },
+ ],
+ },
+ test4: {
+ label: 'What is your name?',
+ type: 'text',
+ defaultValue: '',
+ },
+ },
+ app,
+ }, (api) => {
+ devtoolsApi = api
+
+ console.log('settings', api.getSettings())
+
+ const time = 0
+
+ api.on.visitComponentTree((payload, ctx) => {
+ const node = payload.treeNode
+ if (node.name === 'MyApp') {
+ node.tags.push({
+ label: 'root',
+ textColor: 0x000000,
+ backgroundColor: 0xFF984F,
+ })
+ }
+ else {
+ node.tags.push({
+ label: 'test',
+ textColor: 0xFFAAAA,
+ backgroundColor: 0xFFEEEE,
+ })
+ }
+ })
+
+ const componentState = {
+ foo: 'bar',
+ }
+
+ api.on.inspectComponent((payload, ctx) => {
+ if (payload.instanceData) {
+ payload.instanceData.state.push({
+ type: stateType,
+ key: 'foo',
+ value: componentState.foo,
+ editable: true,
+ })
+ payload.instanceData.state.push({
+ type: stateType,
+ key: 'time',
+ value: {
+ _custom: {
+ type: null,
+ readOnly: true,
+ display: `${time}s`,
+ tooltip: 'Elapsed time',
+ value: time,
+ },
+ },
+ })
+
+ payload.instanceData.state.push({
+ type: 'fail',
+ key: 'state',
+ editable: true,
+ value: reactive({ n: ref(0) }),
+ })
+
+ return api.getComponentBounds(payload.componentInstance).then((bounds) => {
+ payload.instanceData.state.push({
+ type: stateType,
+ key: 'bounds',
+ value: bounds
+ ? {
+ left: bounds.left,
+ top: bounds.top,
+ width: bounds.width,
+ height: bounds.height,
+ }
+ : null,
+ })
+ }).then(() => api.getComponentName(payload.componentInstance))
+ .then((name) => {
+ payload.instanceData.state.push({
+ type: stateType,
+ key: 'component name',
+ value: name,
+ })
+ })
+ }
+ })
+
+ api.on.editComponentState((payload) => {
+ if (payload.type === stateType) {
+ payload.set(componentState)
+ }
+ })
+
+ // setInterval(() => {
+ // time += 5
+ // // Update component
+ // api.notifyComponentUpdate()
+ // // Update custom inspector
+ // api.sendInspectorTree('test-inspector')
+ // api.sendInspectorState('test-inspector')
+ // }, 5000)
+
+ api.addTimelineLayer({
+ id: 'test-layer',
+ label: 'Test layer with a name far too long that should really be much shorter',
+ color: 0x92A2BF,
+ })
+
+ api.addTimelineEvent({
+ layerId: 'test-layer',
+ event: {
+ time: api.now(),
+ title: 'Early event',
+ data: {},
+ },
+ })
+
+ for (let i = 0; i < 10; i++) {
+ api.addTimelineLayer({
+ id: `test-layer-${i}`,
+ label: `Empty ${i}`,
+ color: 0x92A2BF,
+ })
+ }
+
+ api.on.inspectTimelineEvent((payload) => {
+ if (payload.layerId === 'test-layer') {
+ return new Promise((resolve) => {
+ payload.data = {
+ ...payload.data,
+ hey: 'hello',
+ }
+ setTimeout(resolve, 1000)
+ })
+ }
+ })
+
+ api.on.timelineCleared(() => {
+ console.log('timeline is cleared!')
+ })
+
+ api.addInspector({
+ id: 'test-inspector',
+ label: 'Test inspector',
+ icon: 'tab_unselected',
+ treeFilterPlaceholder: 'Search for test...',
+ noSelectionText: 'Select a node to view details',
+ actions: [
+ {
+ icon: 'star',
+ tooltip: 'Test custom action',
+ action: () => {
+ console.log('Meow! 🐱')
+ api.selectInspectorNode('test-inspector', 'child')
+ },
+ },
+ ],
+ nodeActions: [
+ {
+ icon: 'help',
+ tooltip: 'Test custom node action',
+ action: (arg1) => {
+ console.log('Node action', arg1)
+ api.selectInspectorNode('test-inspector', 'child')
+ },
+ },
+ ],
+ })
+
+ api.addInspector({
+ id: 'test-inspector2',
+ label: 'Test inspector 2',
+ })
+
+ let componentInstances = []
+
+ api.on.getInspectorTree((payload) => {
+ if (payload.inspectorId === 'test-inspector') {
+ payload.rootNodes = [
+ {
+ id: 'root',
+ label: `Root (${time})`,
+ children: [
+ {
+ id: 'child',
+ label: `Child ${payload.filter}`,
+ tags: [
+ {
+ label: 'active',
+ textColor: 0x000000,
+ backgroundColor: 0xFF984F,
+ },
+ {
+ label: 'test',
+ textColor: 0xFFFFFF,
+ backgroundColor: 0x000000,
+ },
+ ],
+ },
+ ],
+ },
+ ]
+ }
+ else if (payload.inspectorId === 'test-inspector2') {
+ return api.getComponentInstances(app).then((instances) => {
+ componentInstances = instances
+ for (const instance of instances) {
+ payload.rootNodes.push({
+ id: instance.uid.toString(),
+ label: `Component ${instance.uid}`,
+ })
+ }
+ })
+ }
+ })
+
+ const myState = {
+ foo: 'bar',
+ }
+
+ api.on.getInspectorState((payload) => {
+ if (payload.inspectorId === 'test-inspector') {
+ if (payload.nodeId === 'root') {
+ payload.state = {
+ 'root info': [
+ {
+ key: 'foo',
+ value: myState.foo,
+ editable: true,
+ },
+ {
+ key: 'time',
+ value: time,
+ },
+ ],
+ }
+ }
+ else {
+ payload.state = {
+ 'child info': [
+ {
+ key: 'answer',
+ value: {
+ _custom: {
+ display: '42!!!',
+ value: 42,
+ tooltip: 'The answer',
+ },
+ },
+ },
+ ],
+ }
+ }
+ }
+ else if (payload.inspectorId === 'test-inspector2') {
+ const instance = componentInstances.find(instance => instance.uid.toString() === payload.nodeId)
+ if (instance) {
+ api.unhighlightElement()
+ api.highlightElement(instance)
+ }
+ }
+ })
+
+ api.on.editInspectorState((payload) => {
+ if (payload.inspectorId === 'test-inspector') {
+ if (payload.nodeId === 'root') {
+ payload.set(myState)
+ }
+ }
+ })
+
+ // Plugin settings change
+ api.on.setPluginSettings((payload) => {
+ console.log('plugin settings changed', payload)
+ })
+ })
+
+ // Outside of setupDevtoolsPlugin
+
+ window.addEventListener('mouseup', (event) => {
+ devtoolsApi && devtoolsApi.addTimelineEvent({
+ layerId: 'test-layer',
+ event: {
+ time: devtoolsApi.now(),
+ data: {
+ info: 'window.mouseup',
+ x: event.clientX,
+ y: event.clientY,
+ },
+ logType: event.clientX < 100 ? 'error' : event.clientY < 100 ? 'warning' : 'default',
+ },
+ })
+ })
+
+ window.addEventListener('keydown', (event) => {
+ devtoolsApi && devtoolsApi.addTimelineEvent({
+ layerId: 'test-layer',
+ event: {
+ time: devtoolsApi.now(),
+ data: {
+ info: 'window.keyup',
+ key: event.key,
+ },
+ groupId: event.key,
+ title: 'Group test',
+ meta: {
+ foo: 'bar',
+ },
+ },
+ })
+
+ if (devtoolsApi && event.key === 's') {
+ console.log('settings', devtoolsApi.getSettings())
+ }
+ })
+ },
+}
diff --git a/vue-devtools/packages/shell-dev-vue3/src/devtools-plugin/simple.js b/vue-devtools/packages/shell-dev-vue3/src/devtools-plugin/simple.js
new file mode 100644
index 0000000000000000000000000000000000000000..c0ad3b8d982faa8fcef88b38e7733a931562722b
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/devtools-plugin/simple.js
@@ -0,0 +1,19 @@
+import { setupDevtoolsPlugin } from '@vue/devtools-api'
+
+export default {
+ install: (app) => {
+ setupDevtoolsPlugin({
+ id: 'simple-plugin',
+ label: 'Simple devtools plugin',
+ app,
+ }, (api) => {
+ api.on.visitComponentTree((payload, ctx) => {
+ payload.treeNode.tags.push({
+ label: 'simple plugin',
+ textColor: 0xFFAAAA,
+ backgroundColor: 0xFFEEEE,
+ })
+ })
+ })
+ },
+}
diff --git a/vue-devtools/packages/shell-dev-vue3/src/iframe-app.js b/vue-devtools/packages/shell-dev-vue3/src/iframe-app.js
new file mode 100644
index 0000000000000000000000000000000000000000..704d761324b67d17537acd8dae837dab889a4354
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/iframe-app.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import IframeApp from './IframeApp.vue'
+
+createApp(IframeApp).mount('#app')
diff --git a/vue-devtools/packages/shell-dev-vue3/src/main.js b/vue-devtools/packages/shell-dev-vue3/src/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..a0fa435d71aff0ec1c6700dd7ae6417ef588939c
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/main.js
@@ -0,0 +1,68 @@
+import { createApp, h } from 'vue'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import App from './App.vue'
+import App3 from './App3.vue'
+import TestPlugin from './devtools-plugin'
+import SimplePlugin from './devtools-plugin/simple'
+import store from './store'
+
+// eslint-disable-next-line no-extend-native
+Array.prototype.foo = 'bar'
+
+const router = createRouter({
+ history: createWebHashHistory(),
+
+ routes: [
+ {
+ path: '/p1',
+ component: import('./router/Page1.vue'),
+ },
+ {
+ path: '/p2',
+ component: import('./router/Page2.vue'),
+ },
+ ],
+})
+
+const app = createApp(App)
+app.component('global', {
+ render: () => 'I\'m a global component',
+})
+app.use(router)
+app.use(store)
+app.use(TestPlugin)
+app.mount('#app')
+
+const app2 = createApp({
+ name: 'App2',
+ render: () => h('h1', 'App 2'),
+})
+app2.mount('#app2')
+
+const app2bis = createApp({
+ name: 'App2',
+ render: () => h('h1', 'App 2 Bis'),
+})
+app2bis.mount('#app2bis')
+
+createApp(App3).mount('#app3')
+
+createApp({
+ render: () => h('button', {
+ onClick: () => app2.unmount(),
+ }, 'Remove app 2'),
+ devtools: {
+ hide: true,
+ },
+}).mount('#ghost-app')
+
+setTimeout(() => {
+ const app = createApp({
+ name: 'DelayedApp',
+ render: () => h('h1', 'Delayed app'),
+ })
+ app.use(SimplePlugin)
+ app.mount('#delay-app')
+}, 1000)
+
+window.top.document.title = 'Vue 3 Dev Shell'
diff --git a/vue-devtools/packages/shell-dev-vue3/src/router/Page1.vue b/vue-devtools/packages/shell-dev-vue3/src/router/Page1.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5e8f033e480c6bad600062bd0bb2e1eecd736693
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/router/Page1.vue
@@ -0,0 +1,3 @@
+
+ Page 1
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/router/Page2.vue b/vue-devtools/packages/shell-dev-vue3/src/router/Page2.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ee5bf13948c0abef9892cb4f7b761930dfb72d6b
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/router/Page2.vue
@@ -0,0 +1,3 @@
+
+ Page 2
+
diff --git a/vue-devtools/packages/shell-dev-vue3/src/store.js b/vue-devtools/packages/shell-dev-vue3/src/store.js
new file mode 100644
index 0000000000000000000000000000000000000000..0b7af0dc41043c3b7d8ab748b0b4a5811f267544
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/src/store.js
@@ -0,0 +1,60 @@
+import { createStore } from 'vuex'
+
+const store = createStore({
+ state() {
+ return {
+ rootState: 'root',
+ answer: 42,
+ }
+ },
+ getters: {
+ answer: state => state.answer,
+ throws: () => {
+ throw new Error('getter error')
+ },
+ },
+ mutations: {
+ increment(state) {
+ state.answer++
+ },
+ },
+ modules: {
+ nested: {
+ state() {
+ return {
+ foo: 'bar',
+ }
+ },
+ getters: {
+ twoFoo: state => state.foo.repeat(2),
+ },
+ },
+ namespacedModule: {
+ namespaced: true,
+ state() {
+ return {
+ count: 0,
+ }
+ },
+ getters: {
+ doubleCount: state => state.count * 2,
+ tripleCount: state => state.count * 3,
+ },
+ modules: {
+ animals: {
+ namespaced: true,
+ state() {
+ return {
+ cat: 'Meow',
+ }
+ },
+ getters: {
+ dog: () => 'Waf',
+ },
+ },
+ },
+ },
+ },
+})
+
+export default store
diff --git a/vue-devtools/packages/shell-dev-vue3/webpack.config.js b/vue-devtools/packages/shell-dev-vue3/webpack.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..47c9538a34388c8c558b9975970b395f6ff9a23c
--- /dev/null
+++ b/vue-devtools/packages/shell-dev-vue3/webpack.config.js
@@ -0,0 +1,37 @@
+const path = require('node:path')
+const openInEditor = require('launch-editor-middleware')
+const { createConfig } = require('@vue-devtools/build-tools')
+
+module.exports = createConfig({
+ context: __dirname,
+ entry: {
+ 'backend': require.resolve('@vue-devtools/shell-host/src/backend.js'),
+ 'hook': require.resolve('@vue-devtools/shell-host/src/hook.js'),
+ 'target': './src/main.js',
+ 'iframe-app': './src/iframe-app.js',
+ },
+ output: {
+ path: path.join(__dirname, '/build'),
+ publicPath: '/target/',
+ filename: '[name].js',
+ },
+ resolve: {
+ symlinks: false,
+ },
+ devServer: {
+ port: 8090,
+ onBeforeSetupMiddleware({ app }) {
+ app.use('/__open-in-editor', openInEditor())
+ },
+ proxy: {
+ '/': {
+ target: 'http://localhost:8091',
+ bypass: (req, res, proxyOptions) => {
+ if (req.url.startsWith('/target')) {
+ return req.url
+ }
+ },
+ },
+ },
+ },
+})
diff --git a/vue-devtools/packages/shell-electron/README.md b/vue-devtools/packages/shell-electron/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..cc1cf495f50c940a1dfb5560b2356c6f9d4a867f
--- /dev/null
+++ b/vue-devtools/packages/shell-electron/README.md
@@ -0,0 +1,157 @@
+# vue-remote-devtools
+
+> This package provides a standalone vue-devtools application, that can be used to debug any Vue app regardless of the environment. Now you can debug your app opened in mobile browser, safari, native script etc. not just desktop chrome or firefox.
+
+### :cd: Installation
+
+Install the package globally:
+```bash
+npm install -g @vue/devtools
+```
+
+Or locally as project dependency:
+```bash
+npm install --save-dev @vue/devtools
+```
+
+### :rocket: Usage
+
+#### Using global package
+
+Once you installed the package globally, run:
+```bash
+vue-devtools
+```
+
+Then add:
+```html
+
+```
+
+Or if you want to debug your device remotely:
+```html
+
+
+```
+
+To the `` section of your app.
+**(Don't forget to remove it before deploying to production!)**
+
+`` usually looks like this: `192.168.x.x`.
+
+#### Using dependency package
+
+Once you installed the package as project dependency, run:
+```bash
+./node_modules/.bin/vue-devtools
+```
+
+You can also use the global `vue-devtools` to start the app, but you might want to check if the local version matches the global one in this scenario to avoid any incompatibilities.
+
+Then import it directly in your app:
+```js
+import devtools from '@vue/devtools'
+// import Vue from 'vue'
+```
+> Make sure you import devtools before Vue, otherwise it might not work as expected.
+
+And connect to host:
+```js
+if (process.env.NODE_ENV === 'development') {
+ devtools.connect(/* host, port */)
+}
+```
+
+**host** - is an optional argument that tells your application where devtools middleware server is running, if you debug you app on your computer you don't have to set this (the default is `http://localhost`), but if you want to debug your app on mobile devices, you might want to pass your local IP (e.g. `http://192.168.1.12`).
+
+**port** - is an optional argument that tells your application on what port devtools middleware server is running. If you use proxy server, you might want to set it to `null` so the port won't be added to connection URL.
+
+#### FAQ:
+
+**1. How to change port devtools server is running on?**
+
+You can change it by setting environment variable before running it:
+```
+PORT=8000 vue-devtools
+```
+
+Then in your app you'll have to set either:
+```
+window.__VUE_DEVTOOLS_PORT__ = 8000
+```
+
+Or update connect method with new port:
+```
+devtools.connect(/* host */, 8000)
+```
+
+**2. How to remotely inspect page on the server?**
+
+For that you can use `ngrok` proxy. You can download it [here](https://ngrok.com/).
+
+Once you start vue-devtools run:
+```
+ngrok http 8098
+```
+
+Then update your host and port accordingly:
+```
+devtools.connect('https://example.ngrok.io', null)
+```
+
+Make sure to set port to `null` or `false`, because ngrok host already proxies to proper port that we defined in the first command.
+
+**3. How to inspect page served through `HTTPS`?**
+
+For that you can also use ngrok, as it automatically proxies https requests to http. Take a look at question number 2 for instructions.
+
+**4. How to inspect cordova applications?**
+
+Make sure that the page under `http://your-ip:8098` is returning a javascript coode on your device/simulator. If it doesn't - make sure to check your anti-virus or router/firewall settings. If it works - please follow the instructions, and connect to devtools using your IP. For example:
+
+```js
+import devtools from '@vue/devtools'
+import Vue from 'vue'
+// ...
+
+function onDeviceReady() {
+ devtools.connect('http://192.168.xx.yy') // use your IP
+}
+
+if (window.location.protocol === 'file:') {
+ document.addEventListener('deviceready', onDeviceReady, false)
+}
+else {
+ onDeviceReady()
+}
+```
+
+This will only work on `development` build of your app.
+
+### :beers: Development
+
+1. Install all dependencies
+```
+npm install
+```
+
+2. Run:
+```
+npm run dev
+```
+This will watch `src` folder and compile files on change
+
+3. Run:
+```
+npm start
+```
+This will open electron app with devtools
+
+4. Follow **Usage** section to connect any app to your development version of `vue-remote-devtools`
+
+### :lock: License
+
+[MIT](http://opensource.org/licenses/MIT)
diff --git a/vue-devtools/packages/shell-electron/app.html b/vue-devtools/packages/shell-electron/app.html
new file mode 100644
index 0000000000000000000000000000000000000000..2a207897c522e18a7f7be4aba92bbb765270ad15
--- /dev/null
+++ b/vue-devtools/packages/shell-electron/app.html
@@ -0,0 +1,113 @@
+
+
+
+
+ Vue Developer Tools
+
+
+
+
+
+
+ Waiting for connection...
+
+
+
+
+
+
+
+
diff --git a/vue-devtools/packages/shell-electron/app.js b/vue-devtools/packages/shell-electron/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..6757c25fe419aa4589702f2cf339ea85e62655f3
--- /dev/null
+++ b/vue-devtools/packages/shell-electron/app.js
@@ -0,0 +1,44 @@
+// Start middleware server
+require('./server')
+
+const path = require('node:path')
+const url = require('node:url')
+const { app, BrowserWindow } = require('electron')
+
+let mainWindow = null
+
+function createWindow() {
+ mainWindow = new BrowserWindow({
+ width: 800,
+ height: 600,
+ icon: path.join(__dirname, 'icons/128.png'),
+ webPreferences: {
+ nodeIntegration: true,
+ contextIsolation: false,
+ },
+ })
+
+ mainWindow.loadURL(url.format({
+ pathname: path.join(__dirname, 'app.html'),
+ protocol: 'file:',
+ slashes: true,
+ }))
+
+ mainWindow.on('closed', () => {
+ mainWindow = null
+ })
+}
+
+app.on('ready', createWindow)
+
+app.on('window-all-closed', () => {
+ if (process.platform !== 'darwin') {
+ app.quit()
+ }
+})
+
+app.on('activate', () => {
+ if (mainWindow === null) {
+ createWindow()
+ }
+})
diff --git a/vue-devtools/packages/shell-electron/bin.js b/vue-devtools/packages/shell-electron/bin.js
new file mode 100644
index 0000000000000000000000000000000000000000..6db275c810e50dcc7eec16acd72d5fc479d9ba23
--- /dev/null
+++ b/vue-devtools/packages/shell-electron/bin.js
@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+const electron = require('electron')
+const spawn = require('cross-spawn')
+
+const argv = process.argv.slice(2)
+
+const result = spawn.sync(
+ electron,
+ [require.resolve('./app')].concat(argv),
+ { stdio: 'ignore' },
+)
+
+process.exit(result.status)
diff --git a/vue-devtools/packages/shell-electron/icons/128.png b/vue-devtools/packages/shell-electron/icons/128.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0033f9afc2db03e92bb84d64e2672fcdf385dca
Binary files /dev/null and b/vue-devtools/packages/shell-electron/icons/128.png differ
diff --git a/vue-devtools/packages/shell-electron/index.js b/vue-devtools/packages/shell-electron/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f32ad891f5590c3e5abae4c0466fed45bfa592a8
--- /dev/null
+++ b/vue-devtools/packages/shell-electron/index.js
@@ -0,0 +1,42 @@
+const isBrowser = typeof window !== 'undefined'
+
+if (isBrowser) {
+ require('./build/hook.js')
+}
+else {
+ require('./build-node/hook.js')
+}
+
+const target = isBrowser
+ ? window
+ : typeof globalThis !== 'undefined'
+ ? globalThis
+ : {}
+
+module.exports = {
+ connect(host, port, { io, showToast, app } = {}) {
+ target.__VUE_DEVTOOLS_HOST__ = host
+ target.__VUE_DEVTOOLS_PORT__ = port
+ if (io) {
+ target.__VUE_DEVTOOLS_SOCKET__ = io
+ }
+ if (showToast) {
+ target.__VUE_DEVTOOLS_TOAST__ = showToast
+ }
+ if (app) {
+ target.__VUE_ROOT_INSTANCES__ = Array.isArray(app) ? app : [app]
+ }
+
+ if (isBrowser) {
+ require('./build/backend.js')
+ }
+ else {
+ require('./build-node/backend.js')
+ }
+ },
+ init: (Vue) => {
+ const tools = target.__VUE_DEVTOOLS_GLOBAL_HOOK__
+
+ tools.emit('init', Vue)
+ },
+}
diff --git a/vue-devtools/packages/shell-electron/package.json b/vue-devtools/packages/shell-electron/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..c208dfc1fb15dfc2da92aecd0c3621e7aa96d5a1
--- /dev/null
+++ b/vue-devtools/packages/shell-electron/package.json
@@ -0,0 +1,59 @@
+{
+ "name": "@vue/devtools",
+ "version": "6.6.3",
+ "description": "StandAlone vue-devtools",
+ "author": "",
+ "license": "MIT",
+ "repository": {
+ "url": "https://github.com/vuejs/vue-devtools.git",
+ "type": "git",
+ "directory": "packages/shell-electron"
+ },
+ "sideEffects": false,
+ "main": "index.js",
+ "types": "types/index.d.ts",
+ "bin": {
+ "vue-devtools": "./bin.js"
+ },
+ "files": [
+ "README.md",
+ "app.html",
+ "app.js",
+ "bin.js",
+ "build",
+ "build-node",
+ "icons",
+ "index.js",
+ "server.js",
+ "types"
+ ],
+ "scripts": {
+ "start": "node bin.js",
+ "dev:client": "webpack --watch",
+ "dev:node": "webpack --watch --config webpack.node.config.js",
+ "build": "npm run build:client && npm run build:node",
+ "build:client": "rimraf ./build && cross-env NODE_ENV=production webpack",
+ "build:node": "rimraf ./build-node && cross-env NODE_ENV=production webpack --config webpack.node.config.js"
+ },
+ "publishConfig": {
+ "access": "public"
+ },
+ "dependencies": {
+ "cross-spawn": "^7.0.3",
+ "electron": "^21.0.1",
+ "express": "^4.17.1",
+ "ip": "^1.1.5",
+ "socket.io": "^4.4.0",
+ "socket.io-client": "^4.4.1",
+ "utf-8-validate": "^5.0.9"
+ },
+ "devDependencies": {
+ "@vue-devtools/app-backend-core": "^0.0.0",
+ "@vue-devtools/app-frontend": "^0.0.0",
+ "@vue-devtools/build-tools": "^0.0.0",
+ "@vue-devtools/shared-utils": "^0.0.0",
+ "rimraf": "^3.0.2",
+ "webpack": "^5.90.1",
+ "webpack-cli": "^5.1.4"
+ }
+}
\ No newline at end of file
diff --git a/vue-devtools/packages/shell-electron/server.js b/vue-devtools/packages/shell-electron/server.js
new file mode 100644
index 0000000000000000000000000000000000000000..15a729916b010cf43d253667f5e74d2842e42584
--- /dev/null
+++ b/vue-devtools/packages/shell-electron/server.js
@@ -0,0 +1,45 @@
+const path = require('node:path')
+const fs = require('node:fs')
+const { createServer } = require('node:http')
+const app = require('express')()
+const { Server } = require('socket.io')
+
+const port = process.env.PORT || 8098
+
+const httpServer = createServer(app)
+const io = new Server(httpServer, {
+ cors: {
+ origin: true,
+ },
+})
+
+app.get('/', (req, res) => {
+ const hookContent = fs.readFileSync(path.join(__dirname, '/build/hook.js'), 'utf8')
+ const backendContent = fs.readFileSync(path.join(__dirname, '/build/backend.js'), 'utf8')
+ res.send([hookContent, backendContent].join('\n'))
+})
+
+// Middleman
+io.on('connection', (socket) => {
+ // Disconnect any previously connected apps
+ socket.broadcast.emit('vue-devtools-disconnect-backend')
+
+ socket.on('vue-devtools-init', () => {
+ socket.broadcast.emit('vue-devtools-init')
+ })
+
+ socket.on('disconnect', (reason) => {
+ if (reason.indexOf('client')) {
+ socket.broadcast.emit('vue-devtools-disconnect-devtools')
+ }
+ })
+
+ socket.on('vue-message', (data) => {
+ socket.broadcast.emit('vue-message', data)
+ })
+})
+
+httpServer.listen(port, '0.0.0.0', () => {
+ // eslint-disable-next-line no-console
+ console.log(`listening on 0.0.0.0:${port}`)
+})
diff --git a/vue-devtools/packages/shell-electron/src/backend.js b/vue-devtools/packages/shell-electron/src/backend.js
new file mode 100644
index 0000000000000000000000000000000000000000..d4409fb0ed6d23b55f9dadd5a6c12f57c04a0223
--- /dev/null
+++ b/vue-devtools/packages/shell-electron/src/backend.js
@@ -0,0 +1,63 @@
+import io from 'socket.io-client'
+import { initBackend } from '@back'
+import { installToast } from '@back/toast'
+import { Bridge, chunk, target } from '@vue-devtools/shared-utils'
+
+const host = target.__VUE_DEVTOOLS_HOST__ || 'http://localhost'
+const port = target.__VUE_DEVTOOLS_PORT__ !== undefined ? target.__VUE_DEVTOOLS_PORT__ : 8098
+const fullHost = port ? `${host}:${port}` : host
+const createSocket = target.__VUE_DEVTOOLS_SOCKET__ || io
+const socket = createSocket(fullHost)
+const MAX_DATA_CHUNK = 2000
+
+function connectedMessage() {
+ if (target.__VUE_DEVTOOLS_TOAST__) {
+ target.__VUE_DEVTOOLS_TOAST__('Remote Devtools Connected', 'normal')
+ }
+}
+
+function disconnectedMessage() {
+ if (target.__VUE_DEVTOOLS_TOAST__) {
+ target.__VUE_DEVTOOLS_TOAST__('Remote Devtools Disconnected', 'error')
+ }
+}
+
+socket.on('connect', () => {
+ connectedMessage()
+ // eslint-disable-next-line ts/no-use-before-define
+ initBackend(bridge)
+ socket.emit('vue-devtools-init')
+})
+
+// Global disconnect handler. Fires in two cases:
+// - after calling above socket.disconnect()
+// - once devtools is closed (that's why we need socket.disconnect() here too, to prevent further polling)
+socket.on('disconnect', () => {
+ socket.disconnect()
+ disconnectedMessage()
+})
+
+// Disconnect socket once other client is connected
+socket.on('vue-devtools-disconnect-backend', () => {
+ socket.disconnect()
+})
+
+const bridge = new Bridge({
+ listen(fn) {
+ socket.on('vue-message', data => fn(data))
+ },
+ send(data) {
+ const chunks = chunk(data, MAX_DATA_CHUNK)
+
+ for (const chunk of chunks) {
+ socket.emit('vue-message', chunk)
+ }
+ },
+})
+
+bridge.on('shutdown', () => {
+ socket.disconnect()
+ disconnectedMessage()
+})
+
+installToast(target)
diff --git a/vue-devtools/packages/shell-electron/src/devtools.js b/vue-devtools/packages/shell-electron/src/devtools.js
new file mode 100644
index 0000000000000000000000000000000000000000..1fa3c57b611e04985ec1d6e3864fea30d8650d73
--- /dev/null
+++ b/vue-devtools/packages/shell-electron/src/devtools.js
@@ -0,0 +1,53 @@
+import io from 'socket.io-client'
+import { initDevTools } from '@front'
+import { Bridge } from '@vue-devtools/shared-utils'
+
+const port = window.process.env.PORT || 8098
+const socket = io(`http://localhost:${port}`)
+const $ = document.querySelector.bind(document)
+const $intro = $('#intro')
+
+let reload = null
+let introTimer
+
+socket.on('vue-devtools-disconnect-devtools', () => {
+ introTimer = setTimeout(() => {
+ $intro.classList.remove('hidden')
+ }, 2000)
+})
+
+socket.on('vue-devtools-init', () => {
+ clearTimeout(introTimer)
+ $intro.classList.add('hidden')
+
+ // Reset attached listeners
+ socket.off('vue-message')
+
+ // If new page is opened reload devtools
+ if (reload) {
+ return reload()
+ }
+
+ initDevTools({
+ connect(callback) {
+ const wall = {
+ listen(fn) {
+ socket.on('vue-message', data => fn(data))
+ },
+ send(data) {
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log('%cdevtools -> backend', 'color:#888;', data)
+ }
+ socket.emit('vue-message', data)
+ },
+ }
+ const bridge = new Bridge(wall)
+
+ callback(bridge)
+ },
+ onReload(fn) {
+ reload = fn
+ },
+ })
+})
diff --git a/vue-devtools/packages/shell-electron/src/hook.js b/vue-devtools/packages/shell-electron/src/hook.js
new file mode 100644
index 0000000000000000000000000000000000000000..f18c03adf157b008f10ef6ed25078c3435022dc8
--- /dev/null
+++ b/vue-devtools/packages/shell-electron/src/hook.js
@@ -0,0 +1,4 @@
+import { installHook } from '@back/hook'
+import { target } from '@vue-devtools/shared-utils'
+
+installHook(target)
diff --git a/vue-devtools/packages/shell-electron/types/index.d.ts b/vue-devtools/packages/shell-electron/types/index.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5b30a2169c679d4e75c8cc3a1ede2bc82de40512
--- /dev/null
+++ b/vue-devtools/packages/shell-electron/types/index.d.ts
@@ -0,0 +1 @@
+export function connect(host?: string, port?: number | string): void
diff --git a/vue-devtools/packages/shell-electron/webpack.config.js b/vue-devtools/packages/shell-electron/webpack.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..d339bf403d3bc04038218de53ade13a107d68b5e
--- /dev/null
+++ b/vue-devtools/packages/shell-electron/webpack.config.js
@@ -0,0 +1,22 @@
+const path = require('node:path')
+const { createConfig } = require('@vue-devtools/build-tools')
+
+const target = {
+ chrome: 52,
+ firefox: 48,
+ safari: 9,
+ ie: 11,
+}
+
+module.exports = createConfig({
+ entry: {
+ devtools: './src/devtools.js',
+ backend: './src/backend.js',
+ hook: './src/hook.js',
+ },
+ output: {
+ path: path.join(__dirname, '/build'),
+ publicPath: '/build/',
+ filename: '[name].js',
+ },
+}, target)
diff --git a/vue-devtools/packages/shell-electron/webpack.node.config.js b/vue-devtools/packages/shell-electron/webpack.node.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..d50da2faba8175cb6fb90b57a110d0860948f269
--- /dev/null
+++ b/vue-devtools/packages/shell-electron/webpack.node.config.js
@@ -0,0 +1,28 @@
+const path = require('node:path')
+const { createConfig } = require('@vue-devtools/build-tools')
+
+const target = {
+ chrome: 52,
+ firefox: 48,
+ safari: 9,
+ ie: 11,
+}
+
+module.exports = createConfig({
+ target: 'node',
+ externals: {
+ // from https://socket.io/docs/v4/client-with-bundlers/
+ 'bufferutil': 'bufferutil',
+ 'utf-8-validate': 'utf-8-validate',
+ },
+ entry: {
+ devtools: './src/devtools.js',
+ backend: './src/backend.js',
+ hook: './src/hook.js',
+ },
+ output: {
+ path: path.join(__dirname, '/build-node'),
+ publicPath: '/build-node/',
+ filename: '[name].js',
+ },
+}, target)
diff --git a/vue-devtools/packages/shell-eruda/package.json b/vue-devtools/packages/shell-eruda/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..88b03d554a2742f4127f2f2c586e7f8b6a9e3631
--- /dev/null
+++ b/vue-devtools/packages/shell-eruda/package.json
@@ -0,0 +1,18 @@
+{
+ "name": "@vue-devtools/shell-eruda",
+ "version": "0.0.0",
+ "scripts": {
+ "build": "rimraf ./build && cross-env NODE_ENV=production webpack --progress"
+ },
+ "dependencies": {
+ "@vue-devtools/app-backend-core": "^0.0.0",
+ "@vue-devtools/app-frontend": "^0.0.0",
+ "@vue-devtools/shared-utils": "^0.0.0"
+ },
+ "devDependencies": {
+ "@vue-devtools/build-tools": "^0.0.0",
+ "rimraf": "^3.0.2",
+ "webpack": "^5.90.1",
+ "webpack-cli": "^5.1.4"
+ }
+}
diff --git a/vue-devtools/packages/shell-eruda/src/devtools.js b/vue-devtools/packages/shell-eruda/src/devtools.js
new file mode 100644
index 0000000000000000000000000000000000000000..3d80827e04846ee3eda49ae5d1e3c59fb885131a
--- /dev/null
+++ b/vue-devtools/packages/shell-eruda/src/devtools.js
@@ -0,0 +1,22 @@
+import { initDevTools } from '@front'
+import { Bridge } from '@vue-devtools/shared-utils'
+
+const targetWindow = window.parent
+
+initDevTools({
+ connect(cb) {
+ cb(
+ new Bridge({
+ listen(fn) {
+ window.addEventListener('message', (evt) => {
+ fn(evt.data)
+ })
+ },
+ send(data) {
+ targetWindow.postMessage(data, '*')
+ },
+ })
+ )
+ },
+ onReload: () => {},
+})
diff --git a/vue-devtools/packages/shell-eruda/webpack.config.js b/vue-devtools/packages/shell-eruda/webpack.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..d2df6ef6ee5d16fc8910606a890281fc3380d977
--- /dev/null
+++ b/vue-devtools/packages/shell-eruda/webpack.config.js
@@ -0,0 +1,17 @@
+const path = require('node:path')
+const webpack = require('webpack')
+const { createConfig } = require('@vue-devtools/build-tools')
+
+module.exports = createConfig({
+ entry: './src/devtools.js',
+ output: {
+ path: path.join(__dirname, 'build'),
+ filename: 'devtools.js',
+ },
+ plugins: [
+ new webpack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ devtool: process.env.NODE_ENV !== 'production' ? 'inline-source-map' : false,
+})
diff --git a/vue-devtools/packages/shell-firefox/.gitignore b/vue-devtools/packages/shell-firefox/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..b6560633a29cd21b672aa74a03863cb3996d9f5f
--- /dev/null
+++ b/vue-devtools/packages/shell-firefox/.gitignore
@@ -0,0 +1,3 @@
+icons/
+popups/
+*.html
diff --git a/vue-devtools/packages/shell-firefox/copy.sh b/vue-devtools/packages/shell-firefox/copy.sh
new file mode 100644
index 0000000000000000000000000000000000000000..15cba66b8ece0d0e8df28533cd2f98507f605eaf
--- /dev/null
+++ b/vue-devtools/packages/shell-firefox/copy.sh
@@ -0,0 +1,7 @@
+#!/bin/bash
+
+rm -rf icons
+
+cp -r ../shell-chrome/icons .
+cp -r ../shell-chrome/popups .
+cp ../shell-chrome/*.html .
diff --git a/vue-devtools/packages/shell-firefox/manifest.json b/vue-devtools/packages/shell-firefox/manifest.json
new file mode 100644
index 0000000000000000000000000000000000000000..a449659f019b327fefe508f7a368785e5d3a34c9
--- /dev/null
+++ b/vue-devtools/packages/shell-firefox/manifest.json
@@ -0,0 +1,58 @@
+{
+ "name": "Vue.js devtools",
+ "version": "6.6.3",
+ "version_name": "6.6.3",
+ "description": "Browser DevTools extension for debugging Vue.js applications.",
+ "manifest_version": 2,
+ "icons": {
+ "16": "icons/16.png",
+ "48": "icons/48.png",
+ "128": "icons/128.png"
+ },
+ "browser_action": {
+ "default_icon": {
+ "16": "icons/16-gray.png",
+ "48": "icons/48-gray.png",
+ "128": "icons/128-gray.png"
+ },
+ "default_title": "Vue Devtools",
+ "default_popup": "popups/not-found.html"
+ },
+ "web_accessible_resources": [
+ "devtools.html",
+ "devtools-background.html",
+ "build/backend.js"
+ ],
+ "devtools_page": "devtools-background.html",
+ "background": {
+ "scripts": [
+ "build/background.js"
+ ],
+ "persistent": true
+ },
+ "permissions": [
+ "",
+ "storage"
+ ],
+ "content_scripts": [
+ {
+ "matches": [
+ ""
+ ],
+ "js": [
+ "build/hook.js"
+ ],
+ "run_at": "document_start"
+ },
+ {
+ "matches": [
+ ""
+ ],
+ "js": [
+ "build/detector.js"
+ ],
+ "run_at": "document_idle"
+ }
+ ],
+ "content_security_policy": "script-src 'self'; object-src 'self'"
+}
\ No newline at end of file
diff --git a/vue-devtools/packages/shell-firefox/package.json b/vue-devtools/packages/shell-firefox/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..d264786223088eca0575a297624f068572cd2988
--- /dev/null
+++ b/vue-devtools/packages/shell-firefox/package.json
@@ -0,0 +1,18 @@
+{
+ "name": "@vue-devtools/shell-firefox",
+ "version": "0.0.0",
+ "scripts": {
+ "build": "rimraf ./build && ./copy.sh && cross-env NODE_ENV=production webpack --progress"
+ },
+ "dependencies": {
+ "@vue-devtools/app-backend-core": "^0.0.0",
+ "@vue-devtools/app-frontend": "^0.0.0",
+ "@vue-devtools/shared-utils": "^0.0.0"
+ },
+ "devDependencies": {
+ "@vue-devtools/build-tools": "^0.0.0",
+ "rimraf": "^3.0.2",
+ "webpack": "^5.35.1",
+ "webpack-cli": "^4.6.0"
+ }
+}
diff --git a/vue-devtools/packages/shell-firefox/src/backend.js b/vue-devtools/packages/shell-firefox/src/backend.js
new file mode 100644
index 0000000000000000000000000000000000000000..d0456e1dd0ddeaf8982d9d462eee33ba69e84cd0
--- /dev/null
+++ b/vue-devtools/packages/shell-firefox/src/backend.js
@@ -0,0 +1,55 @@
+// this is injected to the app page when the panel is activated.
+
+import { initBackend } from '@back'
+import { Bridge } from '@vue-devtools/shared-utils'
+
+window.addEventListener('message', handshake)
+
+function sendListening() {
+ window.postMessage({
+ source: 'vue-devtools-backend-injection',
+ payload: 'listening',
+ }, '*')
+}
+sendListening()
+
+function handshake(e) {
+ if (e.data.source === 'vue-devtools-proxy' && e.data.payload === 'init') {
+ window.removeEventListener('message', handshake)
+
+ let listeners = []
+ const bridge = new Bridge({
+ listen(fn) {
+ const listener = (evt) => {
+ if (evt.data.source === 'vue-devtools-proxy' && evt.data.payload) {
+ fn(evt.data.payload)
+ }
+ }
+ window.addEventListener('message', listener)
+ listeners.push(listener)
+ },
+ send(data) {
+ // if (process.env.NODE_ENV !== 'production') {
+ // console.log('[chrome] backend -> devtools', data)
+ // }
+ window.postMessage({
+ source: 'vue-devtools-backend',
+ payload: data,
+ }, '*')
+ },
+ })
+
+ bridge.on('shutdown', () => {
+ listeners.forEach((l) => {
+ window.removeEventListener('message', l)
+ })
+ listeners = []
+ window.addEventListener('message', handshake)
+ })
+
+ initBackend(bridge)
+ }
+ else {
+ sendListening()
+ }
+}
diff --git a/vue-devtools/packages/shell-firefox/src/background.js b/vue-devtools/packages/shell-firefox/src/background.js
new file mode 100644
index 0000000000000000000000000000000000000000..d4b7bab2ae71c1a77acf23e0885e488569b1f539
--- /dev/null
+++ b/vue-devtools/packages/shell-firefox/src/background.js
@@ -0,0 +1,125 @@
+// the background script runs all the time and serves as a central message
+// hub for each vue devtools (panel + proxy + backend) instance.
+
+const ports = {}
+
+chrome.runtime.onConnect.addListener((port) => {
+ let tab
+ let name
+ if (isNumeric(port.name)) {
+ tab = port.name
+ name = 'devtools'
+ installProxy(+port.name)
+ }
+ else {
+ tab = port.sender.tab.id
+ name = 'backend'
+ }
+
+ if (!ports[tab]) {
+ ports[tab] = {
+ devtools: null,
+ backend: null,
+ }
+ }
+ ports[tab][name] = port
+
+ if (ports[tab].devtools && ports[tab].backend) {
+ doublePipe(tab, ports[tab].devtools, ports[tab].backend)
+ }
+})
+
+function isNumeric(str) {
+ return `${+str}` === str
+}
+
+function installProxy(tabId) {
+ chrome.tabs.executeScript(tabId, {
+ file: '/build/proxy.js',
+ }, (res) => {
+ if (!res) {
+ ports[tabId].devtools.postMessage('proxy-fail')
+ }
+ else {
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log(`injected proxy to tab ${tabId}`)
+ }
+ }
+ })
+}
+
+function doublePipe(id, one, two) {
+ one.onMessage.addListener(lOne)
+ function lOne(message) {
+ if (message.event === 'log') {
+ // eslint-disable-next-line no-console
+ return console.log(`tab ${id}`, message.payload)
+ }
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log('%cdevtools -> backend', 'color:#888;', message)
+ }
+ two.postMessage(message)
+ }
+ two.onMessage.addListener(lTwo)
+ function lTwo(message) {
+ if (message.event === 'log') {
+ // eslint-disable-next-line no-console
+ return console.log(`tab ${id}`, message.payload)
+ }
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log('%cbackend -> devtools', 'color:#888;', message)
+ }
+ one.postMessage(message)
+ }
+ function shutdown() {
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log(`tab ${id} disconnected.`)
+ }
+ one.onMessage.removeListener(lOne)
+ two.onMessage.removeListener(lTwo)
+ one.disconnect()
+ two.disconnect()
+ ports[id] = null
+ }
+ one.onDisconnect.addListener(shutdown)
+ two.onDisconnect.addListener(shutdown)
+ if (process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.log(`tab ${id} connected.`)
+ }
+}
+
+chrome.runtime.onMessage.addListener((req, sender) => {
+ if (sender.tab && req.vueDetected) {
+ const suffix = req.nuxtDetected ? '.nuxt' : ''
+
+ chrome.browserAction.setIcon({
+ tabId: sender.tab.id,
+ path: {
+ 16: `icons/16${suffix}.png`,
+ 48: `icons/48${suffix}.png`,
+ 128: `icons/128${suffix}.png`,
+ },
+ })
+ chrome.browserAction.setPopup({
+ tabId: sender.tab.id,
+ popup: req.devtoolsEnabled ? `popups/enabled${suffix}.html` : `popups/disabled${suffix}.html`,
+ })
+ }
+
+ if (req.action === 'vue-take-screenshot' && sender.envType === 'devtools_child') {
+ browser.tabs.captureVisibleTab({
+ format: 'png',
+ }).then((dataUrl) => {
+ browser.runtime.sendMessage({
+ action: 'vue-screenshot-result',
+ id: req.id,
+ dataUrl,
+ })
+ })
+ }
+})
diff --git a/vue-devtools/packages/shell-firefox/src/detector.js b/vue-devtools/packages/shell-firefox/src/detector.js
new file mode 100644
index 0000000000000000000000000000000000000000..f604854fe6f757b9f52e1aa26ad0c96cdf357e20
--- /dev/null
+++ b/vue-devtools/packages/shell-firefox/src/detector.js
@@ -0,0 +1,100 @@
+import { installToast } from '@back/toast'
+import { isFirefox } from '@vue-devtools/shared-utils'
+
+window.addEventListener('message', (e) => {
+ if (e.source === window && e.data.vueDetected) {
+ chrome.runtime.sendMessage(e.data)
+ }
+})
+
+function detect(win) {
+ let delay = 1000
+ let detectRemainingTries = 10
+
+ function runDetect() {
+ // Method 1: Check Nuxt
+ const nuxtDetected = !!(window.__NUXT__ || window.$nuxt)
+
+ if (nuxtDetected) {
+ let Vue
+
+ if (window.$nuxt) {
+ Vue = window.$nuxt.$root && window.$nuxt.$root.constructor
+ }
+
+ win.postMessage({
+ devtoolsEnabled: (/* Vue 2 */ Vue && Vue.config.devtools)
+ || (/* Vue 3.2.14+ */ window.__VUE_DEVTOOLS_GLOBAL_HOOK__ && window.__VUE_DEVTOOLS_GLOBAL_HOOK__.enabled),
+ vueDetected: true,
+ nuxtDetected: true,
+ }, '*')
+
+ return
+ }
+
+ // Method 2: Check Vue 3
+ const vueDetected = !!(window.__VUE__)
+ if (vueDetected) {
+ win.postMessage({
+ devtoolsEnabled: /* Vue 3.2.14+ */ window.__VUE_DEVTOOLS_GLOBAL_HOOK__ && window.__VUE_DEVTOOLS_GLOBAL_HOOK__.enabled,
+ vueDetected: true,
+ }, '*')
+
+ return
+ }
+
+ // Method 3: Scan all elements inside document
+ const all = document.querySelectorAll('*')
+ let el
+ for (let i = 0; i < all.length; i++) {
+ if (all[i].__vue__) {
+ el = all[i]
+ break
+ }
+ }
+ if (el) {
+ let Vue = Object.getPrototypeOf(el.__vue__).constructor
+ while (Vue.super) {
+ Vue = Vue.super
+ }
+ win.postMessage({
+ devtoolsEnabled: Vue.config.devtools,
+ vueDetected: true,
+ }, '*')
+ return
+ }
+
+ if (detectRemainingTries > 0) {
+ detectRemainingTries--
+ setTimeout(() => {
+ runDetect()
+ }, delay)
+ delay *= 5
+ }
+ }
+
+ setTimeout(() => {
+ runDetect()
+ }, 100)
+}
+
+// inject the hook
+if (document instanceof HTMLDocument) {
+ installScript(detect)
+ installScript(installToast)
+}
+
+function installScript(fn) {
+ const source = `;(${fn.toString()})(window)`
+
+ if (isFirefox) {
+ // eslint-disable-next-line no-eval
+ window.eval(source) // in Firefox, this evaluates on the content window
+ }
+ else {
+ const script = document.createElement('script')
+ script.textContent = source
+ document.documentElement.appendChild(script)
+ script.parentNode.removeChild(script)
+ }
+}
diff --git a/vue-devtools/packages/shell-firefox/src/devtools-background.js b/vue-devtools/packages/shell-firefox/src/devtools-background.js
new file mode 100644
index 0000000000000000000000000000000000000000..69aeb183b2878cdfa5b8b9328a5d5d638db3be5f
--- /dev/null
+++ b/vue-devtools/packages/shell-firefox/src/devtools-background.js
@@ -0,0 +1,48 @@
+// This is the devtools script, which is called when the user opens the
+// Chrome devtool on a page. We check to see if we global hook has detected
+// Vue presence on the page. If yes, create the Vue panel; otherwise poll
+// for 10 seconds.
+
+let created = false
+let checkCount = 0
+
+chrome.devtools.network.onNavigated.addListener(createPanelIfHasVue)
+const checkVueInterval = setInterval(createPanelIfHasVue, 1000)
+createPanelIfHasVue()
+
+function createPanelIfHasVue() {
+ if (created || checkCount++ > 10) {
+ clearInterval(checkVueInterval)
+ return
+ }
+ chrome.devtools.inspectedWindow.eval(
+ '!!(window.__VUE_DEVTOOLS_GLOBAL_HOOK__ && (window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue || window.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.length))',
+ (hasVue) => {
+ if (!hasVue || created) {
+ return
+ }
+ clearInterval(checkVueInterval)
+ created = true
+ chrome.devtools.panels.create(
+ 'Vue',
+ 'icons/128.png',
+ 'devtools.html',
+ (panel) => {
+ // panel loaded
+ panel.onShown.addListener(onPanelShown)
+ panel.onHidden.addListener(onPanelHidden)
+ },
+ )
+ },
+ )
+}
+
+// Manage panel visibility
+
+function onPanelShown() {
+ chrome.runtime.sendMessage('vue-panel-shown')
+}
+
+function onPanelHidden() {
+ chrome.runtime.sendMessage('vue-panel-hidden')
+}
diff --git a/vue-devtools/packages/shell-firefox/src/devtools.js b/vue-devtools/packages/shell-firefox/src/devtools.js
new file mode 100644
index 0000000000000000000000000000000000000000..21e2b2abc4b3e8152026ec1078237bf5e06f1d5a
--- /dev/null
+++ b/vue-devtools/packages/shell-firefox/src/devtools.js
@@ -0,0 +1,115 @@
+// this script is called when the VueDevtools panel is activated.
+
+import { initDevTools, setAppConnected } from '@front'
+import { Bridge, BridgeEvents } from '@vue-devtools/shared-utils'
+
+let disconnected = false
+let connectCount = 0
+let retryConnectTimer
+
+initDevTools({
+
+ /**
+ * Inject backend, connect to background, and send back the bridge.
+ *
+ * @param {Function} cb
+ */
+
+ connect(cb) {
+ // 1. inject backend code into page
+ injectScript(chrome.runtime.getURL('build/backend.js'), () => {
+ // 2. connect to background to setup proxy
+ let port
+
+ const onMessageHandlers = []
+
+ function connect() {
+ try {
+ clearTimeout(retryConnectTimer)
+ connectCount++
+ port = chrome.runtime.connect({
+ name: `${chrome.devtools.inspectedWindow.tabId}`,
+ })
+ disconnected = false
+ port.onDisconnect.addListener(() => {
+ disconnected = true
+ setAppConnected(false)
+
+ // Retry
+ retryConnectTimer = setTimeout(connect, 1000)
+ })
+
+ if (connectCount > 1) {
+ onMessageHandlers.forEach(fn => port.onMessage.addListener(fn))
+ }
+ }
+ catch (e) {
+ console.error(e)
+ disconnected = true
+ setAppConnected(false)
+
+ // Retry
+ retryConnectTimer = setTimeout(connect, 5000)
+ }
+ }
+ connect()
+
+ const bridge = new Bridge({
+ listen(fn) {
+ port.onMessage.addListener(fn)
+ onMessageHandlers.push(fn)
+ },
+ send(data) {
+ if (!disconnected) {
+ // if (process.env.NODE_ENV !== 'production') {
+ // console.log('[chrome] devtools -> backend', data)
+ // }
+ port.postMessage(data)
+ }
+ },
+ })
+
+ bridge.on(BridgeEvents.TO_FRONT_RECONNECTED, () => {
+ setAppConnected(true)
+ })
+
+ // 3. send a proxy API to the panel
+ cb(bridge)
+ })
+ },
+
+ /**
+ * Register a function to reload the devtools app.
+ *
+ * @param {Function} reloadFn
+ */
+
+ onReload(reloadFn) {
+ chrome.devtools.network.onNavigated.addListener(reloadFn)
+ },
+})
+
+/**
+ * Inject a globally evaluated script, in the same context with the actual
+ * user app.
+ *
+ * @param {string} scriptName
+ * @param {Function} cb
+ */
+
+function injectScript(scriptName, cb) {
+ const src = `
+ (function() {
+ var script = document.constructor.prototype.createElement.call(document, 'script');
+ script.src = "${scriptName}";
+ document.documentElement.appendChild(script);
+ script.parentNode.removeChild(script);
+ })()
+ `
+ chrome.devtools.inspectedWindow.eval(src, (res, err) => {
+ if (err) {
+ console.error(err)
+ }
+ cb()
+ })
+}
diff --git a/vue-devtools/packages/shell-firefox/src/hook.js b/vue-devtools/packages/shell-firefox/src/hook.js
new file mode 100644
index 0000000000000000000000000000000000000000..9d1e4d0303ec6c96233ec7d8b89273a4dda41700
--- /dev/null
+++ b/vue-devtools/packages/shell-firefox/src/hook.js
@@ -0,0 +1,19 @@
+// This script is injected into every page.
+import { installHook } from '@back/hook'
+import { isFirefox } from '@vue-devtools/shared-utils'
+
+// inject the hook
+if (document instanceof HTMLDocument) {
+ const source = `;(${installHook.toString()})(window)`
+
+ if (isFirefox) {
+ // eslint-disable-next-line no-eval
+ window.eval(source) // in Firefox, this evaluates on the content window
+ }
+ else {
+ const script = document.createElement('script')
+ script.textContent = source
+ document.documentElement.appendChild(script)
+ script.parentNode.removeChild(script)
+ }
+}
diff --git a/vue-devtools/packages/shell-firefox/src/proxy.js b/vue-devtools/packages/shell-firefox/src/proxy.js
new file mode 100644
index 0000000000000000000000000000000000000000..cb7e0e88abd90f2d66619e6725305b3808518ddf
--- /dev/null
+++ b/vue-devtools/packages/shell-firefox/src/proxy.js
@@ -0,0 +1,37 @@
+// This is a content-script that is injected only when the devtools are
+// activated. Because it is not injected using eval, it has full privilege
+// to the chrome runtime API. It serves as a proxy between the injected
+// backend and the Vue devtools panel.
+
+const port = chrome.runtime.connect({
+ name: 'content-script',
+})
+
+port.onMessage.addListener(sendMessageToBackend)
+window.addEventListener('message', sendMessageToDevtools)
+port.onDisconnect.addListener(handleDisconnect)
+
+sendMessageToBackend('init')
+
+function sendMessageToBackend(payload) {
+ window.postMessage({
+ source: 'vue-devtools-proxy',
+ payload,
+ }, '*')
+}
+
+function sendMessageToDevtools(e) {
+ if (e.data && e.data.source === 'vue-devtools-backend') {
+ port.postMessage(e.data.payload)
+ }
+ else if (e.data && e.data.source === 'vue-devtools-backend-injection') {
+ if (e.data.payload === 'listening') {
+ sendMessageToBackend('init')
+ }
+ }
+}
+
+function handleDisconnect() {
+ window.removeEventListener('message', sendMessageToDevtools)
+ sendMessageToBackend('shutdown')
+}
diff --git a/vue-devtools/packages/shell-firefox/webpack.config.js b/vue-devtools/packages/shell-firefox/webpack.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..eb111ac9701d9552672ef478fcecc0290eacba0d
--- /dev/null
+++ b/vue-devtools/packages/shell-firefox/webpack.config.js
@@ -0,0 +1,21 @@
+const path = require('node:path')
+const { createConfig } = require('@vue-devtools/build-tools')
+
+module.exports = createConfig({
+ entry: {
+ 'hook': './src/hook.js',
+ 'devtools': './src/devtools.js',
+ 'background': './src/background.js',
+ 'devtools-background': './src/devtools-background.js',
+ 'backend': './src/backend.js',
+ 'proxy': './src/proxy.js',
+ 'detector': './src/detector.js',
+ },
+ output: {
+ path: path.join(__dirname, 'build'),
+ filename: '[name].js',
+ },
+ devtool: process.env.NODE_ENV !== 'production'
+ ? 'inline-source-map'
+ : false,
+})
diff --git a/vue-devtools/packages/shell-host/package.json b/vue-devtools/packages/shell-host/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..1c59f56826e38a4df8005333da3163fcf368a51d
--- /dev/null
+++ b/vue-devtools/packages/shell-host/package.json
@@ -0,0 +1,19 @@
+{
+ "name": "@vue-devtools/shell-host",
+ "version": "0.0.0",
+ "private": true,
+ "scripts": {
+ "dev": "cross-env TAILWIND_MODE=watch webpack serve"
+ },
+ "dependencies": {
+ "@vue-devtools/app-backend-core": "^0.0.0",
+ "@vue-devtools/app-frontend": "^0.0.0",
+ "@vue-devtools/shared-utils": "^0.0.0",
+ "vue": "^3.3.4"
+ },
+ "devDependencies": {
+ "cross-env": "^5.2.0",
+ "webpack": "^5.90.1",
+ "webpack-cli": "^5.1.4"
+ }
+}
diff --git a/vue-devtools/packages/shell-host/public/favicon.svg b/vue-devtools/packages/shell-host/public/favicon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4ee2e82507b0bf83f7b3843db2616d2eee8b330f
--- /dev/null
+++ b/vue-devtools/packages/shell-host/public/favicon.svg
@@ -0,0 +1,41 @@
+
+
diff --git a/vue-devtools/packages/shell-host/public/index.html b/vue-devtools/packages/shell-host/public/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..be7d7c2a193335ea7b536035cb1f42752cf94384
--- /dev/null
+++ b/vue-devtools/packages/shell-host/public/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+ Plain Shell
+
+
+
+
+
+
+ Not Vue
+
+
+
+
diff --git a/vue-devtools/packages/shell-host/src/DevIframe.vue b/vue-devtools/packages/shell-host/src/DevIframe.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d3c892b016141c3373e114913a990219bdd23b77
--- /dev/null
+++ b/vue-devtools/packages/shell-host/src/DevIframe.vue
@@ -0,0 +1,228 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ You need to disable Chrome web security to allow manipulating an iframe on a different origin.
+
+
google-chrome --disable-web-security --disable-site-isolation-trials --user-data-dir="temp-chrome-data"
+
If the devtools have trouble connecting to the webpage, please put this snippet in the target app HTML before the main scripts:
+
+
+
+ Please
disable Chrome web security to allow manipulating an iframe on a different origin.
+
google-chrome --disable-web-security --disable-site-isolation-trials --user-data-dir="temp-chrome-data"
+