#develop sync state queue

Author: bennobuilder

packages/feature-state/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "feature-state",
-	"version": "0.0.53",
+	"version": "0.0.56",
 	"private": false,
 	"description": "Straightforward, typesafe, and feature-based state management library for ReactJs",
 	"keywords": [],

packages/feature-state/src/FlatQueue.ts

@@ -1,13 +1,13 @@
 // Based on: https://github.com/mourner/flatqueue/blob/main/index.js
 // Could not use the original package because it doesn't support CommonJs.
 export class FlatQueue<GItem> {
-	private ids: Array<GItem | undefined>;
-	private values: Array<number>;
+	private _ids: Array<GItem | undefined>;
+	private _values: Array<number>;
 	private _length: number;
 
 	constructor() {
-		this.ids = [];
-		this.values = [];
+		this._ids = [];
+		this._values = [];
 		this._length = 0;
 	}
 
@@ -30,17 +30,17 @@ export class FlatQueue<GItem> {
 
 		while (pos > 0) {
 			const parent = (pos - 1) >> 1;
-			const parentValue = this.values[parent] as number;
+			const parentValue = this._values[parent] as number;
 			if (priority >= parentValue) {
 				break;
 			}
-			this.ids[pos] = this.ids[parent];
-			this.values[pos] = parentValue;
+			this._ids[pos] = this._ids[parent];
+			this._values[pos] = parentValue;
 			pos = parent;
 		}
 
-		this.ids[pos] = id;
-		this.values[pos] = priority;
+		this._ids[pos] = id;
+		this._values[pos] = priority;
 	}
 
 	/**
@@ -53,14 +53,14 @@ export class FlatQueue<GItem> {
 			return null;
 		}
 
-		const top = this.ids[0];
+		const top = this._ids[0];
 		this._length--;
 
 		if (this._length > 0) {
-			const id = this.ids[this._length] as GItem;
-			const value = this.values[this._length] as number;
-			this.ids[0] = id;
-			this.values[0] = value;
+			const id = this._ids[this._length] as GItem;
+			const value = this._values[this._length] as number;
+			this._ids[0] = id;
+			this._values[0] = value;
 
 			const halfLength = this._length >> 1;
 			let pos = 0;
@@ -70,15 +70,15 @@ export class FlatQueue<GItem> {
 				const right = left + 1;
 
 				// Initialize with left child values
-				let bestIndex = this.ids[left] as GItem;
-				let bestValue = this.values[left] as number;
+				let bestIndex = this._ids[left] as GItem;
+				let bestValue = this._values[left] as number;
 
 				// Check if right child exists and has lower priority
-				const rightValue = this.values[right] as number;
+				const rightValue = this._values[right] as number;
 
 				if (right < this._length && rightValue < bestValue) {
 					left = right;
-					bestIndex = this.ids[right] as GItem;
+					bestIndex = this._ids[right] as GItem;
 					bestValue = rightValue;
 				}
 
@@ -88,14 +88,14 @@ export class FlatQueue<GItem> {
 				}
 
 				// Move best child up
-				this.ids[pos] = bestIndex;
-				this.values[pos] = bestValue;
+				this._ids[pos] = bestIndex;
+				this._values[pos] = bestValue;
 				pos = left;
 			}
 
 			// Place the current item at its new position
-			this.ids[pos] = id;
-			this.values[pos] = value;
+			this._ids[pos] = id;
+			this._values[pos] = value;
 		}
 
 		return top ?? null;

packages/feature-state/src/ListenerQueue.ts

@@ -0,0 +1,33 @@
+import { FlatQueue } from './FlatQueue';
+import type { TListenerQueueItem } from './types';
+
+export class ListenerQueue extends FlatQueue<TListenerQueueItem> {
+	public readonly sync: boolean;
+
+	constructor(sync = false) {
+		super();
+		this.sync = sync;
+	}
+
+	public process(): void | Promise<void> {
+		if (this.sync) {
+			return this.processSync();
+		} else {
+			return this.processAsync();
+		}
+	}
+
+	public processSync(): void {
+		let item: TListenerQueueItem | null;
+		while ((item = this.pop()) != null) {
+			void item.callback(item.context);
+		}
+	}
+
+	public async processAsync(): Promise<void> {
+		let item: TListenerQueueItem | null;
+		while ((item = this.pop()) != null) {
+			await item.callback(item.context);
+		}
+	}
+}

packages/feature-state/src/create-state.ts

@@ -1,25 +1,34 @@
-import { FlatQueue } from './FlatQueue';
-import type { TListener, TListenerContext, TListenerQueueItem, TState } from './types';
+import { getQueue } from './queue';
+import type { TListener, TListenerContext, TState } from './types';
 
-const GLOBAL_LISTENER_QUEUE = new FlatQueue<TListenerQueueItem>();
 export const SET_SOURCE_KEY = 'state_set';
 
-export function createState<GValue>(initialValue: GValue): TState<GValue, []> {
+export function createState<GValue>(
+	initialValue: GValue,
+	options: TCreateStateOptions = {}
+): TState<GValue, []> {
+	const { queue: queueName = 'async' } = options;
+	const queue = getQueue(queueName);
+	if (queue == null) {
+		throw new Error(`Queue "${queueName}" not found`);
+	}
+
 	return {
 		_features: [],
 		_listeners: [],
 		_v: initialValue,
+		_queue: queue,
 		_notify(notifyOptions = {}) {
 			const { processListenerQueue = true, listenerContext = {}, prevValue } = notifyOptions;
 
-			// Push current state's listeners to the queue
+			// Push all listeners to the state's queue
 			for (const listener of this._listeners) {
 				const context: TListenerContext<GValue> = Object.assign(listenerContext, {
 					value: this._v,
 					prevValue
 				});
 				if (listener.queueIf == null || listener.queueIf(context)) {
-					GLOBAL_LISTENER_QUEUE.push(
+					this._queue.push(
 						{
 							context,
 							callback: listener.callback
@@ -29,9 +38,9 @@ export function createState<GValue>(initialValue: GValue): TState<GValue, []> {
 				}
 			}
 
-			// Process queue
+			// Process the state's queue
 			if (processListenerQueue) {
-				void processStateQueue();
+				void this._queue.process();
 			}
 		},
 		get() {
@@ -64,7 +73,7 @@ export function createState<GValue>(initialValue: GValue): TState<GValue, []> {
 			};
 			this._listeners.push(listener);
 
-			// Undbind
+			// Unbind
 			return () => {
 				const index = this._listeners.indexOf(listener);
 				if (index !== -1) {
@@ -80,15 +89,12 @@ export function createState<GValue>(initialValue: GValue): TState<GValue, []> {
 	};
 }
 
+interface TCreateStateOptions {
+	queue?: string;
+}
+
 export enum EStateListenerQueuePriority {
 	EARLY = 50,
 	DEFAULT = 100,
 	LATE = 200
 }
-
-export async function processStateQueue(): Promise<void> {
-	let item: TListenerQueueItem | null;
-	while ((item = GLOBAL_LISTENER_QUEUE.pop()) != null) {
-		await item.callback(item.context);
-	}
-}

packages/feature-state/src/index.ts

@@ -1,4 +1,5 @@
 export * from './create-state';
 export * from './features';
 export * from './is-state-with-features';
+export * from './queue';
 export * from './types';

packages/feature-state/src/queue.ts

@@ -0,0 +1,28 @@
+import { ListenerQueue } from './ListenerQueue';
+
+const GLOBAL_STATE_QUEUES = new Map<string, ListenerQueue>();
+
+// Initialize default queues
+GLOBAL_STATE_QUEUES.set('async', new ListenerQueue(false));
+GLOBAL_STATE_QUEUES.set('sync', new ListenerQueue(true));
+
+export function createQueue(name: string, options: { sync: boolean }): void {
+	GLOBAL_STATE_QUEUES.set(name, new ListenerQueue(options.sync));
+}
+
+export function getQueue(name: string): ListenerQueue | undefined {
+	return GLOBAL_STATE_QUEUES.get(name);
+}
+
+export function processQueue(name: string): void {
+	const queue = GLOBAL_STATE_QUEUES.get(name);
+	if (queue != null) {
+		void queue.process();
+	}
+}
+
+export function processAllQueues(): void {
+	for (const [_, queue] of GLOBAL_STATE_QUEUES) {
+		void queue.process();
+	}
+}

packages/feature-state/src/types/state.ts

@@ -1,10 +1,12 @@
 import { TWithFeatures, type TFeatureDefinition } from '@blgc/types/features';
 import { type TNestedPath } from '@blgc/utils';
+import type { ListenerQueue } from '../ListenerQueue';
 
 export type TState<GValue, GFeatures extends TFeatureDefinition[]> = TWithFeatures<
 	{
 		_v: GValue;
 		_listeners: TListener<GValue>[];
+		_queue: ListenerQueue;
 		/**
 		 * Triggers all registered listeners to run with the current state value.
 		 */