From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Thu, 13 May 2021 08:50:24 +0000 (+0200)
Subject: feat(devtools): allow editing stores from components
X-Git-Tag: v2.0.0-alpha.17~13
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b808fbcac9915d11f5979e1781ce125327a0e6ab;p=thirdparty%2Fvuejs%2Fpinia.git

feat(devtools): allow editing stores from components
---

diff --git a/src/devtools/plugin.ts b/src/devtools/plugin.ts
index 2716dc89..7bc527e8 100644
--- a/src/devtools/plugin.ts
+++ b/src/devtools/plugin.ts
@@ -76,7 +76,7 @@ export function addDevtools(app: App, store: Store) {
               payload.instanceData.state.push({
                 type: '🍍 ' + store.$id,
                 key: 'state',
-                editable: false,
+                editable: true,
                 value: store.$state,
               })
 
@@ -161,6 +161,31 @@ export function addDevtools(app: App, store: Store) {
           }
         })
 
+        api.on.editComponentState((payload) => {
+          if (payload.type.startsWith('🍍')) {
+            const storeId = payload.type.replace(/^🍍\s*/, '')
+            const store = registeredStores.get(storeId)
+
+            if (!store) {
+              return toastMessage(`store "${storeId}" not found`, 'error')
+            }
+
+            const { path } = payload
+            if (path[0] !== 'state') {
+              return toastMessage(
+                `Invalid path for store "${storeId}":\n${path}\nOnly state can be modified.`
+              )
+            }
+
+            // rewrite the first entry to be able to directly set the state as
+            // well as any other path
+            path[0] = '$state'
+            isTimelineActive = false
+            payload.set(store, path, payload.state.value)
+            isTimelineActive = true
+          }
+        })
+
         isAlreadyInstalled = true
       } else {
         api.sendInspectorTree(INSPECTOR_ID)