refactor: upgrade vue-devtools

Author: posva

packages/pinia/package.json

@@ -73,7 +73,7 @@
     "@vue/test-utils": "^2.4.6"
   },
   "dependencies": {
-    "@vue/devtools-api": "^6.6.3"
+    "@vue/devtools-api": "^7.7.1"
   },
   "peerDependencies": {
     "typescript": ">=4.4.4",

packages/pinia/src/devtools/formatting.ts

@@ -1,13 +1,88 @@
-import {
-  ComponentCustomState,
-  CustomInspectorNode,
-  CustomInspectorState,
-} from '@vue/devtools-api'
 import { MutationType, StoreGeneric } from '../types'
 import { DebuggerEvent } from 'vue'
 import { Pinia } from '../rootStore'
 import { isPinia } from './utils'
 
+// types from devtools-api
+interface StateBase {
+  key: string
+  value: any
+  editable?: boolean
+  objectType?: 'ref' | 'reactive' | 'computed' | 'other'
+  raw?: string
+}
+interface ComponentStateBase extends StateBase {
+  type: string
+}
+type ComponentBuiltinCustomStateTypes =
+  | 'function'
+  | 'map'
+  | 'set'
+  | 'reference'
+  | 'component'
+  | 'component-definition'
+  | 'router'
+  | 'store'
+interface CustomState {
+  _custom: {
+    type: ComponentBuiltinCustomStateTypes | string
+    objectType?: string
+    display?: string
+    tooltip?: string
+    value?: any
+    abstract?: boolean
+    file?: string
+    uid?: number
+    readOnly?: boolean
+    /** Configure immediate child fields */
+    fields?: {
+      abstract?: boolean
+    }
+    id?: any
+    actions?: {
+      icon: string
+      tooltip?: string
+      action: () => void | Promise<void>
+    }[]
+    /** internal */
+    _reviveId?: number
+  }
+}
+interface ComponentPropState extends ComponentStateBase {
+  meta?: {
+    type: string
+    required: boolean
+    /** Vue 1 only */
+    mode?: 'default' | 'sync' | 'once'
+  }
+}
+type ComponentState =
+  | ComponentStateBase
+  | ComponentPropState
+  | ComponentCustomState
+interface ComponentCustomState extends ComponentStateBase {
+  value: CustomState
+}
+
+interface InspectorNodeTag {
+  label: string
+  textColor: number
+  backgroundColor: number
+  tooltip?: string
+}
+interface CustomInspectorNode {
+  id: string
+  label: string
+  children?: CustomInspectorNode[]
+  tags?: InspectorNodeTag[]
+  name?: string
+  file?: string
+}
+
+interface CustomInspectorState {
+  [key: string]: (StateBase | Omit<ComponentState, 'type'>)[]
+}
+
 export function formatDisplay(display: string) {
   return {
     _custom: {

packages/pinia/src/devtools/plugin.ts

@@ -1,9 +1,5 @@
-import {
-  setupDevtoolsPlugin,
-  TimelineEvent,
-  App as DevtoolsApp,
-} from '@vue/devtools-api'
-import { ComponentPublicInstance, markRaw, toRaw, unref, watch } from 'vue'
+import { setupDevtoolsPlugin } from '@vue/devtools-api'
+import { App, ComponentPublicInstance, markRaw, toRaw, unref, watch } from 'vue'
 import { Pinia, PiniaPluginContext } from '../rootStore'
 import {
   _GettersTree,
@@ -37,6 +33,17 @@ const MUTATIONS_LAYER_ID = 'pinia:mutations'
 const INSPECTOR_ID = 'pinia'
 const { assign } = Object
 
+// copied from devtools
+interface TimelineEvent<TData = any, TMeta = any> {
+  time: number
+  data: TData
+  logType?: 'default' | 'warning' | 'error'
+  meta?: TMeta
+  groupId?: number | string
+  title?: string
+  subtitle?: string
+}
+
 /**
  * Gets the displayed name of a store in devtools
  *
@@ -52,7 +59,7 @@ const getStoreType = (id: string) => '🍍 ' + id
  * @param app - Vue application
  * @param pinia - pinia instance
  */
-export function registerPiniaDevtools(app: DevtoolsApp, pinia: Pinia) {
+export function registerPiniaDevtools(app: App, pinia: Pinia) {
   setupDevtoolsPlugin(
     {
       id: 'dev.esm.pinia',
@@ -140,7 +147,7 @@ export function registerPiniaDevtools(app: DevtoolsApp, pinia: Pinia) {
         ],
       })
 
-      api.on.inspectComponent((payload, ctx) => {
+      api.on.inspectComponent((payload) => {
         const proxy = (payload.componentInstance &&
           payload.componentInstance.proxy) as
           | ComponentPublicInstance
@@ -241,7 +248,7 @@ export function registerPiniaDevtools(app: DevtoolsApp, pinia: Pinia) {
         }
       })
 
-      api.on.editInspectorState((payload, ctx) => {
+      api.on.editInspectorState((payload) => {
         if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
           const inspectedStore =
             payload.nodeId === PINIA_ROOT_ID
@@ -301,7 +308,7 @@ export function registerPiniaDevtools(app: DevtoolsApp, pinia: Pinia) {
   )
 }
 
-function addStoreToDevtools(app: DevtoolsApp, store: StoreGeneric) {
+function addStoreToDevtools(app: App, store: StoreGeneric) {
   if (!componentStateTypes.includes(getStoreType(store.$id))) {
     componentStateTypes.push(getStoreType(store.$id))
   }

packages/playground/package.json

@@ -9,7 +9,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
-    "vite": "^6.0.11"
+    "vite": "^6.0.11",
+    "vite-plugin-vue-devtools": "^7.7.1"
   },
   "dependencies": {
     "@vueuse/core": "^12.5.0",

packages/playground/vite.config.ts

@@ -1,11 +1,12 @@
 import { defineConfig, Plugin } from 'vite'
 import Vue from '@vitejs/plugin-vue'
-import { promises as fs } from 'fs'
-import path from 'path'
+import fs from 'node:fs/promises'
+import { fileURLToPath, URL } from 'node:url'
+import VueDevtools from 'vite-plugin-vue-devtools'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [Vue(), copyPiniaPlugin()],
+  plugins: [Vue(), copyPiniaPlugin(), VueDevtools()],
   define: {
     __DEV__: 'true',
     // __BROWSER__: 'true',
@@ -14,8 +15,7 @@ export default defineConfig({
   resolve: {
     dedupe: ['vue', 'pinia'],
     alias: {
-      // FIXME: use fileToUrl
-      pinia: path.resolve(__dirname, '../pinia/src/index.ts'),
+      pinia: fileURLToPath(new URL('../pinia/src/index.ts', import.meta.url)),
     },
   },
   optimizeDeps: {
@@ -27,7 +27,9 @@ function copyPiniaPlugin(): Plugin {
   return {
     name: 'copy-pinia',
     async generateBundle() {
-      const filePath = path.resolve(__dirname, '../pinia/dist/pinia.mjs')
+      const filePath = fileURLToPath(
+        new URL('../pinia/dist/pinia.mjs', import.meta.url)
+      )
 
       // throws if file doesn't exist
       await fs.access(filePath)