tsuite
Version:
A collection of useful utility functions, All fully typed and documented
31 lines (30 loc) • 1.02 kB
JavaScript
/**
* tsuite v0.7.2
* tijn.dev
* @license MIT
**/
//#region src/map-elements-by-id.ts
/**
* Returns an object mapping each query string to the corresponding HTMLElement
* (or null) found by `id`. The object keys are in PascalCase and prefixed with "el".
*
* @template T - A tuple of string query names in kebab-case.
* @param {...T} queries - The list of id attribute names (in kebab-case) to query.
* @returns {Elements<T>} An object with keys in the form `el<PascalCaseQuery>` and
* values as the corresponding HTMLElement or null.
*
* @example
* const els = mapElementsById('foo-bar', 'baz');
* // els.elFooBar -> HTMLElement | null (for id="foo-bar")
* // els.elBaz -> HTMLElement | null (for id="baz")
*/
function mapElementsById(...queries) {
const elements = {};
for (const query of queries) {
const prop = "el" + query.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
elements[prop] = document.getElementById(query);
}
return elements;
}
//#endregion
export { mapElementsById };