Introduce in-devtools state changes and other improvements

README.md

@@ -69,6 +69,6 @@ Decorator, if the method performs any async operation should be decorated with (
 
 ## Events
 
-* ActionEvent = Action
-* PatchEvent = Patch
+* ActionEvent = some async activities (trigger PatchEvens or SetEvents)
+* PatchEvent = grouped values change
 * SetEvent = directly value change

example/shop.ts

@@ -46,12 +46,16 @@ class Shop {
 	}
 
 	@Action()
-	buy() {
+	async buy() {
 		this.sending = true;
 		this.clearCart();
-		window.setTimeout(() => {
-			this.sending = false;
-		}, 1000);
+
+		return new Promise((res, rej) => {
+			window.setTimeout(() => {
+				this.sending = false;
+				res(true);
+			}, 3000);
+		})
 	}
 }
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "widok",
-	"version": "0.5.2",
+	"version": "0.5.3",
 	"description": "Vue3 simple store",
 	"author": "[email protected]",
 	"license": "MIT",
@@ -36,7 +36,7 @@
 		"build": "vite build && tsc"
 	},
 	"dependencies": {
-		"@vue/devtools-api": "^6.0.0-beta.3"
+		"@vue/devtools-api": "^6.0.0-beta.6"
 	},
 	"peerDependencies": {
 		"vue": "^3.0.0",
@@ -46,7 +46,7 @@
 		"typescript": "^4.1.3",
 		"@types/node": "^14.14.10",
 		"eslint": "^7.14.0",
-		"vite": "^2.0.0-beta.59",
+		"vite": "^2.0.0-beta.61",
 		"vue": "^3.0.5",
 		"@vitejs/plugin-vue": "^1.1.3",
 		"@vue/compiler-sfc": "^3.0.5",

src/Controller.ts

@@ -1,8 +1,7 @@
-import { ActionEvent } from './types/ActionEvent';
-import { PatchEvent } from './types/PatchEvent';
+import { StoreEvent } from './types/StoreEvent';
 import { Subscription } from './utils/Subscription';
 
-export class Controller<T> extends Subscription<ActionEvent | PatchEvent> {
+export class Controller<T> extends Subscription<StoreEvent> {
 	mutating = false;
 	replacing = false;
 	store: T;
@@ -16,10 +15,4 @@ export class Controller<T> extends Subscription<ActionEvent | PatchEvent> {
 	setup(store: T) {
 		this.store = store;
 	}
-
-	replaceState(state: T) {
-		this.replacing = true;
-		Object.assign(this.store, state);
-		this.replacing = false;
-	}
 }

src/types/ActionEvent.ts

@@ -1,8 +1,11 @@
+import { StoreEvent } from './StoreEvent';
 
-export class ActionEvent<T = any> {
-	constructor(
-		public name: string,
-		public payload: T,
-		public type = 'Action',
-	) {}
+export class ActionEvent<T = any> extends StoreEvent<T> {
+	finished = false;
+	type = 'Action'
+
+	end() {
+		this.finished = true;
+		return this;
+	}
 }

src/types/PatchEvent.ts

@@ -1,8 +1,5 @@
+import { StoreEvent } from './StoreEvent';
 
-export class PatchEvent<T = any> {
-	constructor(
-		public name: string,
-		public payload: T,
-		public type = 'Patch',
-	) {}
+export class PatchEvent<T = any> extends StoreEvent<T> {
+	type = 'Patch';
 }

src/types/SetEvent.ts

@@ -1,8 +1,5 @@
+import { StoreEvent } from './StoreEvent';
 
-export class SetEvent<T = any> {
-	constructor(
-		public name: string,
-		public payload: T,
-		public type = 'Set',
-	) {}
+export class SetEvent<T = any> extends StoreEvent<T> {
+	type = 'Set';
 }

src/types/StoreEvent.ts

@@ -0,0 +1,11 @@
+let uuid = 0;
+
+export abstract class StoreEvent<T = any> {
+	constructor(
+		public name: string,
+		public payload: T,
+		public uid: number = uuid++
+	) {}
+
+	abstract type: string;
+}

src/utils/devtools.ts

@@ -2,7 +2,11 @@ import { setupDevtoolsPlugin } from '@vue/devtools-api';
 import { App } from 'vue';
 import { Controller } from '../Controller';
 import { ControllerCollector } from '../ControllerCollector';
+import { ActionEvent } from '../types/ActionEvent';
 import { CreateControllerEvent } from '../types/CreateControllerEvent';
+import { PatchEvent } from '../types/PatchEvent';
+import { SetEvent } from '../types/SetEvent';
+import { StoreEvent } from '../types/StoreEvent';
 
 function formatPayload(payload: any[]) {
 	if (payload.length < 2) {
@@ -11,39 +15,46 @@ function formatPayload(payload: any[]) {
 	return payload;
 }
 
+const stateType = '🌄 Widok';
+
 export function addDevtools(app: App, collector: ControllerCollector) {
 	setupDevtoolsPlugin(
 		{
 			id: 'widok',
 			label: 'Widok',
+			packageName: 'widok',
+			homepage: 'https://github.com/wszerad/widok',
+			componentStateTypes: [
+				stateType
+			],
 			app,
 		},
 		(api) => {
-			api.on.inspectComponent((payload, ctx) => {
-				if (payload.instanceData) {
-					collector.controllers.forEach(controller => {
-						payload.instanceData.state.push({
-							type: '🌄 Widok',
-							key: controller.name,
-							editable: false,
-							value: controller.store,
-						});
-					});
-				}
-			});
+			// api.on.inspectComponent((payload, ctx) => {
+			// 	if (payload.instanceData) {
+			// 		collector.controllers.forEach(controller => {
+			// 			payload.instanceData.state.push({
+			// 				type: stateType,
+			// 				key: controller.name,
+			// 				editable: true,
+			// 				value: controller.store,
+			// 			});
+			// 		});
+			// 	}
+			// });
 
 			const layerId = 'widok:events';
 			const inspectorId = 'widok';
 
 			api.addTimelineLayer({
 				id: layerId,
-				label: `🌄 Widok`,
+				label: stateType,
 				color: 0xe5df88,
 			});
 
 			api.addInspector({
 				id: inspectorId,
-				label: 'Widok',
+				label: stateType,
 				icon: 'terrain',
 				treeFilterPlaceholder: 'Search stores',
 			});
@@ -55,18 +66,20 @@ export function addDevtools(app: App, collector: ControllerCollector) {
 					api.sendInspectorState(inspectorId);
 
 					const payload = formatPayload(event.payload);
+					const finishedAction = event instanceof ActionEvent && event.finished;
+
 					api.addTimelineEvent({
 						layerId: layerId,
 						event: {
+							groupId: event.uid,
 							time: Date.now(),
+							title: withEventTitlePrefix(event),
 							data: {
 								store: controller.name,
-								name: event.name,
 								type: event.type,
-								...(payload !== undefined ? { payload } : {})
-							},
-							// TODO: remove when fixed
-							meta: {},
+								name: event.name,
+								...(!finishedAction && payload !== undefined ? { payload } : {})
+							}
 						},
 					});
 				});
@@ -108,7 +121,7 @@ export function addDevtools(app: App, collector: ControllerCollector) {
 								.map(key => {
 									return {
 										key,
-										editable: false,
+										editable: true,
 										value: controller.store[key]
 									};
 								})
@@ -117,13 +130,30 @@ export function addDevtools(app: App, collector: ControllerCollector) {
 				}
 			});
 
-			// TODO add edit option
-			// api.on.editInspectorState(payload => {
-			// 	console.log(payload);
-			// });
+			api.on.editInspectorState(payload => {
+				if (payload.app === app && payload.inspectorId === inspectorId) {
+					const controller = collector.controllers.get(payload.nodeId);
+
+					if (controller) {
+						payload.set(controller.store, payload.path, payload.state.value);
+					}
+				}
+			});
 
 			// @ts-ignore
 			api.notifyComponentUpdate();
 		}
 	);
 }
+
+function withEventTitlePrefix(event: StoreEvent) {
+	if (event instanceof ActionEvent) {
+		return `${event.finished ? '🟧' : '🟠'} ${event.name}`;
+	}
+	if (event instanceof PatchEvent) {
+		return `🟢 ${event.name}`;
+	}
+	if (event instanceof SetEvent) {
+		return `🟡 ${event.name}`;
+	}
+}

src/utils/prototypeOverwrite.ts

@@ -20,7 +20,15 @@ export function prototypeOverwrite(proto: object, target: object, controller: Co
 					Object.defineProperty(target, key, {
 						value(...payload) {
 							const ret = descriptor.value.call(this, ...payload);
-							controller.next(new ActionEvent(action || key, payload));
+							const event = new ActionEvent(action || key, payload)
+							controller.next(event);
+
+							if (ret instanceof Promise) {
+								ret.finally(() => {
+									controller.next(event.end());
+								});
+							}
+
 							return ret;
 						}
 					});