Upload folder using huggingface_hub

.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "amd": true,
+    "commonjs": true
+  },
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "extends": "eslint:recommended",
+  "globals": {
+    "process": "readonly"
+  },
+  "rules": {
+    "indent": ["error", 2],
+    "quotes": ["error", "single"],
+    "no-extra-semi": "off"
+  }
+}

.gitattributes

@@ -33,3 +33,12 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+vue-devtools/media/chrome-webstore/screenshot1-size.png filter=lfs diff=lfs merge=lfs -text
+vue-devtools/media/chrome-webstore/screenshot1.png filter=lfs diff=lfs merge=lfs -text
+vue-devtools/media/screenshot-rounded.png filter=lfs diff=lfs merge=lfs -text
+vue-devtools/media/screenshot-shadow.png filter=lfs diff=lfs merge=lfs -text
+vue-devtools/media/screenshot.png filter=lfs diff=lfs merge=lfs -text
+vue-devtools/packages/app-frontend/src/assets/Roboto-Mono.ttf filter=lfs diff=lfs merge=lfs -text
+vue-devtools/packages/docs/src/assets/dev-shell-url.png filter=lfs diff=lfs merge=lfs -text
+vue-devtools/packages/docs/src/assets/edge-settings1.png filter=lfs diff=lfs merge=lfs -text
+vue-devtools/packages/docs/src/public/logo-edge.png filter=lfs diff=lfs merge=lfs -text

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+ko_fi: surunzi
+open_collective: eruda

.github/workflows/main.yml

@@ -0,0 +1,31 @@
+name: CI
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - 'master'
+    paths:
+      - 'src/**/*'
+
+jobs:
+  ci:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: |
+        npm install -g @liriliri/lsla
+        npm install -g yarn
+        npm run init
+        npm run init:front
+        npm run ci

.github/workflows/publish.yml

@@ -0,0 +1,31 @@
+name: Publish to NPM
+
+on:
+  workflow_dispatch:
+  release:
+    types: [created]
+
+jobs:
+  publish:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Build eruda-vue
+        run: |
+          npm install -g @liriliri/lsla
+          npm install -g yarn
+          npm run init
+          npm run init:front
+          npm run build
+      - name: Publish package on NPM
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+src/devtools.txt
+eruda-vue.js
+eruda-vue.js.map
+package-lock.json

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "vue-devtools"]
+	path = vue-devtools
+	url = https://github.com/liriliri/vue-devtools

.prettierignore

@@ -0,0 +1 @@
+src/devtools.js

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "semi": false
+}

CHANGELOG.md

@@ -0,0 +1,15 @@
+## v1.1.1 (5 Sep 2024)
+
+* fix: safari
+
+## v1.1.0 (4 Sep 2024)
+
+* feat: force dev mode
+
+## v1.0.1 (16 Aug 2024)
+
+* fix: initial theme not correct
+
+## v1.0.0 (15 Aug 2024)
+
+Initial release.

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024-present liriliri
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,10 +1,30 @@
----
-title: Eruda Vue
-emoji: 📚
-colorFrom: green
-colorTo: yellow
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# eruda-vue
+
+[![NPM version][npm-image]][npm-url]
+[![Build status][ci-image]][ci-url]
+[![License][license-image]][npm-url]
+
+[npm-image]: https://img.shields.io/npm/v/eruda-vue.svg
+[npm-url]: https://npmjs.org/package/eruda-vue
+[ci-image]: https://img.shields.io/github/actions/workflow/status/liriliri/eruda-vue/main.yml?branch=master&style=flat-square
+[ci-url]: https://github.com/liriliri/eruda-vue/actions/workflows/main.yml 
+[license-image]: https://img.shields.io/npm/l/eruda-vue.svg
+
+Eruda plugin for Vue.
+
+## Demo
+
+Browse it on your phone: 
+[https://eruda.liriliri.io/?plugin=vue](https://eruda.liriliri.io/?plugin=vue)
+
+## Install
+
+```bash
+npm install eruda-vue --save
+```
+
+```javascript
+eruda.add(erudaVue);
+```
+
+Make sure Eruda is loaded before this plugin, otherwise won't work.

index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+    />
+    <title>Eruda-vue</title>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+  </head>
+  <body>
+    <div id="app">{{ message }}</div>
+    <script>
+      const { createApp, ref } = Vue
+
+      createApp({
+        setup() {
+          const message = ref('Hello vue!')
+          return {
+            message,
+          }
+        },
+      }).mount('#app')
+    </script>
+    <script src="node_modules/eruda/eruda.js"></script>
+    <script>
+      setTimeout(() => {
+        console.log(__VUE_DEVTOOLS_GLOBAL_HOOK__)
+      }, 3000)
+      eruda.init({ tool: ['console'] })
+    </script>
+    <script src="assets/eruda-vue.js"></script>
+    <script>
+      eruda.add(erudaVue).show('vue').show()
+    </script>
+  </body>
+</html>

package.json

@@ -0,0 +1,56 @@
+{
+  "name": "eruda-vue",
+  "version": "1.1.1",
+  "main": "eruda-vue.js",
+  "description": "Eruda plugin for Vue",
+  "files": [
+    "eruda-vue.js",
+    "eruda-vue.js.map"
+  ],
+  "scripts": {
+    "init": "git submodule init && git submodule update && npm install --force && cd vue-devtools && yarn && npm run build",
+    "init:front": "npm run build:front && npm run copy:front",
+    "build:front": "cd vue-devtools/packages/shell-eruda && npm run build",
+    "copy:front": "lsla shx cp -r vue-devtools/packages/shell-eruda/build/devtools.js src/devtools.txt",
+    "dev": "webpack-dev-server --host 0.0.0.0 --mode development",
+    "build": "webpack --mode production",
+    "ci": "npm run lint && npm run build",
+    "lint": "eslint src/**/*.js",
+    "format": "lsla prettier \"src/*.{js,scss}\" \"*.{json,html}\" --write"
+  },
+  "keywords": [
+    "eruda",
+    "vue",
+    "plugin"
+  ],
+  "author": "surunzi",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/liriliri/eruda-vue/issues"
+  },
+  "homepage": "https://github.com/liriliri/eruda-vue#readme",
+  "devDependencies": {
+    "@babel/core": "^7.21.3",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "autoprefixer": "^10.4.14",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^3.4.2",
+    "eruda": "^3.2.0",
+    "eslint": "^8.57.0",
+    "licia": "^1.41.1",
+    "path-browserify": "^1.0.1",
+    "postcss": "^8.4.21",
+    "postcss-class-prefix": "^0.3.0",
+    "postcss-loader": "^7.0.2",
+    "raw-loader": "^4.0.2",
+    "sass": "^1.77.8",
+    "sass-loader": "^14.2.1",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.12.0"
+  },
+  "workspaces": [
+    "vue-devtools/packages/*"
+  ]
+}

src/back.js

@@ -0,0 +1,221 @@
+import { installHook as _installHook } from '@back/hook'
+import { Bridge } from '@utils/bridge'
+import { SharedData } from '@utils/shared-data'
+import createUrl from 'licia/createUrl'
+import devtools from 'raw-loader!./devtools.txt'
+
+let theme = 'auto'
+let shareDataLoaded = false
+
+export function installHook() {
+  if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
+    return
+  }
+  _installHook(window)
+}
+
+export function initDevtools(iframe) {
+  const bridge = new Bridge({
+    listen(fn) {
+      window.addEventListener('message', (evt) => {
+        if (process.env.NODE_ENV !== 'production') {
+          console.log('devtools -> backend', evt.data)
+        }
+        fn(evt.data)
+      })
+    },
+    send(data) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.log('backend -> devtools', data)
+      }
+      iframe.contentWindow.postMessage(data, '*')
+    },
+  })
+  bridge.on('shared-data:load-complete', () => {
+    shareDataLoaded = true
+    setTheme(theme)
+  })
+  import('@back').then(({ initBackend }) => {
+    initBackend(bridge)
+  })
+
+  const devtoolsSrc = createUrl(devtools, { type: 'application/javascript' })
+
+  const devtoolsUrl = createUrl(
+    `<!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+      </head>
+      <body>
+        <div id="app"></div>
+        <script src="${devtoolsSrc}"></script>
+      </body>
+    </html>`,
+    {
+      type: 'text/html',
+    }
+  )
+
+  iframe.__vdevtools__injected = true
+  iframe.src = devtoolsUrl
+}
+
+export function setTheme(value) {
+  theme = value
+  if (shareDataLoaded) {
+    SharedData.theme = value
+  }
+}
+
+// Modified from vue-devtools
+export function forceEnable() {
+  if (!window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
+    return
+  }
+
+  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
+      }
+
+      crack({
+        devtoolsEnabled:
+          (Vue && Vue.config.devtools) ||
+          (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) {
+      crack({
+        devtoolsEnabled:
+          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
+      }
+      crack({
+        devtoolsEnabled: Vue.config.devtools,
+        vueDetected: true,
+      })
+      return
+    }
+
+    if (detectRemainingTries > 0) {
+      detectRemainingTries--
+      setTimeout(() => {
+        runDetect()
+      }, delay)
+      delay *= 5
+    }
+  }
+
+  setTimeout(() => {
+    runDetect()
+  }, 100)
+}
+
+// https://github.com/hzmming/vue-force-dev
+function crack(data) {
+  if (data.devtoolsEnabled) {
+    return
+  }
+
+  // Nuxt.js
+  if (data.nuxtDetected) {
+    let Vue
+
+    if (window.$nuxt) {
+      Vue = window.$nuxt.$root && window.$nuxt.$root.constructor
+    }
+
+    // Vue 2
+    if (Vue) {
+      crackVue2(Vue)
+    } else {
+      // Vue 3.2.14+
+      crackVue3()
+    }
+  }
+  // Vue 3
+  else if (window.__VUE__) {
+    crackVue3()
+  }
+  // Vue 2
+  else {
+    crackVue2()
+  }
+}
+
+function crackVue2(Vue) {
+  if (!Vue) {
+    const app = getVueRootInstance(2)
+    if (!app) return false // Vue may not be finished yet
+    Vue = Object.getPrototypeOf(app).constructor
+    while (Vue.super) {
+      Vue = Vue.super
+    }
+  }
+
+  const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
+  Vue.config.devtools = true
+  devtools.emit('init', Vue)
+}
+
+function crackVue3() {
+  const app = getVueRootInstance(3)
+  if (!app) return false // Vue may not be finished yet
+  const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
+  devtools.enabled = true
+  const version = app.version
+  devtools.emit('app:init' /* APP_INIT */, app, version, {
+    Fragment: Symbol.for('v-fgt'),
+    Text: Symbol.for('v-txt'),
+    Comment: Symbol.for('v-cmt'),
+    Static: Symbol.for('v-stc'),
+  })
+}
+
+function getVueRootInstance(version) {
+  const signProperty = version === 2 ? '__vue__' : '__vue_app__'
+  const all = document.querySelectorAll('*')
+  for (let i = 0; i < all.length; i++) {
+    if (all[i][signProperty]) {
+      return all[i][signProperty]
+    }
+  }
+}

src/index.js

@@ -0,0 +1,45 @@
+const { initDevtools, setTheme, installHook, forceEnable } = require('./back')
+
+module.exports = function (eruda) {
+  let { evalCss } = eruda.util
+
+  class Vue extends eruda.Tool {
+    constructor() {
+      super()
+      this.name = 'vue'
+      this._style = evalCss(require('./style.scss'))
+    }
+    init($el, container) {
+      super.init($el, container)
+      $el.html('<iframe class="eruda-vue-devtools"></iframe>')
+      const iframe = $el.find('.eruda-vue-devtools').get(0)
+
+      installHook()
+      forceEnable()
+      initDevtools(iframe)
+
+      setTheme(this._getTheme())
+      eruda.get().config.on('change', this._onThemeChange)
+    }
+    show() {
+      super.show()
+    }
+    hide() {
+      super.hide()
+    }
+    destroy() {
+      super.destroy()
+      evalCss.remove(this._style)
+    }
+    _getTheme() {
+      return eruda.util.isDarkTheme() ? 'dark' : 'light'
+    }
+    _onThemeChange = (name) => {
+      if (name === 'theme') {
+        setTheme(this._getTheme())
+      }
+    }
+  }
+
+  return new Vue()
+}

src/style.scss

@@ -0,0 +1,12 @@
+.vue {
+  padding: 0;
+  .tip {
+    padding: 10px;
+    background: #fff;
+    color: #263238;
+  }
+  .vue-devtools {
+    width: 100%;
+    height: 100%;
+  }
+}

vue-devtools/.browserslistrc

@@ -0,0 +1,2 @@
+Chrome >= 52
+Firefox >= 48

vue-devtools/.circleci/config.yml

@@ -0,0 +1,37 @@
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: node:current
+      - image: vuejs/ci
+    resource_class: medium+
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+            - v3-dependencies-{{ checksum "yarn.lock" }}
+            # fallback to using the latest cache if no exact match is found
+            - v3-dependencies-
+
+      - run: yarn install --pure-lockfile
+
+      - save_cache:
+          paths:
+            - node_modules
+            - ~/.cache/yarn
+            - ~/.cache/Cypress
+          key: v3-dependencies-{{ checksum "yarn.lock" }}
+
+      # run tests!
+      - run: yarn build && yarn test
+
+      - store_artifacts:
+          path: cypress/videos
+      - store_artifacts:
+          path: cypress/screenshots

vue-devtools/.github/FUNDING.yml

@@ -0,0 +1 @@
+github: Akryum

vue-devtools/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,78 @@
+name: 🐞 Bug report
+description: Create a report to help us improve
+body:
+  - type: markdown
+    attributes:
+      value: |
+        **Before You Start...**
+
+        This form is only for submitting bug reports. If you have a usage question
+        or are unsure if this is really a bug, make sure to:
+
+        - Read the [docs](https://devtools.vuejs.org/)
+        - Read the [FAQ](https://devtools.vuejs.org/guide/faq.html)
+        - Ask on [GitHub Discussions](https://github.com/vuejs/devtools/discussions)
+        - Ask on [Discord Chat](https://chat.vuejs.org/)
+
+        Also try to search for your issue - it may have already been answered or even fixed in the development branch.
+        However, if you find that an old, closed issue still persists in the latest version,
+        you should open a new issue using the form below instead of commenting on the old issue.
+  - type: input
+    id: version
+    attributes:
+      label: Vue devtools version
+      description: |
+        Open your browser Extensions page and find the Vue devtools extension. Then write in this field the version number shown next to the Vue devtools extension name.
+    validations:
+      required: true
+  - type: input
+    id: reproduction-link
+    attributes:
+      label: Link to minimal reproduction
+      description: |
+        The easiest way to provide a reproduction is by showing the bug in [The SFC Playground](https://sfc.vuejs.org/).
+        If it cannot be reproduced in the playground and requires a proper build setup, try [StackBlitz](https://vite.new/vue).
+        If neither of these are suitable, you can always provide a GitHub repository.
+
+        The reproduction should be **minimal** - i.e. it should contain only the bare minimum amount of code needed
+        to show the bug. See [Bug Reproduction Guidelines](https://github.com/vuejs/core/blob/main/.github/bug-repro-guidelines.md) for more details.
+
+        Please do not just fill in a random link. The issue will be closed if no valid reproduction is provided.
+      placeholder: Reproduction Link
+    validations:
+      required: true
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: Steps to reproduce & screenshots
+      description: |
+        What do we need to do after opening your repro in order to make the bug happen in the devtools? Clear and concise reproduction instructions are important for us to be able to triage your issue in a timely manner. Note that you can upload screenshots and use [Markdown](https://guides.github.com/features/mastering-markdown/) to format lists and code.
+      placeholder: Steps to reproduce
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: What is expected?
+    validations:
+      required: true
+  - type: textarea
+    id: actually-happening
+    attributes:
+      label: What is actually happening?
+    validations:
+      required: true
+  - type: textarea
+    id: system-info
+    attributes:
+      label: System Info
+      description: Output of `npx envinfo --system --npmPackages vue --binaries --browsers`
+      render: shell
+      placeholder: System, Binaries, Browsers
+    validations:
+      required: true
+  - type: textarea
+    id: additional-comments
+    attributes:
+      label: Any additional comments?
+      description: e.g. some background/context of how you ran into this bug.

vue-devtools/.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,14 @@
+blank_issues_enabled: false
+contact_links:
+  - name: I have a performance issue
+    url: https://devtools.vuejs.org/guide/devtools-perf.html
+    about: Follow the guide to share performance profiling data with us!
+  - name: Questions & Discussions
+    url: https://github.com/vuejs/devtools/discussions
+    about: Use GitHub discussions for message-board style questions and discussions.
+  - name: Discord Chat
+    url: https://chat.vuejs.org
+    about: Ask questions and discuss with other Vue users in real time.
+  - name: GitHub Sponsor
+    url: https://github.com/sponsors/Akryum
+    about: Love the Vue devtools? Please consider supporting us via GitHub sponsors.

vue-devtools/.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,28 @@
+name: 🚀 New feature proposal
+description: Suggest an idea for this project
+labels: [':sparkles: feature request']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        **Before You Start...**
+
+         This form is only for submitting feature requests. If you have a usage question
+         or are unsure if this is really a bug, make sure to:
+
+         - Read the [docs](https://devtools.vuejs.org/)
+         - Read the [FAQ](https://devtools.vuejs.org/guide/faq.html)
+         - Ask on [GitHub Discussions](https://github.com/vuejs/devtools/discussions)
+         - Ask on [Discord Chat](https://chat.vuejs.org/)
+
+         Also try to search for your issue - another user may have already requested something similar!
+
+  - type: textarea
+    id: problem-description
+    attributes:
+      label: What problem does this feature solve?
+      description: |
+        Explain your use case, context, and rationale behind this feature request. More importantly, what is the **end user experience** you are trying to build that led to the need for this feature?
+      placeholder: Problem description
+    validations:
+      required: true

vue-devtools/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,26 @@
+<!-- Thank you for contributing! -->
+
+### Description
+
+<!-- Please insert your description here and provide especially info about the "what" this PR is solving -->
+
+### Additional context
+
+<!-- e.g. is there anything you'd like reviewers to focus on? -->
+
+---
+
+### What is the purpose of this pull request? <!-- (put an "X" next to an item) -->
+
+- [ ] Bug fix
+- [ ] New Feature
+- [ ] Documentation update
+- [ ] Other
+
+### Before submitting the PR, please make sure you do the following
+
+- [ ] Read the [Contributing Guidelines](https://devtools.vuejs.org/guide/contributing.html).
+- [ ] Read the [Pull Request Guidelines](https://devtools.vuejs.org/guide/contributing.html#pull-request-guidelines) and follow the [Commit Convention](https://github.com/vuejs/devtools/blob/main/.github/commit-convention.md).
+- [ ] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
+- [ ] Provide a description in this PR that addresses **what** the PR is solving, or reference the issue that it solves (e.g. `fixes #123`).
+<!-- @TODO tests - [ ] Ideally, include relevant tests that fail without this PR but pass with it. -->

vue-devtools/.github/commit-convention.md

@@ -0,0 +1,92 @@
+## Git Commit Message Convention
+
+> This is adapted from [Angular's commit convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular).
+
+#### TL;DR:
+
+Messages must be matched by the following regex:
+
+<!-- prettier-ignore -->
+```js
+/^(revert: )?(feat|fix|docs|dx|refactor|perf|test|workflow|build|ci|chore|types|wip|release|deps)(\(.+\))?: .{1,50}/
+```
+
+#### Examples
+
+Appears under "Features" header, `dev` subheader:
+
+```
+feat(dev): add 'comments' option
+```
+
+Appears under "Bug Fixes" header, `dev` subheader, with a link to issue #28:
+
+```
+fix(dev): fix dev error
+
+close #28
+```
+
+Appears under "Performance Improvements" header, and under "Breaking Changes" with the breaking change explanation:
+
+```
+perf(build): remove 'foo' option
+
+BREAKING CHANGE: The 'foo' option has been removed.
+```
+
+The following commit and commit `667ecc1` do not appear in the changelog if they are under the same release. If not, the revert commit appears under the "Reverts" header.
+
+```
+revert: feat(compiler): add 'comments' option
+
+This reverts commit 667ecc1654a317a13331b17617d973392f415f02.
+```
+
+### Full Message Format
+
+A commit message consists of a **header**, **body** and **footer**. The header has a **type**, **scope** and **subject**:
+
+```
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+<BLANK LINE>
+<footer>
+```
+
+The **header** is mandatory and the **scope** of the header is optional.
+
+### Revert
+
+If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body, it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
+
+### Type
+
+If the prefix is `feat`, `fix` or `perf`, it will appear in the changelog. However, if there is any [BREAKING CHANGE](#footer), the commit will always appear in the changelog.
+
+Other prefixes are up to your discretion. Suggested prefixes are `docs`, `chore`, `style`, `refactor`, and `test` for non-changelog related tasks.
+
+### Scope
+
+The scope could be anything specifying the place of the commit change. For example `dev`, `build`, `workflow`, `cli` etc...
+
+### Subject
+
+The subject contains a succinct description of the change:
+
+- use the imperative, present tense: "change" not "changed" nor "changes"
+- don't capitalize the first letter
+- no dot (.) at the end
+
+### Body
+
+Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
+The body should include the motivation for the change and contrast this with previous behavior.
+
+### Footer
+
+The footer should contain any information about **Breaking Changes** and is also the place to
+reference GitHub issues that this commit **Closes**.
+
+**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.

vue-devtools/.github/workflows/create-release.yml

@@ -0,0 +1,24 @@
+name: Create release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  build:
+    name: Create Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@master
+        with:
+          fetch-depth: 0 # Fetch all tags
+
+      - name: Create Release for Tag
+        id: release_tag
+        uses: Akryum/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ github.ref }}

vue-devtools/.gitignore

@@ -0,0 +1,16 @@
+node_modules
+.DS_Store
+build
+/dist/*
+*.zip
+*.xpi
+tests_output
+selenium-debug.log
+TODOs.md
+.idea
+.web-extension-id
+yarn-error.log
+
+/packages/*/lib
+.amo.env.json
+build-node

vue-devtools/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

vue-devtools/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-present Evan You
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

vue-devtools/README.md

@@ -0,0 +1,46 @@
+# Try the next iteration of Vue Devtools!
+
+We have a brand new version of Devtools being developed at [vuejs/devtools-next](https://github.com/vuejs/devtools-next). It is now in beta, please help us [test it out](https://devtools-next.vuejs.org/getting-started/installation)!
+
+---
+
+# vue-devtools
+
+![screenshot](./media/screenshot-shadow.png)
+
+[Documentation](https://devtools.vuejs.org/) | [Install the extension](https://devtools.vuejs.org/guide/installation.html)
+
+## Monorepo
+
+|Package|Description|
+|-------|-----------|
+[api](./packages/api) | The public devtools API that can be installed in Vue plugins |
+[app-backend-api](./packages/app-backend-api) | Abstract API to link the Public API, the core and Vue handlers |
+[app-backend-core](./packages/app-backend-core) | The main logic injected in the page to interact with Vue apps |
+[app-backend-vue1](./packages/app-backend-vue1) | Decoupled handlers to support Vue 1 (soon) |
+[app-backend-vue2](./packages/app-backend-vue2) | Decoupled handlers to support Vue 2 |
+[app-backend-vue3](./packages/app-backend-vue3) | Decoupled handlers to support Vue 3 |
+[app-frontend](./packages/app-frontend) | Vue app displayed in the browser devtools pane |
+[shell-chrome](./packages/shell-chrome) | Chrome/Firefox extension |
+[shell-electron](./packages/shell-electron) | Electron standalone app |
+[shell-host](./packages/shell-host) | Development environment |
+[shell-dev-vue2](./packages/shell-dev-vue2) | Demo app for development (Vue 2) |
+[shell-dev-vue3](./packages/shell-dev-vue3) | Demo app for development (Vue 3) |
+
+## Contributing
+
+See the [Contributing guide](https://devtools.vuejs.org/guide/contributing.html).
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)
+
+## Sponsors
+
+[💚️ Become a Sponsor](https://github.com/sponsors/Akryum)
+
+<p align="center">
+  <a href="https://guillaume-chau.info/sponsors/" target="_blank">
+    <img src='https://akryum.netlify.app/sponsors.svg'/>
+  </a>
+</p>

vue-devtools/babel.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  presets: [
+    [
+      '@babel/env',
+      {
+        modules: false,
+      },
+    ],
+  ],
+}

vue-devtools/cypress.json

@@ -0,0 +1,5 @@
+{
+  "viewportWidth": 1280,
+  "viewportHeight": 800,
+  "chromeWebSecurity": false
+}

vue-devtools/cypress/.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    'cypress',
+  ],
+  env: {
+    'mocha': true,
+    'cypress/globals': true,
+  },
+  rules: {
+    strict: 'off',
+  },
+}

vue-devtools/cypress/.gitignore

@@ -0,0 +1,2 @@
+/screenshots
+/videos

vue-devtools/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

vue-devtools/cypress/integration/component-data-edit.js

@@ -0,0 +1,101 @@
+import { suite } from '../utils/suite'
+
+suite('component data edit', () => {
+  it('should edit data using the decrease button', () => {
+    // select Instance
+    cy.get('.instance:nth-child(1) .instance:nth-child(2)').eq(0).click()
+    cy.get('.component-state-inspector .data-type').should('contain', 'data')
+    cy.get('.data-field').eq(7).find('.actions .vue-ui-button').eq(1).click({ force: true })
+    cy.get('.component-state-inspector').within(() => {
+      cy.get('.key').contains('0').parent().get('.value').contains('0')
+    })
+    cy.get('.data-field').eq(7).find('.actions .vue-ui-button').eq(1).click({ force: true })
+    cy.get('.component-state-inspector').within(() => {
+      cy.get('.key').contains('0').parent().contains('-1')
+    })
+
+    // expect DOM element to be updated
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#target div').eq(0).contains('-1')
+    })
+  })
+
+  it('should edit data using the increase button', () => {
+    cy.get('.instance:nth-child(1) .instance:nth-child(2)').eq(0).click()
+    cy.get('.component-state-inspector .data-type').should('contain', 'data')
+    cy.get('.data-field').eq(7).find('.actions .vue-ui-button').eq(2).click({ force: true })
+    cy.get('.component-state-inspector').within(() => {
+      cy.get('.key').contains('0').parent().get('.value').contains('0')
+    })
+
+    // expect DOM element to be updated
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#target div').eq(0).contains('0')
+    })
+  })
+
+  it('should edit data using the edit input', () => {
+    cy.get('.instance:nth-child(1) .instance:nth-child(2)').eq(0).click()
+    cy.get('.data-field').eq(7).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.get('.component-state-inspector').within(() => {
+      cy.get('.key').contains('0').parent().get('.value').contains('12')
+    })
+
+    // expect DOM element to be updated
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#target div').eq(0).contains('12')
+    })
+  })
+
+  it('should add elements to array', () => {
+    cy.get('.instance:nth-child(1) .instance:nth-child(2)').eq(0).click()
+    cy.get('.data-field').eq(6).find('.actions .vue-ui-button').eq(1).click({ force: true })
+
+    cy.get('.edit-input').type('55')
+    cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
+
+    cy.get('.data-field').eq(6).find('.children .data-field').should('have.length', '3', { timeout: 5000 })
+    cy.get('.component-state-inspector').within(() => {
+      cy.get('.key').contains('2').parent().get('.value').contains('55')
+    })
+
+    // expect DOM element to be updated
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#target div').eq(4).contains('55')
+    })
+  })
+
+  it('should remove elements from array', () => {
+    cy.get('.instance:nth-child(1) .instance:nth-child(2)').eq(0).click()
+    cy.get('.data-field').eq(9).find('.actions .vue-ui-button').eq(3).click({ force: true })
+
+    cy.get('.data-field').eq(6).find('.children .data-field').should('have.length', '2', { timeout: 5000 })
+  })
+
+  it('should parse object through edit input', () => {
+    cy.get('.instance:nth-child(1) .instance:nth-child(2)').eq(0).click()
+    cy.get('.data-field').eq(7).find('.actions .vue-ui-button').eq(0).click({ force: true })
+
+    cy.get('.edit-input').type('{{}"count":42}')
+    cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
+
+    cy.get('.data-field').eq(7).should('contain', 'Object', { timeout: 5000 })
+    // expand object
+    cy.get('.data-field').eq(7).click()
+    cy.get('.data-field').eq(8).find('.key').should('contain', 'count', { timeout: 5000 })
+    cy.get('.data-field').eq(8).find('.value').should('contain', 42, { timeout: 5000 })
+  })
+
+  it('should rename object\'s property', () => {
+    cy.get('.instance:nth-child(1) .instance:nth-child(2)').eq(0).click()
+    cy.get('.data-field').eq(8).find('.actions .vue-ui-button').eq(0).click({ force: true })
+    cy.get('.edit-input.key-input').clear().type('name')
+    cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
+
+    cy.get('.data-field').eq(8).find('.key').should('contain', 'name', { timeout: 5000 })
+  })
+})

vue-devtools/cypress/integration/components-tab.js

@@ -0,0 +1,146 @@
+import { suite } from '../utils/suite'
+
+const baseInstanceCount = 12
+
+suite('components tab', () => {
+  beforeEach(() => cy.reload())
+
+  it('should detect instances inside shadow DOM', () => {
+    cy.get('.tree > .instance:last-child').contains('Shadow')
+  })
+
+  it('should select instance', () => {
+    cy.get('.instance .self').eq(0).click().should('have.class', 'selected')
+    cy.get('.tree').should('be.visible')
+    cy.get('.action-header .title').contains('Root')
+    cy.get('.data-field').contains('$route')
+  })
+
+  it('should expand root by default', () => {
+    cy.get('.instance').should('have.length', baseInstanceCount)
+  })
+
+  it('should detect functional components', () => {
+    cy.get('.tree > .instance .instance:nth-child(2)').within(() => {
+      cy.get('.arrow').click().then(() => {
+        cy.get('.instance:last-child').contains('Functional')
+      })
+    })
+  })
+
+  it('should display 0 key', () => {
+    cy.get('.tree > .instance .instance:nth-child(2)').within(() => {
+      cy.get('.arrow').click().then(() => {
+        cy.get('.instance:nth-child(3) .attr').contains('key=0')
+      })
+    })
+  })
+
+  it('should detect components in transition', () => {
+    cy.get('.tree > .instance .instance:nth-child(7)').within(() => {
+      cy.get('.arrow').click().then(() => {
+        cy.get('.instance').eq(1).within(() => {
+          cy.get('.arrow').click().then(() => {
+            cy.get('.instance').contains('TestComponent')
+          })
+        })
+      })
+    })
+  })
+
+  it('should select child instance', () => {
+    cy.get('.instance .instance:nth-child(1) .self').eq(0).click()
+    cy.get('.action-header .title').contains('Counter')
+    cy.get('.data-el.vuex-bindings .data-field').contains('count:0')
+    cy.get('.data-el.computed .data-field').contains('test:1')
+    cy.get('.data-el.firebase-bindings .data-field').contains('hello:undefined')
+  })
+
+  it('should display prop of different types', () => {
+    cy.get('.instance .instance:nth-child(2) .self').eq(0).click()
+    cy.get('.action-header .title').contains('Target')
+    cy.get('.data-el.props .data-field:nth-child(1)').contains('ins:Object')
+    cy.get('.data-el.props .data-field:nth-child(2)').contains('msg:"hi"')
+    cy.get('.data-el.props .data-field:nth-child(3)').contains('obj:undefined')
+    // Regexp
+    cy.get('.data-el.data .data-field:nth-child(8)').then((el) => {
+      expect(el.text()).to.include('regex:/(a\\w+b)/g')
+    })
+    // Literals
+    cy.get('.data-el.data .data-field:nth-child(5)').contains('NaN')
+    cy.get('.data-el.data .data-field:nth-child(2)').contains('Infinity')
+    cy.get('.data-el.data .data-field:nth-child(6)').contains('-Infinity')
+  })
+
+  it('should expand child instance', () => {
+    cy.get('.instance .instance:nth-child(2) .arrow-wrapper').click()
+    cy.get('.instance').should('have.length', baseInstanceCount + 10)
+  })
+
+  it('should add/remove component from app side', () => {
+    cy.get('.instance .instance:nth-child(2) .arrow-wrapper').click()
+    cy.get('.instance').should('have.length', baseInstanceCount + 10)
+    cy.get('#target').iframe().then(({ get }) => {
+      get('.add').click({ force: true })
+    })
+    cy.get('.instance').should('have.length', baseInstanceCount + 13)
+    cy.get('#target').iframe().then(({ get }) => {
+      get('.remove').click({ force: true })
+    })
+    cy.get('.instance').should('have.length', baseInstanceCount + 12)
+  })
+
+  it('should filter components', () => {
+    cy.get('.left .search input').clear().type('counter')
+    cy.get('.instance').should('have.length', 2)
+    cy.get('.left .search input').clear().type('target')
+    cy.get('.instance').should('have.length', 12)
+    cy.get('.left .search input').clear()
+  })
+
+  it('should select component', () => {
+    cy.get('.select-component').click()
+    cy.get('#target').iframe().then(({ get }) => {
+      get('.mine').eq(0)
+        .trigger('mouseover', { force: true })
+        .click({ force: true })
+    })
+    cy.get('.action-header .title').contains('Mine')
+    cy.get('.tree').then((el) => {
+      expect(el.text()).to.include('<Mine>')
+    })
+  })
+
+  it('should display render key', () => {
+    cy.get('.instance .instance:nth-child(2) .arrow-wrapper').click()
+    cy.get('.instance .self .attr-title').contains('key')
+    cy.get('.instance .self .attr-value').contains('1')
+  })
+
+  it('should display injected props', () => {
+    cy.get('.left .search input').clear().type('Mine')
+    cy.get('.instance').eq(1).click()
+    cy.get('.right .data-wrapper')
+      .should('contain', 'injected')
+      .should('contain', 'answer:42')
+      .should('contain', 'foo:"bar"')
+      .should('contain', 'noop:ƒ noop(a, b, c)')
+    cy.get('.left .search input').clear()
+  })
+
+  it('should display $refs', () => {
+    cy.get('.instance .item-name').contains('RefTester').click()
+    cy.get('.right .data-wrapper')
+      .should('contain', 'list:Array[4]')
+      .should('contain', '<li>')
+      .should('contain', 'tester:<p id="testing"')
+  })
+
+  it('should display $attrs', () => {
+    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"')
+  })
+})

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('<eventchild1>')
+    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)
+  })
+})

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')
+    })
+  })
+})

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')
+  })
+})

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
+  //   }
+  // })
+}

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 })
+    })
+  })
+})

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')

vue-devtools/cypress/utils/suite.js

@@ -0,0 +1,9 @@
+export function suite(description, tests) {
+  describe(description, () => {
+    before(() => {
+      cy.visit('/')
+      cy.vueCheckInit()
+    })
+    tests()
+  })
+}

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',
+  },
+})

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
+  }
+})()

vue-devtools/lerna.json

@@ -0,0 +1,11 @@
+{
+  "npmClient": "yarn",
+  "useWorkspaces": true,
+  "version": "6.0.0-beta.2",
+  "packages": [
+    "packages/*"
+  ],
+  "ignoreChanges": [
+    "**/*.md"
+  ]
+}