feat(devtools): allow editing stores from components

diff --git a/src/devtools/plugin.ts b/src/devtools/plugin.ts
index 2716dc89bb03816ee0feb43088fab2c7364f31f2..7bc527e85c3453117aa29e3b8d14e8bf2f5a1313 100644 (file)
--- 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)