kit.watcher.md

Home > @holoflows/kit > Watcher

Watcher class

Use LiveSelector to watch dom change

Signature:

export declare abstract class Watcher<T, Before extends Element, After extends Element, SingleMode extends boolean> implements PromiseLike<ResultOf<SingleMode, T>> 

Implements: PromiseLike<ResultOf<SingleMode, T>>

Constructors

Constructor	Modifiers	Description
(constructor)(liveSelector)		Constructs a new instance of the Watcher class

Properties

Property	Modifiers	Type	Description
_firstDOMProxy	protected	DOMProxy<Node, Before, After>	The first DOMProxy
_warning_forget_watch_	protected	{ warn(f?: (stack: string) => void): void; ignored: boolean; stack: string; }	Warning to remember if developer forget to call the startWatch.
domProxyOption	protected	Partial<DOMProxyOptions<Before, After>>	The dom proxy option used in DOMProxy()
findNodeFromListByKey	protected	(list: readonly T[], keys: readonly unknown[]) => (key: unknown) => T | null	Find node from the given list by key
firstDOMProxy	readonly	T extends Node ? DOMProxy<T, Before, After> : never	This DOMProxy always point to the first node in the LiveSelector
isWatching	protected	boolean	Is the watcher running
keyComparer	protected	(a: unknown, b: unknown) => boolean	Compare between key and key, in case of you don't want the default behavior
lastCallbackMap	protected	Map<unknown, useForeachReturns<T>>	Saved callback map of last watch
lastDOMProxyMap	protected	Map<unknown, DOMProxy<any, Before, After>>	Saved DOMProxy of last watch
lastKeyList	protected	readonly unknown[]	Found key list of last watch
lastNodeList	protected	readonly T[]	Found Node list of last watch
liveSelector	protected readonly	LiveSelector<T, SingleMode>	The liveSelector that this object holds.
mapNodeToKey	protected	(node: T, index: number, arr: readonly T[]) => unknown	Map Node -> Key, in case of you don't want the default behavior
requestIdleCallback	protected readonly	typeof requestIdleCallback	window.requestIdleCallback, or polyfill.
scheduleWatcherCheck	protected	() => void	Schedule a watcher check
singleMode	protected readonly	boolean	Is the single mode is on.
singleModeCallback?	protected	useForeachReturns<T>	(Optional) Callback for single mode
singleModeHasLastValue	protected	boolean	Does it has a last iteration value in single mode?
singleModeLastValue?	protected	T	(Optional) Last iteration value for single mode
useForeachFn?	protected	Parameters<Watcher<T, any, any, any>['useForeach']>[0]	(Optional) Saved useForeach
valueComparer	protected	(a: T, b: T) => boolean	Compare between value and value, in case of you don't want the default behavior

Methods

Method	Modifiers	Description
addListener(type, callback, options)
assignKeys(keyAssigner)		To help identify same nodes in different iteration, you need to implement a map function that map node to key If the key is changed, the same node will call through forEachRemove then forEach
defaultStarterForThen()	protected
dismissSingleModeWarning()		Dismiss the warning that let you enable single mode but the warning is false positive.
getDOMProxyByKey(key)		Get DOMProxy by key. DOMProxy will be unavailable if it is deleted
omitWarningForForgetWatch()		If you're expecting Watcher may not be called, call this function, this will omit the warning.
omitWarningForRepeatedKeys()		If you're expecting repeating keys, call this function, this will omit the warning.
removeListener(type, callback)
setComparer(keyComparer, valueComparer)		To help identify same nodes in different iteration, you need to implement a map function to compare node and key You probably don't need this.
setDOMProxyOption(option)		Set option for DOMProxy
startWatch(args)		Let the watcher start to watching
stopWatch(args)		Stop the watcher
then(onfulfilled, onrejected, options)		Start the watcher, once it emitted data, stop watching.
useForeach(forEach)		Just like React hooks. Provide callbacks for each node changes.