Add elementReady-like helper for DOM detections

[fregante]

Sometimes we want to test whether a page matches before it's done downloading, this can be done by passing a selector to element-ready.

I have 2 ideas:

Static definitions

Instead of being just a function, we can define the detections as a list of constraints like:

- const canUserEditOrg = (url) => isOrganizationProfile() && exists('.pagehead-tabs-item[href$="/settings/profile"]')
+ const canUserEditOrgDefinition = [isOrganizationProfile, '.pagehead-tabs-item[href$="/settings/profile"]']
+ export canUserEditOrg = solveConstraints(canUserEditOrgDefinition);
+ export canUserEditOrgAsync = solveConstraintsAsync(canUserEditOrgDefinition);

But this gets wordy FAST

Duplicate functions

  const canUserEditOrg = (url) => isOrganizationProfile() && exists('.pagehead-tabs-item[href$="/settings/profile"]')
+ const canUserEditOrgAsync = async (url) => isOrganizationProfile() && await existsReady('.pagehead-tabs-item[href$="/settings/profile"]')

[fregante]

Wrapper idea

ElementReady is nothing but a requestAnimationFrame-based loop that calls querySelector until found. This means we can offer a simple wrapper that does this with any detection:

import {wait, canEditSidebar} from '';

function init() {
  if(!await wait(canEditSidebar)) 
    return false
}

• Pure DOM-based detections would be perfect this way;
• Pure URL-based detections wouldn’t need it;
• Mixed detections would unnecessarily test the URL every time, but probably we don’t have to worry about the “performance impact” of this

Alternatively the detections could internally replace exists with an async version, but it would be impossible to effectively handle multiple checks in the same detection:

await canEditSidebar({async: true})

[fregante]

Something like:

export async function wait(detection) {
	while (!detection() && document isn't ready) {
		await Promise(requestAnimationFrame)
	}

	return detection();
}