@mhmo91/schmancy 0.10.42 → 0.10.44

package/src/rxjs-utils/waitForElementsAll.ts

@@ -9,34 +9,32 @@ import observeOnMutation from './mutation-observer'
  * @returns
  */
 export default function waitForElementsAll(
-  /**
-   * @param selectors The selectors to use to find the elements
-   * @type { string[] }
-   * @description The order of the elements in the array is the same as the order of the elements in the emitted array
-   */
-  selectors: string[],
-  /**
-   * @param timeoutAfter How long to wait for the elements to appear before throwing an error
-   * @default 5000
-   * @type { number | undefined }
-   * @description If you don't want to wait for the elements to appear, pass `undefined` as the second argument
-   */
-  timeoutAfter = 5000,
+	/**
+	 * @param selectors The selectors to use to find the elements
+	 * @type { string[] }
+	 * @description The order of the elements in the array is the same as the order of the elements in the emitted array
+	 */
+	selectors: string[],
+	/**
+	 * @param timeoutAfter How long to wait for the elements to appear before throwing an error
+	 * @default 5000
+	 * @type { number | undefined }
+	 * @description If you don't want to wait for the elements to appear, pass `undefined` as the second argument
+	 */
+	timeoutAfter = 5000,
 ) {
-  return observeOnMutation(document.body).pipe(
-    startWith(document.body),
-    filter(() => selectors.every(s => !!document.querySelector(s))),
-    take(1),
-    map(() =>
-      selectors.map(s => document.querySelectorAll(s)).filter(isPresent),
-    ), // why filter again? see https://github.com/Microsoft/TypeScript/issues/16069
-    map(elements => {
-      if (elements.length === selectors.length) {
-        return elements
-      } else {
-        throw new Error('Not all elements were found')
-      }
-    }),
-    timeoutAfter ? timeout(timeoutAfter) : tap(),
-  )
+	return observeOnMutation(document.body).pipe(
+		startWith(document.body),
+		filter(() => selectors.every(s => !!document.querySelector(s))),
+		take(1),
+		map(() => selectors.map(s => document.querySelectorAll(s)).filter(isPresent)), // why filter again? see https://github.com/Microsoft/TypeScript/issues/16069
+		map(elements => {
+			if (elements.length === selectors.length) {
+				return elements
+			} else {
+				throw new Error('Not all elements were found')
+			}
+		}),
+		timeoutAfter ? timeout(timeoutAfter) : tap(),
+	)
 }

package/src/rxjs-utils/waitUntil.ts

@@ -1,16 +1,11 @@
 import { filter, startWith, take, timeout } from 'rxjs'
 import observeOnMutation from './mutation-observer'
 
-export default function waitUntil(
-  selectors: Array<string>,
-  timeoutAfter = 5000,
-) {
-  return observeOnMutation(document.body).pipe(
-    startWith(document.body),
-    filter(() =>
-      selectors.every(selector => !!document.querySelector(selector)),
-    ),
-    take(1),
-    timeout(timeoutAfter),
-  )
+export default function waitUntil(selectors: Array<string>, timeoutAfter = 5000) {
+	return observeOnMutation(document.body).pipe(
+		startWith(document.body),
+		filter(() => selectors.every(selector => !!document.querySelector(selector))),
+		take(1),
+		timeout(timeoutAfter),
+	)
 }

package/src/skeleton/skeleton.ts

@@ -15,39 +15,45 @@ import { customElement, property } from 'lit/decorators.js'
  */
 @customElement('schmancy-skeleton')
 export class SchmancySkeleton extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-		width: var(--_sw, 100%);
-		height: var(--_sh, 1rem);
-	}
-	.surface {
-		width: 100%;
-		height: 100%;
-		border-radius: var(--_sr, 0.25rem);
-		background: linear-gradient(
-			90deg,
-			var(--schmancy-sys-color-surface-containerHighest, #e6e6e6) 25%,
-			var(--schmancy-sys-color-surface-container, #f2f2f2) 37%,
-			var(--schmancy-sys-color-surface-containerHighest, #e6e6e6) 63%
-		);
-		background-size: 400% 100%;
-		animation: schmancy-skeleton-shimmer 1.4s ease infinite;
-	}
-	:host([shape='circle']) .surface {
-		border-radius: 50%;
-	}
-	@keyframes schmancy-skeleton-shimmer {
-		0% { background-position: 100% 50%; }
-		100% { background-position: 0 50%; }
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.surface {
-			animation: none;
-			background: var(--schmancy-sys-color-surface-containerHighest, #e6e6e6);
-		}
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: block;
+				width: var(--_sw, 100%);
+				height: var(--_sh, 1rem);
+			}
+			.surface {
+				width: 100%;
+				height: 100%;
+				border-radius: var(--_sr, 0.25rem);
+				background: linear-gradient(
+					90deg,
+					var(--schmancy-sys-color-surface-containerHighest, #e6e6e6) 25%,
+					var(--schmancy-sys-color-surface-container, #f2f2f2) 37%,
+					var(--schmancy-sys-color-surface-containerHighest, #e6e6e6) 63%
+				);
+				background-size: 400% 100%;
+				animation: schmancy-skeleton-shimmer 1.4s ease infinite;
+			}
+			:host([shape='circle']) .surface {
+				border-radius: 50%;
+			}
+			@keyframes schmancy-skeleton-shimmer {
+				0% {
+					background-position: 100% 50%;
+				}
+				100% {
+					background-position: 0 50%;
+				}
+			}
+			@media (prefers-reduced-motion: reduce) {
+				.surface {
+					animation: none;
+					background: var(--schmancy-sys-color-surface-containerHighest, #e6e6e6);
+				}
+			}
+		`,
+	]
 	@property({ type: String, reflect: true }) shape: 'rect' | 'circle' | 'text' = 'rect'
 	@property({ type: String }) width = ''
 	@property({ type: String }) height = ''

package/src/slider/index.ts

@@ -1,2 +1,2 @@
-export * from './slide';
-export * from './slider';
+export * from './slide'
+export * from './slider'

package/src/slider/slide.ts

@@ -19,19 +19,21 @@ type ObjectFit = 'cover' | 'contain' | 'fill' | 'scale-down' | 'none'
 
 @customElement('schmancy-slide')
 export class SchmancySlide extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-		scroll-snap-align: center; /* If your slider uses scroll-snap */
-	}
+	static styles = [
+		css`
+			:host {
+				display: block;
+				scroll-snap-align: center; /* If your slider uses scroll-snap */
+			}
 
-	.slide {
-		display: block;
-		width: 100%;
-		height: auto;
-		object-fit: var(--object-fit, cover);
-	}
-`]
+			.slide {
+				display: block;
+				width: 100%;
+				height: auto;
+				object-fit: var(--object-fit, cover);
+			}
+		`,
+	]
 
 	/**
 	 * Determines how this slide should be rendered.

package/src/slider/slider.ts

@@ -6,32 +6,34 @@ import { throttleTime } from 'rxjs/operators'
 
 @customElement('schmancy-slider')
 export class SchmancySlider extends SchmancyElement {
-	static styles = [css`
-	.slider {
-		/* Lay out slides horizontally, one after another */
-		display: flex;
-		overflow-x: auto;
-
-		/* Optional: scroll snapping */
-		scroll-snap-type: x mandatory;
-
-		/* Hide scrollbars */
-		-ms-overflow-style: none; /* IE and Edge */
-		scrollbar-width: none; /* Firefox */
-	}
-	.slider::-webkit-scrollbar {
-		display: none; /* Chrome, Safari, Opera */
-	}
+	static styles = [
+		css`
+			.slider {
+				/* Lay out slides horizontally, one after another */
+				display: flex;
+				overflow-x: auto;
+
+				/* Optional: scroll snapping */
+				scroll-snap-type: x mandatory;
+
+				/* Hide scrollbars */
+				-ms-overflow-style: none; /* IE and Edge */
+				scrollbar-width: none; /* Firefox */
+			}
+			.slider::-webkit-scrollbar {
+				display: none; /* Chrome, Safari, Opera */
+			}
 
-	/* 
+			/* 
       Ensure each slide takes up the full slider width.
       "schmancy-slide" is the child custom element.
     */
-	::slotted(schmancy-slide) {
-		flex: 0 0 100%;
-		box-sizing: border-box;
-	}
-`]
+			::slotted(schmancy-slide) {
+				flex: 0 0 100%;
+				box-sizing: border-box;
+			}
+		`,
+	]
 
 	/**
 	 * Currently centered slide index

package/src/splash-screen/index.ts

@@ -1 +1 @@
-export * from './splash-screen';
+export * from './splash-screen'

package/src/splash-screen/splash-screen.ts

@@ -31,33 +31,32 @@ export type SchmancySplashScreenDoneEvent = CustomEvent<void>
  */
 @customElement('schmancy-splash-screen')
 export default class SchmancySplashScreen extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-		position: relative;
-	}
-
-	.splash-layer {
-		position: fixed;
-		inset: 0;
-		z-index: 50;
-		overflow: hidden;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: var(
-			--schmancy-splash-background,
-			var(--schmancy-sys-color-surface-containerLowest, #000)
-		);
-		transition: opacity var(--schmancy-splash-transition, 500ms) ease-out;
-	}
-
-	.content-layer {
-		display: block;
-		width: 100%;
-		transition: opacity var(--schmancy-splash-transition, 500ms) ease-in-out;
-	}
-`]
+	static styles = [
+		css`
+			:host {
+				display: block;
+				position: relative;
+			}
+
+			.splash-layer {
+				position: fixed;
+				inset: 0;
+				z-index: 50;
+				overflow: hidden;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				background: var(--schmancy-splash-background, var(--schmancy-sys-color-surface-containerLowest, #000));
+				transition: opacity var(--schmancy-splash-transition, 500ms) ease-out;
+			}
+
+			.content-layer {
+				display: block;
+				width: 100%;
+				transition: opacity var(--schmancy-splash-transition, 500ms) ease-in-out;
+			}
+		`,
+	]
 
 	/**
 	 * Minimum duration (ms) the splash layer stays visible. Prevents a flash

package/src/state/active-host.ts

@@ -144,11 +144,10 @@ export const _activeHost = {
 // Singleton across module copies for the same reason as `_stack` above.
 const EVENT_HOST_KEY = Symbol.for('schmancy.state.activeHost.eventHost')
 type EventHostSlot = { host: HTMLElement | undefined; scheduled: boolean }
-const _eventHostSlot: EventHostSlot =
-	((globalThis as { [EVENT_HOST_KEY]?: EventHostSlot })[EVENT_HOST_KEY] ??= {
-		host: undefined,
-		scheduled: false,
-	})
+const _eventHostSlot: EventHostSlot = ((globalThis as { [EVENT_HOST_KEY]?: EventHostSlot })[EVENT_HOST_KEY] ??= {
+	host: undefined,
+	scheduled: false,
+})
 
 /** Publish `host` as the active event-host. The slot self-clears at the
  *  end of the current microtask checkpoint — long enough for the entire

package/src/state/index.ts

@@ -123,15 +123,16 @@ export interface ScalarAPI<T> {
 	replace(next: T): void
 }
 
-export type WriteAPI<T> = Kind<T> extends 'map'
-	? MapAPI<T>
-	: Kind<T> extends 'set'
-		? SetAPI<T>
-		: Kind<T> extends 'array'
-			? ArrayAPI<T>
-			: Kind<T> extends 'object'
-				? ObjectAPI<T>
-				: ScalarAPI<T>
+export type WriteAPI<T> =
+	Kind<T> extends 'map'
+		? MapAPI<T>
+		: Kind<T> extends 'set'
+			? SetAPI<T>
+			: Kind<T> extends 'array'
+				? ArrayAPI<T>
+				: Kind<T> extends 'object'
+					? ObjectAPI<T>
+					: ScalarAPI<T>
 
 export interface BaseAPI<NS extends string, T, S extends StorageBackend> {
 	readonly [stateBrand]: true
@@ -158,16 +159,11 @@ export interface BaseAPI<NS extends string, T, S extends StorageBackend> {
 	isolatedInstance(): { destroy(): void } & Record<string | symbol, unknown>
 }
 
-export interface SyncState<NS extends string, T, S extends SyncStorage>
-	extends BaseAPI<NS, T, S>,
-		Disposable {
+export interface SyncState<NS extends string, T, S extends SyncStorage> extends BaseAPI<NS, T, S>, Disposable {
 	[Symbol.dispose](): void
 }
 
-export interface AsyncState<NS extends string, T>
-	extends BaseAPI<NS, T, 'indexeddb'>,
-		Disposable,
-		AsyncDisposable {
+export interface AsyncState<NS extends string, T> extends BaseAPI<NS, T, 'indexeddb'>, Disposable, AsyncDisposable {
 	[Symbol.dispose](): void
 	[Symbol.asyncDispose](): Promise<void>
 }
@@ -219,10 +215,10 @@ function detectKind(value: unknown): RuntimeKind {
 // who arrived first.
 const CLAIMED_KEY = Symbol.for('schmancy.state.claimed')
 const INSTANCES_KEY = Symbol.for('schmancy.state.instances')
-const claimedSlot = (globalThis as { [CLAIMED_KEY]?: Set<string> })
+const claimedSlot = globalThis as { [CLAIMED_KEY]?: Set<string> }
 claimedSlot[CLAIMED_KEY] ??= new Set<string>()
 const claimed = claimedSlot[CLAIMED_KEY]!
-const instancesSlot = (globalThis as { [INSTANCES_KEY]?: Map<string, unknown> })
+const instancesSlot = globalThis as { [INSTANCES_KEY]?: Map<string, unknown> }
 instancesSlot[INSTANCES_KEY] ??= new Map<string, unknown>()
 const instances = instancesSlot[INSTANCES_KEY]!
 
@@ -245,9 +241,9 @@ const instances = instancesSlot[INSTANCES_KEY]!
 // cache keys are DOM elements (process-global), but the cache itself must
 // also be shared.
 const CACHE_KEY = Symbol.for('schmancy.state.hostResolverCache')
-const cacheSlot = (globalThis as {
+const cacheSlot = globalThis as {
 	[CACHE_KEY]?: WeakMap<HTMLElement, Map<string, unknown>>
-})
+}
 cacheSlot[CACHE_KEY] ??= new WeakMap<HTMLElement, Map<string, unknown>>()
 const hostResolverCache = cacheSlot[CACHE_KEY]!
 
@@ -557,21 +553,16 @@ function createInstance(args: CreateInstanceArgs, options: CreateInstanceOptions
 		enumerable: true,
 	})
 	Object.defineProperty(instance, 'signal', {
-		get: () =>
-			(resolveContextual(namespace, isolatedTarget) as { signal: Signal.State<unknown> }).signal,
+		get: () => (resolveContextual(namespace, isolatedTarget) as { signal: Signal.State<unknown> }).signal,
 		enumerable: true,
 	})
 	Object.defineProperty(instance, '$', {
-		get: () =>
-			(resolveContextual(namespace, isolatedTarget) as { $: Observable<unknown> }).$,
+		get: () => (resolveContextual(namespace, isolatedTarget) as { $: Observable<unknown> }).$,
 		enumerable: true,
 	})
 	for (const key of Object.keys(writeApi)) {
 		instance[key] = (...args: unknown[]): unknown => {
-			const target = resolveContextual(namespace, isolatedTarget) as Record<
-				string,
-				(...a: unknown[]) => unknown
-			>
+			const target = resolveContextual(namespace, isolatedTarget) as Record<string, (...a: unknown[]) => unknown>
 			return target[key](...args)
 		}
 	}
@@ -579,10 +570,7 @@ function createInstance(args: CreateInstanceArgs, options: CreateInstanceOptions
 	// Hook used by `<schmancy-context>` to mint a per-context copy seeded
 	// with the current value. Internal: not part of the public State<> type.
 	instance.isolatedInstance = (): unknown =>
-		createInstance(
-			{ namespace, initial: signal.get(), storage: 'memory' },
-			{ isolated: true },
-		)
+		createInstance({ namespace, initial: signal.get(), storage: 'memory' }, { isolated: true })
 
 	return instance
 }
@@ -595,15 +583,14 @@ function makeHandle(namespace: string): Record<string, (initial: unknown) => unk
 	// under module-duplication conditions — Module Federation's loadShare
 	// proxies, multiple build-time copies of schmancy, dev/HMR re-evaluation.
 	claimed.add(namespace)
-	const ensure = (storage: 'memory' | 'local' | 'session' | 'indexeddb') =>
-		(initial: unknown) => {
-			const key = `${namespace}@${storage}`
-			const cached = instances.get(key)
-			if (cached !== undefined) return cached
-			const instance = createInstance({ namespace, initial, storage })
-			instances.set(key, instance)
-			return instance
-		}
+	const ensure = (storage: 'memory' | 'local' | 'session' | 'indexeddb') => (initial: unknown) => {
+		const key = `${namespace}@${storage}`
+		const cached = instances.get(key)
+		if (cached !== undefined) return cached
+		const instance = createInstance({ namespace, initial, storage })
+		instances.set(key, instance)
+		return instance
+	}
 	return {
 		memory: ensure('memory'),
 		local: ensure('local'),
@@ -637,9 +624,7 @@ export function state(namespace: unknown): unknown {
 		throw new TypeError('[state] namespace must be a string')
 	}
 	if (!namespace.includes('/')) {
-		throw new TypeError(
-			`[state] namespace "${namespace}" must follow the "feature/name" convention.`,
-		)
+		throw new TypeError(`[state] namespace "${namespace}" must follow the "feature/name" convention.`)
 	}
 	return makeHandle(namespace)
 }
@@ -809,10 +794,7 @@ class BindStateController<T> implements ReactiveController {
 	}
 }
 
-export function bindState<T>(
-	host: ReactiveControllerHost,
-	source: ObservableState<T>,
-): BoundState<T> {
+export function bindState<T>(host: ReactiveControllerHost, source: ObservableState<T>): BoundState<T> {
 	return new BindStateController(host, source)
 }
 
@@ -898,7 +880,6 @@ export function observe<T>(source: ObservableState<T>) {
 	}
 }
 
-
 /**
  * RxJS operator that restores `host` as the active schmancy context for every
  * emission. Drop this into any pipeline whose subscriber calls state mutators
@@ -913,11 +894,11 @@ export function observe<T>(source: ObservableState<T>) {
  * ```
  */
 export function schmancyContext<T>(host: HTMLElement): MonoTypeOperatorFunction<T> {
-	return (source) =>
-		new Observable<T>((subscriber) =>
+	return source =>
+		new Observable<T>(subscriber =>
 			source.subscribe({
-				next: (v) => _activeHost.run(host, () => subscriber.next(v)),
-				error: (e) => subscriber.error(e),
+				next: v => _activeHost.run(host, () => subscriber.next(v)),
+				error: e => subscriber.error(e),
 				complete: () => subscriber.complete(),
 			}),
 		)

package/src/state/persist.ts

@@ -106,10 +106,7 @@ class WebStorageAdapter<T> implements StorageAdapter<T> {
 		try {
 			this.storage.setItem(this.key, JSON.stringify(value, replacer))
 		} catch (err) {
-			throw new StateStorageError(
-				`[state] ${this.label} save failed (${this.key})`,
-				err,
-			)
+			throw new StateStorageError(`[state] ${this.label} save failed (${this.key})`, err)
 		}
 	}
 	async clear(): Promise<void> {
@@ -138,10 +135,14 @@ class IndexedDBAdapter<T> implements StorageAdapter<T> {
 					db.createObjectStore(IndexedDBAdapter.STORE_NAME)
 				}
 			}
-			req.addEventListener('success', () => {
-				this.#db = req.result
-				resolve(req.result)
-			}, { once: true })
+			req.addEventListener(
+				'success',
+				() => {
+					this.#db = req.result
+					resolve(req.result)
+				},
+				{ once: true },
+			)
 			req.addEventListener('error', () => reject(req.error), { once: true })
 		})
 		return this.#opening
@@ -168,9 +169,11 @@ class IndexedDBAdapter<T> implements StorageAdapter<T> {
 			const tx = db.transaction(IndexedDBAdapter.STORE_NAME, 'readwrite')
 			const req = tx.objectStore(IndexedDBAdapter.STORE_NAME).put(value, this.key)
 			req.addEventListener('success', () => resolve(), { once: true })
-			req.addEventListener('error', () => reject(
-				new StateStorageError(`[state] IDB save failed (${this.key})`, req.error),
-			), { once: true })
+			req.addEventListener(
+				'error',
+				() => reject(new StateStorageError(`[state] IDB save failed (${this.key})`, req.error)),
+				{ once: true },
+			)
 		})
 	}