Merge pull request #14 from srav001/1.0.2

1.0.2

Author: srav001

README.md

@@ -15,7 +15,7 @@ Find it on `npm` - https://www.npmjs.com/package/vue-subscription.
 
 ## Introduction
 
-Only 1.26 kB or gzip: 0.63 kB in size, the [useSubscription](#tldr) composable takes an initial value and returns an object with a reactive value that is by default shallow and only deep when explicitly enabled. The value property, `$value is not automatically unwrapped in template`. Additionally, it also provides `explicit getter and setter` if you like more control over the state.
+Only 1.3 kB or gzip: 0.7 kB in size, the [useSubscription](#tldr) composable takes an initial value and returns an object with a reactive value that is by default shallow and only deep when explicitly enabled. The value property, `$value is not automatically unwrapped in template`. Additionally, it also provides `explicit getter and setter` if you like more control over the state.
 
 The package also provides a simple way to create reactive subscriptions that can be used to observe changes to a value and execute a list of subscribers when the value changes. It also includes methods to mutate the value for complex objects and trigger subscribers manually if and when needed rarely. Check out the [usage](#usage) examples.
 

demo/ChildComp.vue

@@ -4,7 +4,6 @@ import { useNotifier } from './composables/notifier';
 const notifier = useNotifier();
 function incrementer() {
 	notifier.$emit(val => val + 1);
-	// or notifier.$emit(notifier.$state.value + 1);
 }
 </script>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-subscription",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A type-safe 🔥 & tiny ⭐️ super-charged ref ⚡️ / eventBus replacement in Vue 💚.",
   "keywords": [
     "web",

scripts/release/releaseData.json

@@ -1,4 +1,4 @@
 {
   "onGoing": false,
-  "version": "1.0.1"
+  "version": "1.0.2"
 }

src/functions/helpers.ts

@@ -6,13 +6,13 @@
  * @returns A promise that resolves to the result of the function.
  */
 // eslint-disable-next-line @typescript-eslint/ban-types
-export async function dynamicallyExecuteFunction<T>(func: Function, arg: T) {
+export async function dynamicallyExecuteFunction<T = unknown>(func: Function, arg: unknown) {
 	try {
 		const result = func(arg);
 		if (result instanceof Promise) {
-			return await result;
+			return (await result) as T;
 		} else {
-			return result;
+			return result as T;
 		}
 	} catch (err) {
 		throw new Error('Function failed to run', { cause: err });

src/index.ts

@@ -1 +1,2 @@
 export { useSubscription } from './subscription';
+export { dynamicallyExecuteFunction } from './functions/helpers';

src/subscription.ts

@@ -1,5 +1,6 @@
 import { dynamicallyExecuteFunction } from './functions/helpers';
 import { ref, shallowRef, readonly } from 'vue';
+import type { Ref, ShallowRef } from 'vue';
 
 /**
  * It takes a value and returns an object with a value property that is a shallowRef/ref of the value
@@ -10,73 +11,44 @@ import { ref, shallowRef, readonly } from 'vue';
  * @returns A function that returns an object with a shallow/deep reactive value, a subscriber and a
  * few extra methods.
  */
-export function useSubscription<T>(value: T, deep = false) {
+export function useSubscription<T, D extends boolean = false>(value: T, deep: D = false as D) {
 	if (value === undefined) {
 		throw new Error('No value provided, Initial value is required');
 	}
 
-	const _subRef = deep === false ? shallowRef(value) : ref(value);
-	type SubType = typeof _subRef.value;
+	type SubType = D extends false ? ShallowRef<T> : Ref<T>;
+	const _subRef = (deep === false ? shallowRef(value) : ref(value)) as SubType;
+	type SubValue = SubType['value'];
 
-	type Subscriber = (val: SubType) => Promise<void> | void;
+	type Subscriber = (val: SubValue) => Promise<void> | void;
 	const _subscriptions: Set<Subscriber> = new Set();
-	/**
-	 * Takes a function as an argument and adds it to the subscriber list.
-	 * @param subscriber - Subscriber
-	 */
-	function addSubscriber(subscriber: Subscriber) {
-		if (typeof subscriber !== 'function') {
-			throw new Error('Subscriber must be a function');
-		}
-		_subscriptions.add(subscriber);
-	}
-	/**
-	 * It deletes an event/subscriber from the subscriptions list.
-	 * @param subscriber - Subscriber
-	 */
-	function deleteSubscriber(subscriber: Subscriber) {
-		_subscriptions.delete(subscriber);
-	}
 	/**
 	 * It loops through the Set of subscribers and executes each function with the value passed in as
 	 * an argument
 	 * @param {SubType} val - The value that is being passed to the subscribers.
 	 */
-	function triggerSubscribers(val: SubType) {
+	function triggerSubscribers(val: SubValue) {
 		_subscriptions.forEach(dep => dynamicallyExecuteFunction(dep, val));
 	}
-	type ValueMutator = (val: SubType) => SubType;
-	/**
-	 * It mutates the $value - for complex types that are typeof object.
-	 * @param mutator - (val: T) => T
-	 */
-	async function mutateSubscriber(mutator: ValueMutator) {
-		if (typeof mutator !== 'function') {
-			throw new Error('Mutation must be a function');
-		}
-		_subRef.value = await dynamicallyExecuteFunction(mutator, _subRef.value);
-		triggerSubscribers(_subRef.value);
-	}
 
-	function setValue(val: SubType) {
+	function setValue(val: T) {
 		_subRef.value = val;
 		triggerSubscribers(val);
 	}
-
 	return {
-		get $value(): SubType {
+		get $value(): SubValue {
 			return _subRef.value;
 		},
-		set $value(val) {
+		set $value(val: T) {
 			setValue(val);
 		},
 
-		$get(): SubType {
+		$get(): SubValue {
 			return _subRef.value;
 		},
-		$set(val: SubType | ValueMutator) {
+		$set<V extends SubValue | ((val: SubValue) => SubValue)>(val: V) {
 			if (typeof val === 'function') setValue(val(_subRef.value));
-			else setValue(val);
+			else setValue(val as SubValue);
 		},
 
 		/** ReadOnly version of value. Wraps the ref in readonly */
@@ -87,31 +59,47 @@ export function useSubscription<T>(value: T, deep = false) {
 		 * @param subscriber - type Subscriber = (val: T) => Promise<void> | void;
 		 */
 		$addSub(subscriber: Subscriber) {
-			addSubscriber(subscriber);
+			if (typeof subscriber !== 'function') {
+				throw new Error('Subscriber must be a function');
+			}
+			_subscriptions.add(subscriber);
 		},
 		/**
 		 * A method that allows you to delete a subscriber from the Set of subscribers.
 		 * @param subscriber - Subscriber
 		 */
 		$deleteSub(subscriber: Subscriber) {
-			deleteSubscriber(subscriber);
+			_subscriptions.delete(subscriber);
 		},
 		/**
 		 * Manually trigger subscribers. Shouldn't be used unless explicity needed (rarely).
 		 */
 		$triggerSubs() {
 			triggerSubscribers(_subRef.value);
 		},
+		/**
+		 * Clears all subscribers. Easy for cleanup in beforeUnmount.
+		 */
+		$clearSubs() {
+			_subscriptions.clear();
+		},
 
 		/**
 		 * It mutates the value of the object.
 		 * @param mutator - (val: T) => T
+		 * @param mutator - (val: T) => Promise<T>
 		 */
-		$mutate(mutator: ValueMutator) {
+		async $mutate(mutator: (val: SubValue) => SubValue | Promise<SubValue>) {
 			if (typeof _subRef.value !== 'object') {
 				throw new Error('Value passed is not an typeof object! $mutate only accepts `typeof object`');
 			}
-			mutateSubscriber(mutator);
+			if (typeof mutator !== 'function') {
+				throw new Error('Mutator must be a function');
+			}
+			_subRef.value = await dynamicallyExecuteFunction(mutator, _subRef.value);
+			triggerSubscribers(_subRef.value);
+
+			return _subRef.value;
 		}
 	};
 }