chore: update

Author: webfansplz

docs/package.json

@@ -8,10 +8,10 @@
     "docs:preview": "vitepress preview"
   },
   "devDependencies": {
-    "@unocss/reset": "^0.60.3",
-    "@vueuse/core": "^10.9.0",
+    "@unocss/reset": "^0.60.4",
+    "@vueuse/core": "^10.10.0",
     "unplugin-vue-components": "^0.27.0",
-    "vitepress": "1.2.2",
+    "vitepress": "1.2.3",
     "vue": "^3.4.27"
   }
 }

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "7.2.1",
   "private": true,
-  "packageManager": "[email protected].3",
+  "packageManager": "[email protected].4",
   "description": "DevTools for Vue.js",
   "author": "webfansplz",
   "license": "MIT",
@@ -31,6 +31,7 @@
     "stub:applet": "turbo stub --filter=./packages/applet",
     "stub:vite": "turbo stub --filter=./packages/vite",
     "stub:devtools-api": "turbo stub --filter=./packages/devtools-api...",
+    "build:applet": "turbo build --filter=./packages/applet...",
     "build:shared": "turbo build --filter=./packages/shared...",
     "build:core": "turbo build --filter=./packages/core...",
     "build:devtools-kit": "turbo build --filter=./packages/devtools-kit...",
@@ -61,20 +62,21 @@
     "play:ui": "turbo dev --filter=./packages/playground/ui",
     "play:multi-app": "turbo dev --filter=./packages/playground/multi-app",
     "play:webpack": "turbo dev --filter=./packages/playground/webpack",
+    "play:options-api": "turbo dev --filter=./packages/playground/options-api",
     "docs": "pnpm -C docs run docs:dev",
     "docs:build": "pnpm -C docs run docs:build",
     "zip": "tsx ./scripts/extension-zip.ts",
     "gen:vue-apis": "tsx ./scripts/vue-api-manifest.ts"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.19.0",
+    "@antfu/eslint-config": "2.20.0",
     "@antfu/ni": "^0.21.12",
     "@arethetypeswrong/cli": "^0.15.3",
     "@types/chrome": "^0.0.268",
     "@types/degit": "^2.8.6",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.12.12",
-    "@unocss/eslint-plugin": "^0.60.3",
+    "@types/node": "^20.14.2",
+    "@unocss/eslint-plugin": "^0.60.4",
     "@vue/devtools-core": "workspace:^",
     "@vue/devtools-kit": "workspace:^",
     "@vue/test-utils": "^2.4.6",
@@ -91,20 +93,20 @@
     "jsdom": "^24.1.0",
     "lint-staged": "^15.2.5",
     "npm-run-all2": "^6.2.0",
-    "pnpm": "^9.1.3",
+    "pnpm": "^9.1.4",
     "progress": "^2.0.3",
     "publint": "^0.2.8",
     "readdir-glob": "^2.0.0",
     "regex-extra": "^0.2.2",
     "simple-git-hooks": "^2.11.1",
     "taze": "^0.13.8",
-    "tsup": "^8.0.2",
-    "tsx": "^4.11.0",
-    "turbo": "^1.13.3",
+    "tsup": "^8.1.0",
+    "tsx": "^4.11.2",
+    "turbo": "^2.0.1",
     "typescript": "^5.4.5",
     "unbuild": "^2.0.0",
-    "unocss": "^0.60.3",
-    "vite": "^5.2.11",
+    "unocss": "^0.60.4",
+    "vite": "^5.2.12",
     "vitest": "^1.6.0",
     "vue": "^3.4.27"
   },

packages/applet/package.json

@@ -30,7 +30,7 @@
     "@vue/devtools-ui": "workspace:^",
     "lodash-es": "^4.17.21",
     "perfect-debounce": "^1.0.0",
-    "shiki": "1.6.0",
+    "shiki": "1.6.2",
     "splitpanes": "^3.1.5",
     "vue-virtual-scroller": "2.0.0-beta.8"
   },

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

@@ -23,7 +23,11 @@ const props = defineProps<{
 const STATE_FIELDS_LIMIT_SIZE = 30
 const limit = ref(STATE_FIELDS_LIMIT_SIZE)
 // display value
-const displayedValue = computed(() => formatInspectorStateValue(props.data.value))
+const displayedValue = computed(() => formatInspectorStateValue(props.data.value, false, {
+  customClass: {
+    string: 'max-w-120 truncate',
+  },
+}))
 const type = computed(() => getInspectorStateValueType(props.data.value))
 const raw = computed(() => getRaw(props.data.value))
 const { expanded, toggleExpanded } = useToggleExpanded()
@@ -137,7 +141,7 @@ function submit() {
     path: normalizedPath.value,
     inspectorId: state.value.inspectorId,
     type: data.stateType!,
-    nodeId,
+    nodeId: nodeId.value,
     state: {
       newKey: null!,
       type: editingType.value,
@@ -164,7 +168,7 @@ function submitDrafting() {
     path: [...normalizedPath.value, draftingNewProp.value.key],
     inspectorId: state.value.inspectorId,
     type: data.stateType!,
-    nodeId,
+    nodeId: nodeId.value,
     state: {
       newKey: draftingNewProp.value.key,
       type: typeof toSubmit(draftingNewProp.value.value),

packages/applet/src/composables/state-editor.ts

@@ -1,5 +1,5 @@
 import type { InjectionKey, Ref } from 'vue'
-import { inject, provide, ref } from 'vue'
+import { computed, inject, provide, ref } from 'vue'
 
 interface StateEditorContext {
   nodeId: string
@@ -40,7 +40,7 @@ export function useStateEditor() {
       editing.value = !editing.value
     },
     editingType,
-    nodeId: state.value.nodeId,
+    nodeId: computed(() => state.value.nodeId),
   }
 }
 

packages/applet/src/modules/components/components/RenderCode.vue

@@ -13,7 +13,7 @@ function close() {
 </script>
 
 <template>
-  <div class="absolute left-0 top-0 h-full w-full flex flex-col bg-white p2 dark:bg-[#121212]">
+  <div class="absolute left-0 top-0 h-full w-full flex flex-col rounded-br-2.5 rounded-tr-2.5 bg-white p2 dark:bg-[#121212]">
     <div class="h-12 w-full flex items-center justify-between py-2">
       <span class="font-500">Render Code</span>
       <i class="i-carbon-close cursor-pointer hover:op80" @click="close" />

packages/applet/src/modules/components/index.vue

@@ -37,6 +37,7 @@ const [filtered, toggleFiltered] = useToggle(true)
 const componentTreeLoaded = ref(false)
 const inspectComponentTipVisible = ref(false)
 const componentRenderCode = ref('')
+const componentRenderCodeVisible = ref(false)
 
 // tree
 function dfs(node: { id: string, children?: { id: string }[] }, path: string[] = [], linkedList: string[][] = []) {
@@ -147,6 +148,9 @@ function getComponentState(id: string) {
 
 watch(activeComponentId, (id) => {
   getComponentState(id)
+  if (componentRenderCodeVisible.value) {
+    getComponentRenderCode()
+  }
 })
 
 onInspectorStateUpdated((data) => {
@@ -206,6 +210,7 @@ function scrollToComponent() {
 function getComponentRenderCode() {
   getComponentRenderCodeAction(activeComponentId.value).then((data) => {
     componentRenderCode.value = data!
+    componentRenderCodeVisible.value = true
   })
 }
 
@@ -220,12 +225,17 @@ function scrollToActiveTreeNode() {
     selected?.scrollIntoView({ behavior: 'smooth', block: 'center' })
   }, 300)
 }
+
+function closeComponentRenderCode() {
+  componentRenderCode.value = ''
+  componentRenderCodeVisible.value = false
+}
 </script>
 
 <template>
   <div class="h-full w-full">
     <Splitpanes ref="splitpanesRef" class="flex-1 overflow-auto" :horizontal="horizontal" @ready="splitpanesReady = true">
-      <Pane border="r base" h-full>
+      <Pane border="base" h-full>
         <div v-if="componentTreeLoaded" class="h-full flex flex-col p2">
           <div class="flex py2">
             <VueInput v-model="filterComponentName" :loading-debounce-time="250" :loading="!filtered" placeholder="Find components..." flex-1 />
@@ -265,7 +275,7 @@ function scrollToActiveTreeNode() {
           </div>
           <RootStateViewer class="no-scrollbar flex-1 select-none overflow-scroll" :data="filteredState" :node-id="activeComponentId" :inspector-id="inspectorId" expanded-state-id="component-state" />
         </div>
-        <ComponentRenderCode v-if="componentRenderCode" :code="componentRenderCode" @close="componentRenderCode = ''" />
+        <ComponentRenderCode v-if="componentRenderCodeVisible && componentRenderCode" :code="componentRenderCode" @close="closeComponentRenderCode" />
       </Pane>
     </Splitpanes>
 

packages/browser-extension/package.json

@@ -17,7 +17,7 @@
     "@vue/devtools-shared": "workspace:^"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^5.0.5",
     "vue": "^3.4.27"
   }
 }

packages/client/package.json

@@ -24,44 +24,44 @@
     "vite": "^3.1.0 || ^4.0.0-0 || ^5.0.0-0"
   },
   "dependencies": {
-    "@unocss/preset-icons": "^0.60.3",
-    "@unocss/runtime": "^0.60.3",
+    "@unocss/preset-icons": "^0.60.4",
+    "@unocss/runtime": "^0.60.4",
     "@vue/devtools-applet": "workspace:^",
     "@vue/devtools-core": "workspace:^",
     "@vue/devtools-kit": "workspace:^",
     "@vue/devtools-shared": "workspace:^",
     "@vue/devtools-ui": "workspace:*",
-    "@vueuse/core": "^10.9.0",
-    "@vueuse/integrations": "^10.9.0",
+    "@vueuse/core": "^10.10.0",
+    "@vueuse/integrations": "^10.10.0",
     "colord": "^2.9.3",
     "fuse.js": "^7.0.0",
     "minimatch": "^9.0.4",
-    "shiki": "1.6.0",
+    "shiki": "1.6.2",
     "splitpanes": "^3.1.5",
     "vis-network": "^9.1.9",
     "vite-hot-client": "^0.2.3",
     "vue-router": "^4.3.2",
     "vue-virtual-scroller": "2.0.0-beta.8"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.214",
-    "@types/node": "^20.12.12",
+    "@iconify/json": "^2.2.216",
+    "@types/node": "^20.14.2",
     "@types/splitpanes": "^2.2.6",
-    "@unocss/core": "^0.60.3",
-    "@unocss/reset": "^0.60.3",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@unocss/core": "^0.60.4",
+    "@unocss/reset": "^0.60.4",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
     "dayjs": "^1.11.11",
     "floating-vue": "5.2.2",
     "ohash": "^1.1.3",
     "pinia": "^2.1.7",
-    "sass": "^1.77.2",
+    "sass": "^1.77.4",
     "simple-git-hooks": "^2.11.1",
-    "unocss": "^0.60.3",
+    "unocss": "^0.60.4",
     "unplugin": "^1.10.1",
     "unplugin-auto-import": "^0.17.6",
     "unplugin-vue-components": "^0.27.0",
-    "vite": "^5.2.11",
+    "vite": "^5.2.12",
     "vue": "^3.4.27"
   }
 }

packages/devtools-kit/__tests__/component/format.test.ts

@@ -124,3 +124,16 @@ describe('format: toSubmit', () => {
     expect(serialized).toStrictEqual(value.target)
   })
 })
+
+describe('format: customClass', () => {
+  it.each([
+    { value: 'string-value', target: '<span class="custom-class">string-value</span>' },
+  ])('value: $value should be serialized to target with custom class', (value) => {
+    const serialized = format.formatInspectorStateValue(value.value, false, {
+      customClass: {
+        string: 'custom-class',
+      },
+    })
+    expect(serialized).toStrictEqual(value.target)
+  })
+})