@mhmo91/schmancy 0.8.6 → 0.9.2

package/src/store/index.ts

@@ -0,0 +1,10 @@
+export * from './context-array'
+export * from './context-collection'
+export * from './context-create'
+export * from './context-object'
+export * from './filter-directive'
+export * from './selector-hook'
+export * from './selectors'
+export * from './storage-manager'
+export * from './store.class'
+export * from './types'

package/src/store/selector-hook.ts

@@ -0,0 +1,259 @@
+// src/store/selector-hook.ts - Improved memory management
+import { property as litProperty } from 'lit/decorators.js'
+import { Observable, Subject, Subscription } from 'rxjs'
+import { takeUntil } from 'rxjs/operators'
+import { createCollectionSelector, createSelector } from './selectors'
+import { ICollectionStore, IStore } from './types'
+
+/**
+ * Symbol used for storing cleanup resources
+ * Using a Symbol prevents name collisions with component properties
+ */
+const CLEANUP_SUBJECT = Symbol('selectorCleanup')
+const SUBSCRIPTIONS = Symbol('selectorSubscriptions')
+const INITIALIZED = Symbol('selectorInitialized')
+const CONNECTED_CALLED = Symbol('connectedCallbackCalled')
+
+/**
+ * Component lifecycle interface
+ */
+interface ComponentWithLifecycle {
+	// Lifecycle hooks
+	isConnected: boolean
+	disconnectedCallback?: () => void
+	connectedCallback?: () => void
+	requestUpdate?: () => void
+
+	// Internal properties using symbols to avoid name collisions
+	[CLEANUP_SUBJECT]?: Subject<void>
+	[SUBSCRIPTIONS]?: Map<string, Subscription>
+	[INITIALIZED]?: Set<string>
+	[CONNECTED_CALLED]?: boolean
+
+	// Value storage
+	[key: string]: any
+}
+
+/**
+ * Property descriptor interface
+ */
+type PropertyDescriptor<T> = {
+	get?: () => T
+	set?: (value: T) => void
+	value?: T
+	configurable?: boolean
+	enumerable?: boolean
+	writable?: boolean
+}
+
+/**
+ * Options for selecting from a store
+ */
+interface SelectOptions {
+	/** If true, will wait for selector to emit a value (including null) before calling connectedCallback. Only undefined is considered "not ready". Default is true. */
+	required?: boolean
+
+	/** If true, will only update the component and not set the property value */
+	updateOnly?: boolean
+
+	/** If true, will use structuredClone to deeply clone values (prevents mutations) */
+	deepClone?: boolean
+
+	/** Custom equality function to determine when to update */
+	equals?: (a: any, b: any) => boolean
+
+	/** Debug mode - logs selector activity */
+	debug?: boolean
+}
+
+/**
+ * Type guard to check if a store is a collection store
+ */
+function isCollectionStore<T>(store: IStore<any> | ICollectionStore<T>): store is ICollectionStore<T> {
+	return 'set' in store && typeof store.set === 'function' && store.value instanceof Map
+}
+
+/**
+ * Ensures the cleanup resources exist on the component
+ */
+function ensureCleanupResources(component: ComponentWithLifecycle): void {
+	if (!component[CLEANUP_SUBJECT] || component[CLEANUP_SUBJECT].closed) {
+		component[CLEANUP_SUBJECT] = new Subject<void>()
+	}
+
+	if (!component[SUBSCRIPTIONS]) {
+		component[SUBSCRIPTIONS] = new Map()
+	}
+
+	if (!component[INITIALIZED]) {
+		component[INITIALIZED] = new Set()
+	}
+}
+
+/**
+ * Cleans up all selector resources
+ */
+function cleanupSelectorResources(component: ComponentWithLifecycle): void {
+	if (component[CLEANUP_SUBJECT]) {
+		component[CLEANUP_SUBJECT].next()
+		component[CLEANUP_SUBJECT].complete()
+		component[CLEANUP_SUBJECT] = undefined
+	}
+
+	if (component[SUBSCRIPTIONS]) {
+		component[SUBSCRIPTIONS].forEach(sub => sub.unsubscribe())
+		component[SUBSCRIPTIONS].clear()
+		component[SUBSCRIPTIONS] = undefined
+	}
+
+	if (component[INITIALIZED]) {
+		component[INITIALIZED].clear()
+		component[INITIALIZED] = undefined
+	}
+
+	// Reset the connected flag when cleaning up
+	component[CONNECTED_CALLED] = undefined
+}
+
+/**
+ * Selector decorator that connects a component property to a store selector
+ * with improved memory management
+ *
+ * @param store The store to select from
+ * @param selectorFn Optional function to transform the store state
+ * @param options Additional options for the selector
+ */
+export function select<T, R>(
+	store: IStore<T> | ICollectionStore<T>,
+	selectorFn: (state: any) => R = (state: R) => state,
+	options: SelectOptions = { required: true },
+) {
+	return function (proto: Record<string, any>, propName: string, _descriptor?: PropertyDescriptor<R>) {
+		// Register as a Lit property
+		litProperty({ attribute: false, type: Object })(proto, propName)
+
+		// Store original lifecycle methods
+		const originalConnectedCallback = proto.connectedCallback
+		const originalDisconnectedCallback = proto.disconnectedCallback
+
+		// Override connectedCallback to set up subscription
+		proto.connectedCallback = function (this: ComponentWithLifecycle) {
+			// Initialize cleanup resources
+			ensureCleanupResources(this)
+
+			// Create the appropriate selector
+			const selector: Observable<R> = isCollectionStore(store)
+				? createCollectionSelector(store, selectorFn)
+				: createSelector(store as IStore<T>, selectorFn)
+
+			// Call original connectedCallback immediately if not waiting for data
+			if (!options.required && !this[CONNECTED_CALLED]) {
+				originalConnectedCallback?.call(this)
+				this[CONNECTED_CALLED] = true
+			}
+
+			// Clean up any existing subscription
+			if (this[SUBSCRIPTIONS]!.has(propName)) {
+				this[SUBSCRIPTIONS]!.get(propName)?.unsubscribe()
+				this[SUBSCRIPTIONS]!.delete(propName)
+			}
+
+			// Debug log if needed
+			if (options.debug) {
+				console.debug(`[select] Setting up subscription for ${propName}`)
+			}
+
+			// Create new subscription with better error handling
+			const subscription = selector.pipe(takeUntil(this[CLEANUP_SUBJECT]!)).subscribe({
+				next: (value: R) => {
+					// Handle value updates
+					const newValue = options.deepClone ? structuredClone(value) : value
+
+					if (options.debug) {
+						console.debug(`[select] New value for ${propName}:`, newValue)
+					}
+
+					if (!options.updateOnly) {
+						this[propName] = newValue
+					}
+
+					this.requestUpdate?.()
+
+					// If required and not initialized, call connectedCallback when we get a value
+					// Allow null values but not undefined (undefined means the selector hasn't emitted yet)
+					if (options.required && !this[INITIALIZED]!.has(propName) && newValue !== undefined) {
+						this[INITIALIZED]!.add(propName)
+						
+						// Only call original connectedCallback once, regardless of how many selectors
+						if (!this[CONNECTED_CALLED]) {
+							if (options.debug) {
+								console.debug(`[select] Calling delayed connectedCallback for ${propName}`)
+							}
+
+							originalConnectedCallback?.call(this)
+							this[CONNECTED_CALLED] = true
+						}
+					}
+				},
+				error: (err: Error) => {
+					console.error(`Error in selector subscription for ${propName}:`, err)
+					// Resubscribe on error to prevent component from becoming unresponsive
+					if (this.isConnected) {
+						// Small delay to prevent immediate resubscription
+						setTimeout(() => {
+							if (this.isConnected) {
+								if (options.debug) {
+									console.debug(`[select] Resubscribing after error for ${propName}`)
+								}
+								this.connectedCallback?.()
+							}
+						}, 1000)
+					}
+				},
+			})
+
+			// Store the subscription for cleanup
+			this[SUBSCRIPTIONS]!.set(propName, subscription)
+		}
+
+		// Override disconnectedCallback to clean up subscriptions
+		proto.disconnectedCallback = function (this: ComponentWithLifecycle) {
+			// Call original disconnectedCallback
+			originalDisconnectedCallback?.call(this)
+
+			// Debug log if needed
+			if (options.debug) {
+				console.debug(`[select] Cleaning up resources in disconnectedCallback`)
+			}
+
+			// Clean up all subscription resources
+			cleanupSelectorResources(this)
+		}
+	}
+}
+
+/**
+ * Creates a selector decorator that selects a specific item from a collection store
+ * with improved memory management
+ *
+ * @param store The collection store
+ * @param keyGetter Function that returns the key to select
+ * @param options Additional options
+ */
+export function selectItem<T>(
+	store: ICollectionStore<T>,
+	keyGetter: (component: any) => string,
+	options: SelectOptions = { required: true },
+) {
+	return function (proto: Record<string, any>, propName: string, _descriptor?: PropertyDescriptor<T | undefined>) {
+		select(
+			store,
+			function (state) {
+				// This will be evaluated during subscription, when 'this' is available
+				const itemKey = keyGetter(this)
+				return itemKey ? state.get(itemKey) : undefined
+			},
+			options,
+		)(proto, propName)
+	}
+}

package/src/store/selectors.ts

@@ -0,0 +1,289 @@
+// src/store/selectors.ts
+import { BehaviorSubject, Observable, combineLatest, distinctUntilChanged, map, share, shareReplay } from 'rxjs'
+import { ICollectionStore, IStore, StoreError } from './types'
+
+/**
+ * Deep equality comparison for maps and complex objects
+ * More efficient than JSON.stringify for large objects
+ */
+function deepEqual(a: unknown, b: unknown): boolean {
+	if (a === b) return true
+
+	if (a instanceof Map && b instanceof Map) {
+		if (a.size !== b.size) return false
+		for (const [key, value] of a) {
+			if (!b.has(key) || !deepEqual(value, b.get(key))) return false
+		}
+		return true
+	}
+
+	if (a instanceof Set && b instanceof Set) {
+		if (a.size !== b.size) return false
+		for (const item of a) {
+			if (!b.has(item)) return false
+		}
+		return true
+	}
+
+	if (typeof a === 'object' && a !== null && typeof b === 'object' && b !== null) {
+		const keysA = Object.keys(a)
+		const keysB = Object.keys(b)
+
+		if (keysA.length !== keysB.length) return false
+
+		for (const key of keysA) {
+			// @ts-ignore: Index signature
+			if (!deepEqual(a[key], b[key])) return false
+		}
+
+		return true
+	}
+
+	return false
+}
+
+/**
+ * Creates a selector that derives a value from store state
+ *
+ * @param store The store to observe
+ * @param selectorFn Function that transforms the state
+ * @returns An observable of the selected state that only emits when the derived value changes
+ */
+export function createSelector<T, R>(store: IStore<T>, selectorFn: (state: T) => R): Observable<R> {
+	return store.$.pipe(map(selectorFn), distinctUntilChanged<R>(deepEqual), shareReplay(1))
+}
+
+/**
+ * Creates a selector for collection stores that derives a value from the collection
+ *
+ * @param store The collection store to observe
+ * @param selectorFn Function that transforms the collection
+ * @returns An observable of the selected state that only emits when the derived value changes
+ */
+export function createCollectionSelector<T, R>(
+	store: ICollectionStore<T>,
+	selectorFn: (state: Map<string, T>) => R,
+): Observable<R> {
+	return store.$.pipe(map(selectorFn), distinctUntilChanged<R>(deepEqual), shareReplay(1))
+}
+
+/**
+ * Creates a selector that returns all items from a collection as an array
+ *
+ * @param store The collection store
+ * @returns An observable of all items as an array
+ */
+export function createItemsSelector<T>(store: ICollectionStore<T>): Observable<T[]> {
+	return createCollectionSelector(store, collection => Array.from(collection.values()))
+}
+
+/**
+ * Creates a selector that retrieves a single item from a collection
+ *
+ * @param store The collection store
+ * @param itemKey The key of the item to select
+ * @returns An observable of the selected item that emits when the item changes
+ */
+export function createItemSelector<T>(store: ICollectionStore<T>, itemKey: string): Observable<T | undefined> {
+	return createCollectionSelector(store, collection => collection.get(itemKey))
+}
+
+/**
+ * Creates a selector that returns all keys from a collection
+ */
+export function createKeysSelector<T>(store: ICollectionStore<T>): Observable<string[]> {
+	return createCollectionSelector(store, collection => Array.from(collection.keys()))
+}
+
+/**
+ * Creates a selector that returns entries (key-value pairs) from a collection
+ */
+export function createEntriesSelector<T>(store: ICollectionStore<T>): Observable<[string, T][]> {
+	return createCollectionSelector(store, collection => Array.from(collection.entries()))
+}
+
+/**
+ * Creates a selector that sorts collection items
+ */
+export function createSortSelector<T>(store: ICollectionStore<T>, compareFn: (a: T, b: T) => number): Observable<T[]> {
+	return createCollectionSelector(store, collection => {
+		return Array.from(collection.values()).sort(compareFn)
+	})
+}
+
+/**
+ * Creates a selector that finds the first item matching a predicate
+ */
+export function createFindSelector<T>(
+	store: ICollectionStore<T>,
+	predicate: (item: T, key: string) => boolean,
+): Observable<T | undefined> {
+	return createCollectionSelector(store, collection => {
+		for (const [key, item] of collection.entries()) {
+			if (predicate(item, key)) {
+				return item
+			}
+		}
+		return undefined
+	})
+}
+
+/**
+ * Creates a selector that filters items from a collection - OPTIMIZED
+ *
+ * @param store The collection store
+ * @param filterFn Function that returns true for items to include
+ * @returns An observable of filtered items as an array
+ */
+export function createFilterSelector<T>(
+	store: ICollectionStore<T>,
+	filterFn: (item: T, key: string) => boolean,
+): Observable<T[]> {
+	return createCollectionSelector(store, collection =>
+		Array.from(collection.entries())
+			.filter(([key, item]) => filterFn(item, key))
+			.map(([_, item]) => item),
+	)
+}
+
+/**
+ * Creates a selector that maps collection values through a transform function - OPTIMIZED
+ */
+export function createMapSelector<T, R>(
+	store: ICollectionStore<T>,
+	mapFn: (item: T, key: string) => R,
+): Observable<R[]> {
+	return createCollectionSelector(store, collection =>
+		Array.from(collection.entries()).map(([key, item]) => mapFn(item, key)),
+	)
+}
+
+/**
+ * Creates a selector that counts items in a collection, optionally filtered - OPTIMIZED
+ *
+ * @param store The collection store
+ * @param filterFn Optional function to filter which items to count
+ * @returns An observable of the count
+ */
+export function createCountSelector<T>(
+	store: ICollectionStore<T>,
+	filterFn?: (item: T, key: string) => boolean,
+): Observable<number> {
+	return createCollectionSelector(store, collection => {
+		if (!filterFn) return collection.size
+
+		return Array.from(collection.entries()).filter(([key, item]) => filterFn(item, key)).length
+	})
+}
+
+/**
+ * Optimized RxJS Pipeline - use share with reset on refCount zero for better memory management
+ * in scenarios where selector subscriptions come and go
+ *
+ * @param store The store to observe
+ * @param selectorFn Function that transforms the state
+ * @returns An observable of the selected state with improved memory management
+ */
+export function createOptimizedSelector<T, R>(store: IStore<T>, selectorFn: (state: T) => R): Observable<R> {
+	return store.$.pipe(
+		map(selectorFn),
+		distinctUntilChanged<R>(deepEqual),
+		share({
+			resetOnRefCountZero: true,
+			resetOnError: false,
+			resetOnComplete: false,
+		}),
+	)
+}
+
+/**
+ * Creates a compound selector from multiple stores
+ *
+ * This function combines data from multiple stores to create a derived
+ * state that's compatible with the @select decorator.
+ *
+ * @param stores Array of stores to derive state from
+ * @param selectorFns Selector functions for each store
+ * @param combinerFn Function that combines the selected values
+ * @returns A store-compatible object to use with @select
+ */
+export function createCompoundSelector<R>(
+	stores: Array<IStore<any> | ICollectionStore<any>>,
+	selectorFns: Array<(state: any) => any>,
+	combinerFn: (...values: any[]) => R,
+): IStore<R> {
+	// Calculate initial value
+	const initialValues = stores.map((store, index) => selectorFns[index](store.value))
+	const initialValue = combinerFn(...initialValues)
+
+	// Create a store with the initial value
+	const result: IStore<R> = {
+		$: new BehaviorSubject<R>(initialValue),
+		error$: new BehaviorSubject<StoreError | null>(null),
+		ready: true,
+		defaultValue: initialValue,
+
+		get value(): R {
+			return this.$.getValue()
+		},
+
+		// These methods are no-ops for read-only stores
+		set(_value: Partial<R>, _merge?: boolean): void {
+			console.warn('Compound selector store is read-only')
+		},
+
+		clear(): void {
+			this.$.next(this.defaultValue)
+		},
+
+		replace(_newValue: R): void {
+			console.warn('Compound selector store is read-only')
+		},
+
+		delete<K extends keyof R>(_key: K): void {
+			console.warn('Compound selector store is read-only')
+		},
+
+		destroy(): void {
+			this.$.complete()
+			this.error$.complete()
+		},
+	}
+
+	// Set up the reactivity by subscribing to all source stores
+	const observables = stores.map((store, _) => store.$)
+
+	// Create a subscription that updates the result whenever any source changes
+	const subscription = combineLatest(observables).subscribe({
+		next: storeValues => {
+			try {
+				// Apply selectors to each store value
+				const selectedValues = storeValues.map((value, index) => selectorFns[index](value))
+
+				// Apply combiner function
+				const newValue = combinerFn(...selectedValues)
+
+				// Update the BehaviorSubject
+				result.$.next(newValue)
+			} catch (err) {
+				const error = new StoreError('Error in compound selector', err)
+				result.error$.next(error)
+				console.error(error)
+			}
+		},
+		error: err => {
+			const error = new StoreError('Error in store subscription', err)
+			result.error$.next(error)
+			console.error(error)
+		},
+	})
+
+	// Ensure the subscription is cleaned up when the store is destroyed
+	const originalDestroy = result.destroy
+	result.destroy = function () {
+		subscription.unsubscribe()
+		originalDestroy.call(this)
+	}
+
+	return result
+}