Lots of changes...

- Implement event bus on the StoreManager level & store
   - Replace "hooks" with the event bus
   - Added @on decorator for stores, so we can define listeners for stores nicely
- Testability
   - Implemented a bunch of stuff to make stores properly testable
   - When testing, test modules will be transformed before-hand(kind of a hacky solution for now) so we can use meta
- More work on store scopes
   - During tests, scoping is ended correctly, needs more work/thinking about how to handle it during regular usage

Author: iDevelopThings

.gitignore

@@ -4,3 +4,4 @@
 /dist/
 /docs/node_modules/
 /docs/docs/.vitepress/dist/
+/.vitest-result.json

build.js

@@ -8,13 +8,16 @@ import dts                   from 'vite-plugin-dts';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
+/**
+ * @type {import('vite').UserConfig}
+ */
 const commonConfig = {
 	plugins : [
 		/*dts({
 		 tsConfigFilePath : "./tsconfig.json",
 		 insertTypesEntry : true,
 		 }),*/
-//		vue(),
+		vue(),
 	],
 	resolve : {
 		alias : {
@@ -32,15 +35,25 @@ const commonConfig = {
 				"typescript",
 				"fs-jetpack",
 				'path',
+				'@vue/devtools-api',
+				'@vue/compat',
+				'@vue/compiler-dom',
+				'@vue/compiler-sfc',
+				'@vue/runtime-core',
 			],
 			output   : {
-				globals : {
-					vue               : 'Vue',
-					klona             : 'klona',
-					'typescript'      : "ts",
-					'fs-jetpack'      : "jetpack",
-					'path'            : 'path',
-				},
+				/*globals : {
+					'@vue/devtools-api' : 'vue_devtools_api',
+					'@vue/compat'       : 'vue_compat',
+					'@vue/compiler-dom' : 'vue_compiler_dom',
+					'@vue/compiler-sfc' : 'vue_compiler_sfc',
+					'@vue/runtime-core' : 'vue_runtime_core',
+					'vue'               : 'Vue',
+					'klona'             : 'klona',
+					'typescript'        : "ts",
+					'fs-jetpack'        : "jetpack",
+					'path'              : 'path',
+				},*/
 			},
 		},
 	},
@@ -88,6 +101,9 @@ const libConfigs = {
 function forLib(key) {
 	const config = {...commonConfig};
 
+	if (config.plugins?.length) {
+		config.plugins = config.plugins.concat(libConfigs[key].plugins ?? []);
+	}
 	config.root         = __dirname;
 	config.build.lib    = libConfigs[key].lib;
 	config.build.outDir = libConfigs[key].outDir;
@@ -104,9 +120,9 @@ for (let lib in libConfigs) {
 	console.log('Done with', lib);
 }
 
-execSync(`tsc --declaration --emitDeclarationOnly --project ./tsconfig.lib.json`);
-execSync(`tsc --declaration --project ./tsconfig.vite-plugin.json`);
-execSync(`cp src/VitePlugin/package.json dist/VitePlugin/package.json`);
+execSync(`yarn run tsc:types:lib`, {stdio : 'inherit'});
+execSync(`yarn run tsc:types:vite-pkg`, {stdio : 'inherit'});
+execSync(`cp src/VitePlugin/package.json dist/VitePlugin/package.json`, {stdio : 'inherit'});
 
 fs.writeFileSync('./dist/index.d.ts', `\n
 export * from './Lib';

package.json

@@ -30,7 +30,10 @@
     "build": "tsc && vite build",
     "dist": "node build.js",
     "preview": "vite preview",
-    "test": "vitest run --no-threads"
+    "test": "vitest run --no-threads",
+    "webstorm-integration": "vitest --watch --reporter=dot --reporter=json --outputFile=.vitest-result.json",
+    "tsc:types:lib": "tsc --declaration --emitDeclarationOnly --project ./tsconfig.lib.json",
+    "tsc:types:vite-pkg": "tsc --declaration --project ./tsconfig.vite-plugin.json"
   },
   "license": "MIT",
   "sideEffects": false,
@@ -84,17 +87,19 @@
   ],
   "dependencies": {
     "@idevelopthings/reflect-extensions": "^0.0.3",
+    "@rollup/plugin-typescript": "^9.0.1",
+    "@rollup/pluginutils": "^5.0.1",
     "@vue/devtools-api": "^6.4.4",
     "fs-jetpack": "^5.0.0",
     "klona": "^2.0.5",
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
     "lodash.throttle": "^4.1.1",
     "lodash.uniq": "^4.5.0",
-    "vue": "^3.2.40",
-    "@rollup/pluginutils": "^5.0.1"
+    "vue": "^3.2.40"
   },
   "devDependencies": {
+    "@types/estree": "^1.0.0",
     "@types/lodash.get": "^4.4.7",
     "@types/lodash.set": "^4.3.7",
     "@types/lodash.throttle": "^4.1.7",

src/Common/LifeCycle.ts

@@ -1,5 +1,3 @@
-//export const LifeCycleEvents = ['BeforeAll', 'OnInit', 'OnDispose', 'AfterAll'];
-
 export enum LifeCycleEvent {
 	BeforeAll = 'BeforeAll',
 	OnInit    = 'OnInit',
@@ -10,3 +8,17 @@ export enum LifeCycleEvent {
 export function isLifeCycleEvent(name: string): boolean {
 	return Object.values(LifeCycleEvent).includes(name as LifeCycleEvent);
 }
+
+export function lifeCycleEventName<T extends LifeCycleEvent>(name: T): `@${T}` {
+	return `@${name}`;
+}
+
+export type LifeCycleEventsMap =
+	| { [K in LifeCycleEvent as `@${K}`]: { store: any } };
+
+export type StoreLifeCycleEventsMap =
+	| { [K in LifeCycleEvent as `${string}.@${K}`]: { store: any } };
+
+export interface LifeCycleEvents extends LifeCycleEventsMap, StoreLifeCycleEventsMap {
+}
+

src/DevTools/DevTools.ts

@@ -320,6 +320,8 @@ export class DevtoolsInstance {
 	}
 
 	public actionSetup(action: StoreAction<any, any>): void {
+		if (!this.api) return;
+
 		this.currentAction = action;
 		const id           = this.currentGroupId++;
 

src/Lib/Decorators.ts

@@ -0,0 +1,38 @@
+/**
+ * This decorator is used to mark a Store as a store used in a test file
+ */
+export const TestStore = (target: { new(...args): any }) => {};
+
+/**
+ * Marks a getter as computed
+ */
+export const Computed = (target: any, propertyKey: string) => {};
+
+/**
+ * Marks an action as an event handler for this event
+ */
+export const BeforeAll = (target: any, propertyKey: string) => {};
+
+/**
+ * Marks an action as an event handler for this event
+ */
+export const OnInit    = (target: any, propertyKey: string) => {};
+
+/**
+ * Marks an action as an event handler for this event
+ */
+export const OnDispose = (target: any, propertyKey: string) => {};
+
+/**
+ * Marks an action as an event handler for this event
+ */
+export const AfterAll  = (target: any, propertyKey: string) => {};
+
+/**
+ * Marks an action as an event handler for the specified event
+ */
+export const On = (eventName: string) => {
+	return (target: any, propertyKey: string) => {
+
+	}
+};

src/Lib/EventBus/EventBus.ts

@@ -0,0 +1,91 @@
+// An event handler can take an optional event argument
+// and should not return a value
+export type Handler<T = unknown> = (event: T) => void;
+
+// An array of all currently registered event handlers for a type
+export type EventHandlerList<T = unknown> = Array<Handler<T>>;
+//export type WildCardEventHandlerList<T = { [key: string]: any }> = Array<WildcardHandler<T>>;
+
+// A map of event types and their corresponding event handlers.
+export type EventHandlerMap<Events extends { [key: string]: any }> = Map<keyof Events, EventHandlerList<Events[keyof Events]>>;
+
+export interface Emitter<Events extends { [key: string]: any }> {
+	all: EventHandlerMap<Events>;
+
+	on<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]>): void;
+
+	off<Key extends keyof Events>(type: Key, handler?: Handler<Events[Key]>): void;
+
+	emit<Key extends keyof Events>(type: Key, event?: Events[Key]): void;
+
+}
+
+/**
+ * Credits to mit
+ */
+export default function eventBus<Events extends { [key: string]: any }>(
+	all?: EventHandlerMap<Events>
+): Emitter<Events> {
+
+	all = all || new Map();
+
+	return {
+
+		/**
+		 * A Map of event names to registered handler functions.
+		 */
+		all,
+
+		/**
+		 * Register an event handler for the given type.
+		 * @param {string|symbol} type Type of event to listen for
+		 * @param {Function} handler Function to call in response to given event
+		 */
+		on<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]>) {
+			const handlers: Array<Handler<Events[Key]>> | undefined = all!.get(type);
+			if (handlers) {
+				handlers.push(handler);
+			} else {
+				all!.set(type, [handler] as EventHandlerList<Events[keyof Events]>);
+			}
+		},
+
+		/**
+		 * Remove an event handler for the given type.
+		 * If `handler` is omitted, all handlers of the given type are removed.
+		 * @param {string|symbol} type Type of event to unregister `handler` from
+		 * @param {Function} [handler] Handler function to remove
+		 */
+		off<Key extends keyof Events>(type: Key, handler?: Handler<Events[Key]>) {
+			const handlers: Array<Handler<Events[Key]>> | undefined = all!.get(type);
+			if (handlers) {
+				if (handler) {
+					handlers.splice(handlers.indexOf(handler) >>> 0, 1);
+				} else {
+					all!.set(type, []);
+				}
+
+				if (handlers.length === 0) {
+					all!.delete(type);
+				}
+			}
+		},
+
+		/**
+		 * Invoke all handlers for the given type.
+		 *
+		 * @param {string|symbol} type The event type to invoke
+		 * @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
+		 */
+		emit<Key extends keyof Events>(type: Key, evt?: Events[Key]) {
+			let handlers = all!.get(type) as EventHandlerList<Events[keyof Events]> | undefined;
+			if (!handlers) {
+				return;
+			}
+
+			handlers.slice().map((handler) => {
+				handler(evt!);
+			});
+		}
+	};
+}

src/Lib/EventBus/StoreEventBus.ts

@@ -0,0 +1,91 @@
+//const GlobalEventBus = new StoreEventBus();
+//
+//export const EventBusPlugin: Plugin = {
+//	install(app: App, ...options: any[]) {
+//		app.config.globalProperties.$events    = GlobalEventBus;
+//		app.config.globalProperties.$emitEvent = GlobalEventBus.emit.bind(GlobalEventBus);
+//	}
+//};
+//export function useEvent<Key extends keyof StoreEventsMap>(type: Key, handler: Handler<StoreEventsMap[Key]>): void;
+//export function useEvent(type: "*", handler: WildcardHandler<StoreEventsMap>): void;
+//export function useEvent(type, handler): void {
+//	const scope = getCurrentScope();
+//	if (!scope) {
+//		throw new Error('No scope found. Are you using the plugin outside of a Vue component/setup?');
+//	}
+//
+//	GlobalEventBus.on(type, handler);
+//
+//	onScopeDispose(() => {
+//		GlobalEventBus.off(type, handler);
+//		console.log('disposed event listener for', type);
+//	});
+//}
+//
+//export function emitEvent<Key extends keyof StoreEventsMap>(type: Key, data: StoreEventsMap[Key]): void;
+//export function emitEvent(type, data): void {
+//	GlobalEventBus.emit(type, data);
+//}
+//export {useEvent, emitEvent};
+
+import {getCurrentInstance, onBeforeUnmount} from "vue";
+import eventBus, {Emitter} from "./EventBus";
+import {StoreEventsMap} from "./StoreEventsMap";
+
+export type EventKey = keyof StoreEventsMap | string;
+
+export class StoreEventBus {
+
+	protected bus: Emitter<StoreEventsMap> = eventBus<StoreEventsMap>();
+
+	/**
+	 * Dispatch an event to the main event bus
+	 */
+	public $dispatch(type: EventKey, evt?: StoreEventsMap[EventKey]) {
+		this.bus.emit(type, evt);
+	}
+
+	public getAllEvents() {
+		const events = [];
+
+		this.bus.all.forEach((handlers, type) => {
+			events.push({type, handlers});
+		});
+
+		return events;
+	}
+
+	public hasEventHandler(type: EventKey) {
+		return this.bus.all.has(type);
+	}
+
+	public removeAllListeners() {
+		this.bus.all.clear();
+	}
+
+	/**
+	 * By default, when an event is used in a component, and the component is unmounted, the event listener will be removed.
+	 * You can set detached to true to disable this.
+	 */
+	public $on(
+		type: EventKey,
+		handler: (event: StoreEventsMap[EventKey]) => void,
+		detached: boolean = false
+	): () => void {
+
+		const offFn = () => this.bus.off(type, handler);
+
+		if (!detached && getCurrentInstance()) {
+			onBeforeUnmount(() => offFn());
+		}
+
+		this.bus.on(type, handler);
+
+		return offFn;
+	}
+
+	public $off(type: EventKey, handler: (event: StoreEventsMap[EventKey]) => void) {
+		this.bus.off(type, handler);
+	}
+
+}

src/Lib/EventBus/StoreEventsMap.ts

@@ -0,0 +1,5 @@
+import {LifeCycleEvents} from "../../Common/LifeCycle";
+
+export interface StoreEventsMap extends LifeCycleEvents {
+	[key: string]: any;
+}