From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 10 Mar 2021 22:17:56 +0000 (+0100)
Subject: feat(devtools): logo and titles
X-Git-Tag: v2.0.0-alpha.8~35
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=0963fd0b647b0e5414782f78167c770cbab24a83;p=thirdparty%2Fvuejs%2Fpinia.git

feat(devtools): logo and titles
---

diff --git a/src/devtools.ts b/src/devtools.ts
index fe2d0970..2e4dc603 100644
--- a/src/devtools.ts
+++ b/src/devtools.ts
@@ -37,27 +37,22 @@ function toastMessage(
 }
 
 let isAlreadyInstalled: boolean | undefined
+const componentStateTypes: string[] = []
 
 export function addDevtools(app: App, store: GenericStore) {
   registeredStores.add(store)
+  componentStateTypes.push('🍍 ' + store.$id)
   setupDevtoolsPlugin(
     {
-      id: 'pinia',
+      id: 'dev.esm.pinia',
       label: 'Pinia 🍍',
+      logo: 'https://pinia.esm.dev/logo.svg',
+      packageName: 'pinia',
+      homepage: 'https://pinia.esm.dev',
+      componentStateTypes,
       app,
     },
     (api) => {
-      api.on.inspectComponent((payload, ctx) => {
-        if (payload.instanceData) {
-          payload.instanceData.state.push({
-            type: '🍍 ' + store.$id,
-            key: 'state',
-            editable: false,
-            value: store.$state,
-          })
-        }
-      })
-
       // watch(router.currentRoute, () => {
       //   // @ts-ignore
       //   api.notifyComponentUpdate()
@@ -67,6 +62,17 @@ export function addDevtools(app: App, store: GenericStore) {
       const piniaInspectorId = 'pinia'
 
       if (!isAlreadyInstalled) {
+        api.on.inspectComponent((payload, ctx) => {
+          if (payload.instanceData) {
+            payload.instanceData.state.push({
+              type: '🍍 ' + store.$id,
+              key: 'state',
+              editable: false,
+              value: store.$state,
+            })
+          }
+        })
+
         api.addTimelineLayer({
           id: mutationsLayerId,
           label: `Pinia 🍍`,
@@ -82,7 +88,6 @@ export function addDevtools(app: App, store: GenericStore) {
 
         isAlreadyInstalled = true
       } else {
-        // @ts-ignore
         api.notifyComponentUpdate()
         api.sendInspectorTree(piniaInspectorId)
         api.sendInspectorState(piniaInspectorId)
@@ -92,14 +97,13 @@ export function addDevtools(app: App, store: GenericStore) {
         // rootStore.state[store.id] = state
         const data: Record<string, any> = {
           store: formatDisplay(mutation.storeName),
-          type: formatDisplay(mutation.type),
+          // type: formatDisplay(mutation.type),
         }
 
         if (mutation.payload) {
           data.payload = mutation.payload
         }
 
-        // @ts-ignore
         api.notifyComponentUpdate()
         api.sendInspectorState(piniaInspectorId)
 
@@ -107,6 +111,7 @@ export function addDevtools(app: App, store: GenericStore) {
           layerId: mutationsLayerId,
           event: {
             time: Date.now(),
+            title: mutation.type,
             data,
           },
         })