css-selector.ts

/**
 * You may copy, distribute and modify the software
 * as long as you track changes/dates in source files.
 * 
 * Guilherme Siquinelli <[email protected]>
 * Copyleft (ↄ) 2022 - LGPL-3.0
 */

export type IdSelector =
  | `#${string}`
  | `#${string} ${string}`
  | `#${string} > ${string}`
  | `${string}#${string}`

export type ClassSelector =
  | `.${string}`
  | `.${string} .${string}`
  | `.${string} > .${string}`
  | `${string}.${string}`

export type AttributeSelector =
  | `[${string}]`
  | `[${string}] ${string}`
  | `[${string}] > ${string}`
  | `${string}[${string}]`

query.ts

/**
 * You may copy, distribute and modify the software
 * as long as you track changes/dates in source files.
 * 
 * Guilherme Siquinelli <[email protected]>
 * Copyleft (ↄ) 2022 - LGPL-3.0
 */

export function query<Tag extends keyof SVGElementTagNameMap>(
  selector: Tag | AttributeSelector | ClassSelector | IdSelector,
  parentElement?: HTMLElement
): SVGElementTagNameMap[Tag]

export function query<Tag extends keyof HTMLElementTagNameMap>(
  selector: Tag | AttributeSelector | ClassSelector | IdSelector,
  parentElement?: HTMLElement
): HTMLElementTagNameMap[Tag]

export function query<
  Tag extends keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap
>(
  selector: Tag | AttributeSelector | ClassSelector | IdSelector,
  parentElement: HTMLElement | SVGElement = document.body
) {
  return parentElement.querySelector(selector)
}

export function queryAll<Tag extends keyof SVGElementTagNameMap>(
  selector: Tag | AttributeSelector | ClassSelector | IdSelector,
  parentElement?: HTMLElement
): NodeListOf<SVGElementTagNameMap[Tag]>

export function queryAll<Tag extends keyof HTMLElementTagNameMap>(
  selector: Tag | AttributeSelector | ClassSelector | IdSelector,
  parentElement?: HTMLElement
): NodeListOf<HTMLElementTagNameMap[Tag]>

export function queryAll<
  Tag extends keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap
>(
  selector: Tag | AttributeSelector | ClassSelector | IdSelector,
  parentElement: HTMLElement | SVGElement = document.body
) {
  return parentElement.querySelectorAll(selector)
}