Skip to content

Commit

Permalink
Merge branch 'main' into feature/vuex
Browse files Browse the repository at this point in the history
  • Loading branch information
Azurewarth0920 authored May 11, 2024
2 parents fcbb0aa + 07a840e commit e256f95
Show file tree
Hide file tree
Showing 67 changed files with 1,645 additions and 1,411 deletions.
2 changes: 1 addition & 1 deletion docs/.vitepress/components/UseModeList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const list = [
link: '/guide/standalone',
},
{
name: 'Chrome Extension (Coming Soon)',
name: 'Chrome Extension',
logo: '/features/chrome-logo.svg',
link: '/guide/browser-extension',
disabled: true,
Expand Down
2 changes: 1 addition & 1 deletion docs/guide/browser-extension.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@

:::tip ⚠️

This feature is still under development and coming soon.
This feature is still under development.

:::
22 changes: 20 additions & 2 deletions docs/guide/faq.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,27 @@
# Frequently Asked Questions

## I can't use the Open In Editor feature
## I can't use the open-in-editor feature

The feature is based on the [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector) plugin and requires configuration, which you can do by looking at the [configuration documentation](https://github.com/webfansplz/vite-plugin-vue-inspector?tab=readme-ov-file#--configuration-ide--editor).

## How can I specify the editor for open-in-editor feature?

Starting from **v7.2.0**, you can specify the editor by `launchEditor` option:

This is a list of [supported editors](https://github.com/yyx990803/launch-editor?tab=readme-ov-file#supported-editors), please ensure that the editor's environment variables are correctly configured beforehand.

```ts
import VueDevTools from 'vite-plugin-vue-devtools'
export default defineConfig({
plugins: [
VueDevTools({
launchEditor: 'webstorm',
}),
Unocss(),
],
})
```

## How to work with Laravel Vite Plugin?

```ts
Expand All @@ -13,7 +31,7 @@ import VueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
plugins: [
DevTools({
VueDevTools({
appendTo: 'resources/js/app.js'
}),
laravel([
Expand Down
18 changes: 16 additions & 2 deletions docs/guide/vite-plugin.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,28 @@ interface VitePluginVueDevToolsOptions {
appendTo?: string | RegExp

/**
* Customize openInEditor host (e.g. http://localhost:3000)
* Enable vue component inspector
*
* @default true
*/
componentInspector?: boolean | VitePluginInspectorOptions

/**
* Target editor when open in editor (v7.2.0+)
*
* @default code (Visual Studio Code)
*/
launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm'

/**
* Customize openInEditor host
* @default false
* @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host.
*/
openInEditorHost?: string | false

/**
* DevTools client host (e.g. http://localhost:3000)
* DevTools client host
* useful for projects that use a reverse proxy
* @default false
* @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host.
Expand Down
6 changes: 3 additions & 3 deletions docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
"devDependencies": {
"@unocss/reset": "^0.59.4",
"@vueuse/core": "^10.9.0",
"unplugin-vue-components": "^0.26.0",
"vitepress": "1.1.3",
"vue": "^3.4.23"
"unplugin-vue-components": "^0.27.0",
"vitepress": "1.1.4",
"vue": "^3.4.26"
}
}
24 changes: 12 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"type": "module",
"version": "7.1.3",
"private": true,
"packageManager": "[email protected].5",
"packageManager": "[email protected].6",
"description": "DevTools for Vue.js",
"author": "webfansplz",
"license": "MIT",
Expand Down Expand Up @@ -68,19 +68,19 @@
"gen:vue-apis": "tsx ./scripts/vue-api-manifest.ts"
},
"devDependencies": {
"@antfu/eslint-config": "2.15.0",
"@antfu/eslint-config": "2.16.1",
"@antfu/ni": "^0.21.12",
"@arethetypeswrong/cli": "^0.15.3",
"@types/chrome": "^0.0.266",
"@types/chrome": "^0.0.267",
"@types/degit": "^2.8.6",
"@types/fs-extra": "^11.0.4",
"@types/node": "^20.12.7",
"@types/node": "^20.12.8",
"@unocss/eslint-plugin": "^0.59.4",
"@vue/devtools-core": "workspace:^",
"@vue/devtools-kit": "workspace:^",
"@vue/test-utils": "^2.4.5",
"archiver": "^7.0.1",
"bumpp": "^9.4.0",
"bumpp": "^9.4.1",
"cross-env": "^7.0.3",
"degit": "^2.8.4",
"eslint": "npm:[email protected]",
Expand All @@ -92,22 +92,22 @@
"jsdom": "^24.0.0",
"lint-staged": "^15.2.2",
"npm-run-all2": "^6.1.2",
"pnpm": "^9.0.5",
"pnpm": "^9.0.6",
"progress": "^2.0.3",
"publint": "^0.2.7",
"readdir-glob": "^2.0.0",
"regex-extra": "^0.2.2",
"simple-git-hooks": "^2.11.1",
"taze": "^0.13.6",
"taze": "^0.13.8",
"tsup": "^8.0.2",
"tsx": "^4.7.2",
"turbo": "^1.13.2",
"tsx": "^4.8.2",
"turbo": "^1.13.3",
"typescript": "^5.4.5",
"unbuild": "^2.0.0",
"unocss": "^0.59.4",
"vite": "^5.2.10",
"vitest": "^1.5.0",
"vue": "^3.4.23"
"vite": "^5.2.11",
"vitest": "^1.5.3",
"vue": "^3.4.26"
},
"simple-git-hooks": {
"pre-commit": "pnpm lint-staged"
Expand Down
6 changes: 3 additions & 3 deletions packages/applet/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,15 @@
"@vue/devtools-ui": "workspace:^",
"lodash-es": "^4.17.21",
"perfect-debounce": "^1.0.0",
"shiki": "1.3.0",
"shiki": "1.4.0",
"splitpanes": "^3.1.5",
"vue-virtual-scroller": "2.0.0-beta.8"
},
"devDependencies": {
"@types/lodash-es": "^4.17.12",
"unplugin-vue": "^5.0.5",
"vite-plugin-dts": "^3.8.3",
"vue": "^3.4.23",
"vite-plugin-dts": "^3.9.0",
"vue": "^3.4.26",
"vue-router": "^4.3.2"
}
}
2 changes: 1 addition & 1 deletion packages/applet/src/components/basic/NodeTag.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import type { InspectorNodeTag } from '@vue/devtools-kit'
import { VTooltip as vTooltip } from '@vue/devtools-ui'
import { vTooltip } from '@vue/devtools-ui'
import { toHex } from '~/utils'
defineProps<{
Expand Down
4 changes: 2 additions & 2 deletions packages/applet/src/components/state/StateFieldEditor.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { computed, ref, toRaw } from 'vue'
import { VueButton, VueDropdown, VueDropdownButton, VueIcon, VTooltip as vTooltip } from '@vue/devtools-ui'
import { VueButton, VueDropdown, VueDropdownButton, VueIcon, vTooltip } from '@vue/devtools-ui'
import { getRaw } from '@vue/devtools-kit'
import type { InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
import type { ButtonProps } from '@vue/devtools-ui/dist/types/src/components/Button'
Expand Down Expand Up @@ -46,7 +46,7 @@ const buttonClass = computed(() => ({
function quickEdit(v: unknown, remove: boolean = false) {
editInspectorState({
path: props.data.key.split('.'),
path: props.data.path || [props.data.key],
inspectorId: state.value.inspectorId,
type: props.data.stateType!,
nodeId: state.value.nodeId,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { VueButton, VueIcon, VueInput, VTooltip as vTooltip } from '@vue/devtools-ui'
import { VueButton, VueIcon, VueInput, vTooltip } from '@vue/devtools-ui'
import { debounce } from 'perfect-debounce'
import { customTypeEnums, toSubmit } from '@vue/devtools-kit'
import { computed, ref, watch, watchEffect } from 'vue'
Expand Down
24 changes: 9 additions & 15 deletions packages/applet/src/components/state/StateFieldViewer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { formatInspectorStateValue, getInspectorStateValueType, getRaw, toEdit,
import { computed, ref, watch } from 'vue'
import { editInspectorState } from '@vue/devtools-core'
import { isArray, isObject, sortByKey } from '@vue/devtools-shared'
import { VueButton, VueIcon, VTooltip as vTooltip } from '@vue/devtools-ui'
import { VueButton, VueIcon, vTooltip } from '@vue/devtools-ui'
import ChildStateViewer from './ChildStateViewer.vue'
import StateFieldEditor from './StateFieldEditor.vue'
import StateFieldInputEditor from './StateFieldInputEditor.vue'
Expand Down Expand Up @@ -45,15 +45,9 @@ const fieldsCount = computed(() => {
else
return 0
})
const normalizedPath = computed(() => props.data.path || [props.data.key])
// normalized display key
const normalizedDisplayedKey = computed(() => {
const key = props.data.key
const lastDotIndex = key.lastIndexOf('.')
if (lastDotIndex === -1)
return key
return key.slice(lastDotIndex + 1)
})
const normalizedDisplayedKey = computed(() => normalizedPath.value[normalizedPath.value.length - 1])
// normalized display value
const normalizedDisplayedValue = computed(() => {
Expand Down Expand Up @@ -90,7 +84,8 @@ const normalizedDisplayedChildren = computed(() => {
if (isArray(value)) {
const sliced = value.slice(0, limit.value)
return sliced.map((item, i) => ({
key: `${props.data.key}.${i}`,
key: i.toString(),
path: [...normalizedPath.value, i.toString()],
value: item,
...inherit,
editable: props.data.editable && !isUneditableType,
Expand All @@ -99,7 +94,8 @@ const normalizedDisplayedChildren = computed(() => {
}
else if (isObject(value)) {
displayedChildren = Object.keys(value).slice(0, limit.value).map(key => ({
key: `${props.data.key}.${key}`,
key,
path: [...normalizedPath.value, key],
value: value[key],
...inherit,
editable: props.data.editable && !isUneditableType,
Expand Down Expand Up @@ -137,7 +133,7 @@ watch(() => editing.value, (v) => {
function submit() {
const data = props.data
editInspectorState({
path: data.key.split('.'),
path: normalizedPath.value,
inspectorId: state.value.inspectorId,
type: data.stateType!,
nodeId,
Expand All @@ -163,10 +159,8 @@ function addNewProp(type: EditorAddNewPropType) {
function submitDrafting() {
const data = props.data
const path = data.key.split('.')
path.push(draftingNewProp.value.key)
editInspectorState({
path,
path: [...normalizedPath.value, draftingNewProp.value.key],
inspectorId: state.value.inspectorId,
type: data.stateType!,
nodeId,
Expand Down
2 changes: 1 addition & 1 deletion packages/applet/src/modules/components/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
} from '@vue/devtools-core'
import { parse } from '@vue/devtools-kit'
import { useElementSize, useToggle, watchDebounced } from '@vueuse/core'
import { VueInput, VTooltip as vTooltip } from '@vue/devtools-ui'
import { VueInput, vTooltip } from '@vue/devtools-ui'
import { sortByKey } from '@vue/devtools-shared'
import { flatten, groupBy } from 'lodash-es'
import ComponentRenderCode from './components/RenderCode.vue'
Expand Down
2 changes: 1 addition & 1 deletion packages/browser-extension/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# Browser extension

> DevTools Browser extension, coming soon...
> DevTools Browser extension, still under development...
2 changes: 1 addition & 1 deletion packages/browser-extension/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,6 @@
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"vue": "^3.4.23"
"vue": "^3.4.26"
}
}
Loading

0 comments on commit e256f95

Please sign in to comment.