feat: applet package (#283)

package.json

@@ -44,7 +44,7 @@
  "dev:browser-extension": "turbo dev --filter=./packages/browser-extension",
  "dev:ui-story": "turbo dev --filter=./packages/ui-story",
  "prepare:type": "turbo prepare:type --filter='./packages/*'",
- "dev": "NODE_OPTIONS=\"--max-old-space-size=8192\" nr prepare:type && nr build:ui && turbo stub",
+ "dev": "NODE_OPTIONS=\"--max-old-space-size=8192\" nr prepare:type && nr build:ui && turbo stub --concurrency 20",
  "build": "turbo build",
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
@@ -84,6 +84,7 @@
  "eslint": "npm:[email protected]",
  "eslint-plugin-format": "^0.1.0",
  "eslint-ts-patch": "8.55.0-1",
+ "execa": "^8.0.1",
  "fast-glob": "^3.3.2",
  "fs-extra": "^11.2.0",
  "jsdom": "^24.0.0",

packages/applet/index.d.ts

@@ -0,0 +1 @@
+export * from './src/index'

packages/applet/package.json

@@ -0,0 +1,43 @@
+{
+ "name": "@vue/devtools-applet",
+ "type": "module",
+ "version": "7.0.17",
+ "author": "webfansplz",
+ "license": "MIT",
+ "exports": {
+ ".": {
+ "import": "./dist/index.js",
+ "require": "./dist/index.cjs"
+ },
+ "./style.css": "./dist/index.css"
+ },
+ "main": "./dist/index.cjs",
+ "module": "./dist/index.js",
+ "files": [
+ "**.d.ts",
+ "dist"
+ ],
+ "scripts": {
+ "build": "vite build && pnpm types",
+ "prepare:type": "pnpm types",
+ "stub": "vite build --watch",
+ "types": "vue-tsc --declaration --emitDeclarationOnly -p ./tsconfig.json"
+ },
+ "peerDependencies": {
+ "vue": "^3.0.0"
+ },
+ "dependencies": {
+ "@vue/devtools-core": "workspace:^",
+ "@vue/devtools-kit": "workspace:^",
+ "@vue/devtools-shared": "workspace:^",
+ "@vue/devtools-ui": "workspace:^",
+ "perfect-debounce": "^1.0.0",
+ "splitpanes": "^3.1.5"
+ },
+ "devDependencies": {
+ "unplugin-vue": "^5.0.3",
+ "vue": "^3.4.15",
+ "vue-router": "^4.2.5",
+ "vue-tsc": "^1.8.27"
+ }
+}

packages/applet/src/components/basic/DevToolsHeader.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { useVirtualRouter } from '~/composables/virtual-router'
+
+defineProps<{
+ githubRepoLink: string
+ docLink: string
+}>()
+const router = useVirtualRouter()
+</script>
+
+<template>
+ <div border="b base" class="h10 h40px flex items-center justify-between px-2">
+ <i class="i-ep:back cursor-pointer op70 text-base hover:op100" @click="router.push('/')" />
+ <div>
+ <a class="pr1" :href="docLink" target="_blank">
+ <i class="i-clarity:document-line cursor-pointer op70 text-base hover:op100" />
+ </a>
+ <a :href="githubRepoLink" target="_blank">
+ <i class="i-mdi:github cursor-pointer op70 text-base hover:op100" />
+ </a>
+ </div>
+ </div>
+</template>

packages/applet/src/components/basic/Empty.vue

@@ -0,0 +1,8 @@
+<template>
+ <div class="h-full flex flex-col items-center justify-center op50">
+ <i class="i-lets-icons:blank-light" />
+ <span>
+ <slot />
+ </span>
+ </div>
+</template>

packages/applet/src/components/basic/SelectiveList.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { defineModel } from 'vue'
+
+defineProps<{ data: { id: string, label: string }[] }>()
+
+const selected = defineModel()
+
+function select(id: string) {
+ selected.value = id
+}
+</script>
+
+<template>
+ <ul class="p2">
+ <li
+ v-for="item in data" :key="item.id"
+ class="selectable-item"
+ :class="{ active: item.id === selected }"
+ @click="select(item.id)"
+ >
+ {{ item.label }}
+ </li>
+ </ul>
+</template>

packages/applet/src/components/basic/ToggleExpanded.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+ value: boolean
+}>()
+</script>
+
+<template>
+ <i
+ class="i-radix-icons:triangle-right flex-none text-4 op-50 transition-base"
+ :class="{
+ 'transform rotate-90': value,
+ }"
+ />
+</template>

packages/applet/src/components/state/ChildStateViewer.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { InspectorState } from '@vue/devtools-kit'
+import StateFieldViewer from './StateFieldViewer.vue'
+
+withDefaults(defineProps<{
+ data: InspectorState[]
+ depth: number
+ index: string
+}>(), {
+ depth: 0,
+})
+</script>
+
+<template>
+ <div>
+ <div
+ v-for="(item, i) in data"
+ :key="i"
+ >
+ <StateFieldViewer :data="item" :depth="depth + 1" :index="`${index}-${i}`" />
+ </div>
+ </div>
+</template>

packages/applet/src/components/state/RootStateViewer.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { watchEffect } from 'vue'
+import type { InspectorState } from '@vue/devtools-kit'
+import ChildStateViewer from './ChildStateViewer.vue'
+import ToggleExpanded from '~/components/basic/ToggleExpanded.vue'
+import { useToggleExpanded } from '~/composables/toggle-expanded'
+import { createStateEditorContext } from '~/composables/state-editor'
+
+const props = withDefaults(defineProps<{
+ data: Record<string, InspectorState[]>
+ nodeId: string
+ inspectorId: string
+ disableEdit?: boolean
+}>(), {
+ disableEdit: false,
+})
+
+function initEditorContext() {
+ return {
+ nodeId: props.nodeId,
+ inspectorId: props.inspectorId,
+ disableEdit: props.disableEdit,
+ }
+}
+
+const { context } = createStateEditorContext(initEditorContext())
+watchEffect(() => {
+ context.value = initEditorContext()
+})
+
+const { expanded, toggleExpanded } = useToggleExpanded()
+
+watchEffect(() => {
+ // Expand the root level by default
+ Object.keys(props.data).forEach((_, index) => {
+ if (!expanded.value.includes(`${index}`))
+ toggleExpanded(`${index}`)
+ })
+})
+</script>
+
+<template>
+ <div>
+ <div
+ v-for="(item, key, index) in data"
+ :key="index"
+ >
+ <div
+ class="flex items-center"
+ :class="[item?.length && 'cursor-pointer hover:(bg-active)']"
+ @click="toggleExpanded(`${index}`)"
+ >
+ <ToggleExpanded
+ v-if="item?.length"
+ :value="expanded.includes(`${index}`)"
+ />
+ <!-- placeholder -->
+ <span v-else pl5 />
+ <span font-state-field text-4>
+ {{ key }}
+ </span>
+ </div>
+ <div
+ v-if="item?.length && expanded.includes(`${index}`)"
+ >
+ <ChildStateViewer :data="item" :index="`${index}`" />
+ </div>
+ </div>
+ </div>
+</template>

packages/applet/src/components/state/StateFieldEditor.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { computed, ref, toRaw } from 'vue'
+import { VueButton, VueDropdown, VueDropdownButton, VueIcon, VTooltip as 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'
+import { editInspectorState } from '@vue/devtools-core'
+import { useClipboard } from '@vueuse/core'
+import { useStateEditorContext } from '~/composables/state-editor'
+import type { EditorAddNewPropType, EditorInputValidType } from '~/composables/state-editor'
+
+const props = withDefaults(defineProps<{
+ data: InspectorState
+ hovering: boolean
+ depth: number
+ showAddIfNeeded?: boolean
+ disableEdit?: boolean
+}>(), {
+ showAddIfNeeded: true,
+})
+
+defineEmits<{
+ enableEditInput: [type: EditorInputValidType]
+ addNewProp: [type: EditorAddNewPropType]
+}>()
+
+const state = useStateEditorContext()
+
+const { copy, isSupported } = useClipboard()
+
+const popupVisible = ref(false)
+
+const raw = computed(() => getRaw(props.data.value))
+const rawValue = computed(() => raw.value.value)
+const customType = computed(() => raw.value.customType)
+const dataType = computed(() => rawValue.value === null ? 'null' : typeof rawValue.value)
+
+const iconButtonProps = {
+ flat: true,
+ size: 'mini',
+} satisfies ButtonProps
+
+const buttonClass = computed(() => ({
+ 'opacity-0': !props.hovering,
+}))
+
+function quickEdit(v: unknown, remove: boolean = false) {
+ editInspectorState({
+ path: props.data.key.split('.'),
+ inspectorId: state.value.inspectorId,
+ type: props.data.stateType!,
+ nodeId: state.value.nodeId,
+ state: {
+ newKey: null!,
+ value: toRaw(v),
+ type: dataType.value,
+ remove,
+ },
+ } satisfies InspectorStateEditorPayload)
+}
+
+function quickEditNum(v: number | string, offset: 1 | -1) {
+ const target = typeof v === 'number'
+ ? v + offset
+ : BigInt(v) + BigInt(offset)
+ quickEdit(target)
+}
+</script>
+
+<template>
+ <div class="inline pl5px">
+ <!-- only editable will show operate actions -->
+ <template v-if="!props.disableEdit && data.editable">
+ <!-- input edit, number/string/object -->
+ <template v-if="dataType === 'string' || dataType === 'number' || dataType === 'object' || dataType === 'null'">
+ <VueButton
+ v-tooltip="{
+ content: 'Edit value',
+ }" v-bind="iconButtonProps" :class="buttonClass" @click.stop="$emit('enableEditInput', dataType)"
+ >
+ <template #icon>
+ <VueIcon icon="i-material-symbols-edit-rounded" />
+ </template>
+ </VueButton>
+ <VueButton
+ v-if="dataType === 'object' && showAddIfNeeded"
+ v-tooltip="{
+ content: 'Add new value',
+ }" v-bind="iconButtonProps" :class="buttonClass" @click.stop="
+ $emit('addNewProp', Array.isArray(rawValue) ? 'array' : 'object')"
+ >
+ <template #icon>
+ <VueIcon icon="i-material-symbols-add-circle-rounded" />
+ </template>
+ </VueButton>
+ </template>
+ <!-- checkbox, button value only -->
+ <VueButton
+ v-if="dataType === 'boolean'" v-bind="iconButtonProps" :class="buttonClass"
+ @click="quickEdit(!rawValue)"
+ >
+ <template #icon>
+ <VueIcon :icon="rawValue ? 'i-material-symbols-check-box-sharp' : 'i-material-symbols-check-box-outline-blank-sharp'" />
+ </template>
+ </VueButton>
+ <!-- increment/decrement button, numeric/bigint -->
+ <template v-else-if="dataType === 'number' || customType === 'bigint'">
+ <VueButton v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEditNum(rawValue as number | string, 1)">
+ <template #icon>
+ <VueIcon icon="i-carbon-add" />
+ </template>
+ </VueButton>
+ <VueButton v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEditNum(rawValue as number | string, -1)">
+ <template #icon>
+ <VueIcon icon="i-carbon-subtract" />
+ </template>
+ </VueButton>
+ </template>
+ </template>
+ <!-- delete prop, only appear if depth > 0 -->
+ <VueButton v-if="!props.disableEdit && depth > 0" v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEdit(rawValue, true)">
+ <template #icon>
+ <VueIcon icon="i-material-symbols-delete-rounded" />
+ </template>
+ </VueButton>
+ <!-- Copy key/value -->
+ <VueDropdown
+ :class="{
+ 'opacity-0': !hovering && !popupVisible,
+ }"
+ :button-props="{
+ flat: true,
+ size: 'mini',
+ }"
+ :disabled="!isSupported"
+ @update:visible="v => popupVisible = v"
+ >
+ <template #popper>
+ <div class="w160px py5px">
+ <VueDropdownButton
+ @click="copy(typeof rawValue === 'object' ? JSON.stringify(rawValue) : rawValue.toString())"
+ >
+ <template #icon>
+ <VueIcon icon="i-material-symbols-copy-all-rounded" class="mt4px" />
+ Copy Value
+ </template>
+ </VueDropdownButton>
+ <VueDropdownButton
+ @click="() => {
+ copy(data.key)
+ }"
+ >
+ <template #icon>
+ <VueIcon icon="i-material-symbols-copy-all-rounded" class="mt4px" />
+ Copy Path
+ </template>
+ </VueDropdownButton>
+ </div>
+ </template>
+ <template #button-icon>
+ <VueIcon icon="i-material-symbols:more-vert" />
+ </template>
+ </VueDropdown>
+ </div>
+</template>