feat: smarter querySelector and querySelectorAll

package.json

@@ -96,6 +96,11 @@
       "types": "./dist/storage.d.ts",
       "import": "./dist/storage.mjs",
       "default": "./dist/storage.js"
+    },
+    "./query-selector": {
+      "types": "./dist/query-selector.d.ts",
+      "import": "./dist/query-selector.mjs",
+      "default": "./dist/query-selector.js"
     }
   },
   "keywords": [],

src/entrypoints/query-selector.d.ts

@@ -0,0 +1,84 @@
+type Split<
+  S extends string,
+  D extends string,
+> = S extends `${infer T}${D}${infer U}` ? [T, ...Split<U, D>] : [S];
+type TakeLast<V> = V extends []
+  ? never
+  : V extends [string]
+    ? V[0]
+    : V extends [string, ...infer R]
+      ? TakeLast<R>
+      : never;
+type TrimLeft<V extends string> = V extends ` ${infer R}` ? TrimLeft<R> : V;
+type TrimRight<V extends string> = V extends `${infer R} ` ? TrimRight<R> : V;
+type Trim<V extends string> = TrimLeft<TrimRight<V>>;
+type StripModifier<
+  V extends string,
+  M extends string,
+> = V extends `${infer L}${M}${infer A}` ? L : V;
+type StripModifiers<V extends string> = StripModifier<
+  StripModifier<StripModifier<StripModifier<V, ".">, "#">, "[">,
+  ":"
+>;
+type TakeLastAfterToken<V extends string, T extends string> = StripModifiers<
+  TakeLast<Split<Trim<V>, T>>
+>;
+type GetLastElementName<V extends string> = TakeLastAfterToken<
+  TakeLastAfterToken<
+    TakeLastAfterToken<
+      TakeLastAfterToken<TakeLastAfterToken<V, " ">, ">">,
+      "+"
+    >,
+    "~"
+  >,
+  "||"
+>;
+type GetEachElementName<V, L extends string[] = []> = V extends []
+  ? L
+  : V extends [string]
+    ? [...L, GetLastElementName<V[0]>]
+    : V extends [string, ...infer R]
+      ? GetEachElementName<R, [...L, GetLastElementName<V[0]>]>
+      : [];
+type GetElementNames<V extends string> = GetEachElementName<Split<V, ",">>;
+type ElementByName<V extends string> = V extends keyof HTMLElementTagNameMap
+  ? HTMLElementTagNameMap[V]
+  : V extends keyof SVGElementTagNameMap
+    ? SVGElementTagNameMap[V]
+    : V extends keyof MathMLElementTagNameMap
+      ? MathMLElementTagNameMap[V]
+      : V extends keyof HTMLElementDeprecatedTagNameMap
+        ? HTMLElementDeprecatedTagNameMap[V]
+        : Element;
+type MatchEachElement<V, L extends Element | null = null> = V extends []
+  ? L
+  : V extends [string]
+    ? L | ElementByName<V[0]>
+    : V extends [string, ...infer R]
+      ? MatchEachElement<R, L | ElementByName<V[0]>>
+      : L;
+type MatchEachElements<V, L extends Element = Element> = V extends []
+  ? NodeListOf<L>
+  : V extends [string]
+    ? NodeListOf<ElementByName<V[0]>>
+    : V extends [string, ...infer R]
+      ? NodeListOf<MatchEachElement<R, ElementByName<V[0]>>>
+      : NodeListOf<L>;
+
+type QueryResult<T extends string> = MatchEachElement<GetElementNames<T>>;
+type QueryAllResult<T extends string> = MatchEachElements<GetElementNames<T>>;
+
+interface ParentNode extends Node {
+  /**
+   * Returns the first element that is a descendant of node that matches selectors.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/querySelector)
+   */
+  querySelector<T extends string>(selectors: T): QueryResult<T>;
+  /**
+   * Returns all element descendants of node that match selectors.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/querySelectorAll)
+   */
+  querySelectorAll<T extends string>(selectors: T): QueryAllResult<T>;
+}

src/entrypoints/recommended.d.ts

@@ -8,3 +8,4 @@
 /// <reference path="map-has.d.ts" />
 /// <reference path="array-index-of.d.ts" />
 /// <reference path="promise-catch.d.ts" />
+/// <reference path="query-selector.d.ts" />

src/tests/query-selector.ts

@@ -0,0 +1,51 @@
+import { doNotExecute, Equal, Expect } from "./utils";
+
+doNotExecute(() => {
+  const a = document.querySelector("div.banner > a.call-to-action");
+  const b = document.querySelector("input,div");
+  const c = document.querySelector('circle[cx="150"]');
+  const d = document.querySelector("button#buy-now");
+  const e = document.querySelector("section p:first-of-type");
+  const f = document.querySelector("main>section>svg>path");
+  const g = document.querySelector("div~span");
+  const h = document.querySelector("col||td");
+  const i = document.querySelector("#app");
+  const j = document.querySelector(".flex");
+
+  type testA = Expect<Equal<HTMLAnchorElement | null, typeof a>>;
+  type testB = Expect<
+    Equal<HTMLInputElement | HTMLDivElement | null, typeof b>
+  >;
+  type testC = Expect<Equal<SVGCircleElement | null, typeof c>>;
+  type testD = Expect<Equal<HTMLButtonElement | null, typeof d>>;
+  type testE = Expect<Equal<HTMLParagraphElement | null, typeof e>>;
+  type testF = Expect<Equal<SVGPathElement | null, typeof f>>;
+  type testG = Expect<Equal<HTMLSpanElement | null, typeof g>>;
+  type testH = Expect<Equal<HTMLTableCellElement | null, typeof h>>;
+  type testI = Expect<Equal<Element | null, typeof i>>;
+  type testJ = Expect<Equal<Element | null, typeof j>>;
+
+  const aa = document.querySelectorAll("div.banner > a.call-to-action");
+  const bb = document.querySelectorAll("input,div");
+  const cc = document.querySelectorAll('circle[cx="150"]');
+  const dd = document.querySelectorAll("button#buy-now");
+  const ee = document.querySelectorAll("section p:first-of-type");
+  const ff = document.querySelectorAll("main>section>svg>path");
+  const gg = document.querySelectorAll("div~span");
+  const hh = document.querySelectorAll("col||td");
+  const ii = document.querySelectorAll("#app");
+  const jj = document.querySelectorAll(".flex");
+
+  type testAA = Expect<Equal<NodeListOf<HTMLAnchorElement>, typeof aa>>;
+  type testBB = Expect<
+    Equal<NodeListOf<HTMLInputElement | HTMLDivElement>, typeof bb>
+  >;
+  type testCC = Expect<Equal<NodeListOf<SVGCircleElement>, typeof cc>>;
+  type testDD = Expect<Equal<NodeListOf<HTMLButtonElement>, typeof dd>>;
+  type testEE = Expect<Equal<NodeListOf<HTMLParagraphElement>, typeof ee>>;
+  type testFF = Expect<Equal<NodeListOf<SVGPathElement>, typeof ff>>;
+  type testGG = Expect<Equal<NodeListOf<HTMLSpanElement>, typeof gg>>;
+  type testHH = Expect<Equal<NodeListOf<HTMLTableCellElement>, typeof hh>>;
+  type testII = Expect<Equal<NodeListOf<Element>, typeof ii>>;
+  type testJJ = Expect<Equal<NodeListOf<Element>, typeof jj>>;
+});