Function observe

source/helpers/selector-observer.tsx:29–113

(
	selectors: Selector | readonly Selector[],
	listener: ObserverListener<ExpectedElement>,
	{signal, stopOnDomReady, once, ancestor}: Options = {},
)

});

export default function observe<
	Selector extends string,
	ExpectedElement extends ParseSelector<Selector, HTMLElement | SVGElement>,
>(
	selectors: Selector | readonly Selector[],
	listener: ObserverListener<ExpectedElement>,
	{signal, stopOnDomReady, once, ancestor}: Options = {},
): void {
	if (signal?.aborted) {
		return;
	}

	if (stopOnDomReady) {
		const delayedDomReady = signalFromPromise((async () => {
			await domLoaded;
			await delay(100); // Allow the animation and events to complete; Also adds support for ajaxed pages
		})());

		signal = mergeSignals(signal, delayedDomReady);
	}

	let onceController: AbortController | undefined;
	if (once) {
		onceController = new AbortController();
		signal = mergeSignals(signal, onceController.signal);
	}

	const selector = typeof selectors === 'string' ? selectors : selectors.join(',\n');
	const seenMark = 'rgh-seen-' + getCallerId(ancestor);

	registerAnimation();

	const rule = document.createElement('style');
	// Enable when/if needed
	// if (isDevelopmentVersion()) {
	// 	// For debuggability
	// 	rule.setAttribute('s', selector);
	// }

	rule.textContent = css`
		:where(${selector}):not(.${seenMark}) {
			animation: 1ms ${animation};
		}
	`;
	document.body.prepend(rule);
	signal?.addEventListener('abort', () => {
		rule.remove();
	});

	let wasCalled = false;
	// Capture stack outside
	const currentFeature = parseFeatureNameFromStack();
	(async () => {
		const {logging} = await optionsStorage.getAll();
		if (!logging) {
			return;
		}