@remote-dom/polyfill 1.5.1 → 1.6.0

package/source/selectors.ts

@@ -1,43 +1,112 @@
-import {CHILD, NEXT, PARENT, PREV} from './constants.ts';
+import {
+  CHILD,
+  NEXT,
+  PARENT,
+  PREV,
+  HTML_NAMESPACE,
+  asciiLowercase,
+  splitOnASCIIWhitespace,
+} from './constants.ts';
 import {isElementNode} from './shared.ts';
+import {NodeList} from './NodeList.ts';
+import {createDOMException} from './dom-exception.ts';
 
 import type {Node} from './Node.ts';
 import type {Element} from './Element.ts';
 import type {ParentNode} from './ParentNode.ts';
 
-const enum Combinator {
-  Descendant,
-  Child,
-  Sibling,
-  Adjacent,
-  Inner,
-}
+export const COMBINATOR_DESCENDANT = 0;
+export const COMBINATOR_CHILD = 1;
+export const COMBINATOR_SIBLING = 2;
+export const COMBINATOR_ADJACENT = 3;
+export const COMBINATOR_INNER = 4;
 
-const enum MatcherType {
-  Unknown,
-  Element,
-  Id,
-  Class,
-  Attribute,
-  Pseudo,
-  Function,
-}
+export type Combinator =
+  | typeof COMBINATOR_DESCENDANT
+  | typeof COMBINATOR_CHILD
+  | typeof COMBINATOR_SIBLING
+  | typeof COMBINATOR_ADJACENT
+  | typeof COMBINATOR_INNER;
+
+export const MATCHER_UNKNOWN = 0;
+export const MATCHER_ELEMENT = 1;
+export const MATCHER_ID = 2;
+export const MATCHER_CLASS = 3;
+export const MATCHER_ATTRIBUTE = 4;
+export const MATCHER_PSEUDO = 5;
+export const MATCHER_FUNCTION = 6;
+export const MATCHER_SCOPE = 7;
 
-interface Part {
+export type MatcherType =
+  | typeof MATCHER_UNKNOWN
+  | typeof MATCHER_ELEMENT
+  | typeof MATCHER_ID
+  | typeof MATCHER_CLASS
+  | typeof MATCHER_ATTRIBUTE
+  | typeof MATCHER_PSEUDO
+  | typeof MATCHER_FUNCTION
+  | typeof MATCHER_SCOPE;
+
+export interface Part {
   combinator: Combinator;
   matchers: Matcher[];
 }
 
-interface Matcher {
+export interface Matcher {
   type: MatcherType;
   name: string;
   value?: string;
 }
 
-const ELEMENT_SELECTOR_TEST = /[a-z]/;
+const SUPPORTED_IDENTIFIER_TEST =
+  /^(?:--|-?[A-Za-z_\u0080-\u{10FFFF}])[A-Za-z0-9_\u0080-\u{10FFFF}-]*$/u;
+
+function readFunctionArgument(
+  selector: string,
+  start: number,
+): [string, number] {
+  let depth = 1;
+  let quote: string | null = null;
+
+  for (let index = start; index < selector.length; index++) {
+    const character = selector[index]!;
+
+    if (quote) {
+      if (character === '\\') {
+        index++;
+      } else if (character === quote) {
+        quote = null;
+      }
+      continue;
+    }
+
+    if (character === '"' || character === "'") {
+      quote = character;
+    } else if (character === '(') {
+      depth++;
+    } else if (character === ')' && --depth === 0) {
+      return [selector.slice(start, index), index + 1];
+    }
+  }
+
+  return [selector.slice(start), selector.length];
+}
+
+function throwSelectorSyntaxError(selector: string): never {
+  throw createDOMException(
+    `Invalid or unsupported selector: "${selector}"`,
+    'SyntaxError',
+  );
+}
 
-export function querySelector(within: ParentNode, selector: string) {
-  const parts = parseSelector(selector);
+export function querySelector(
+  within: ParentNode,
+  selector: string | Matcher[],
+): Element | null {
+  const parts: Part[] =
+    typeof selector === 'string'
+      ? parseSelector(selector)
+      : [{combinator: COMBINATOR_INNER, matchers: selector}];
   let result: Element | null = null;
 
   const child = within[CHILD];
@@ -50,9 +119,15 @@ export function querySelector(within: ParentNode, selector: string) {
   return result;
 }
 
-export function querySelectorAll(within: ParentNode, selector: string) {
-  const parts = parseSelector(selector);
-  const results: Element[] = [];
+export function querySelectorAll(
+  within: ParentNode,
+  selector: string | Matcher[],
+): NodeList<Element> {
+  const parts: Part[] =
+    typeof selector === 'string'
+      ? parseSelector(selector)
+      : [{combinator: COMBINATOR_INNER, matchers: selector}];
+  const results = new NodeList<Element>();
 
   const child = within[CHILD];
   if (child && parts[0]!.matchers.length) {
@@ -63,108 +138,221 @@ export function querySelectorAll(within: ParentNode, selector: string) {
   return results;
 }
 
-export function parseSelector(selector: string) {
-  let part: Part = {combinator: Combinator.Inner, matchers: []};
+export function parseSelector(
+  selector: string,
+  insideHas = false,
+  allowLeadingCombinator = false,
+) {
+  let part: Part = {combinator: COMBINATOR_INNER, matchers: []};
   const parts = [part];
   const tokenizer =
-    /\s*?([>\s+~]?)\s*?(?:(?:\[\s*([^\]=]+)(?:=(['"])(.*?)\3)?\s*\])|([#.]?)([^\s#.[>:+~]+)|:(\w+)(?:\((.*?)\))?)/gi;
+    /[\t\n\f\r ]*?([>\t\n\f\r +~]?)[\t\n\f\r ]*?(?:(?:\[[\t\n\f\r ]*([^\]=\t\n\f\r ]+)[\t\n\f\r ]*(?:=[\t\n\f\r ]*(?:(['"])(.*?)\3|([^\]\t\n\f\r ]+)))?[\t\n\f\r ]*(?:\]|$))|([#.]?)([^\t\n\f\r #.[>:+~()]+)|:(\w+)(\()?)/gi;
+  const normalizedSelector = selector.replace(
+    /^[\t\n\f\r ]+|[\t\n\f\r ]+$/g,
+    '',
+  );
+  if (normalizedSelector === '') throwSelectorSyntaxError(selector);
+
+  let consumed = 0;
   let token;
-  while ((token = tokenizer.exec(selector))) {
-    // [1]: ancestor/parent/sibling/adjacent
+  while ((token = tokenizer.exec(normalizedSelector))) {
+    if (token.index !== consumed) throwSelectorSyntaxError(selector);
+
+    // [1]: ancestor/ parent/ sibling/ adjacent
     // [2]: attribute name
-    // [4]: attribute value
-    // [5]: id/class sigil
-    // [6]: id/class name
-    // [7]: :pseudo/:function() name
-    // [8]: :function(argument) value
+    // [3]/[4]: quoted attribute value
+    // [5]: unquoted attribute value
+    // [6]: id/class sigil
+    // [7]: id/class/type name
+    // [8]: :pseudo/:function() name
+    // [9]: :function opening parenthesis
     if (token[1]) {
-      // Update the combinator on the (now parent) Part:
-      if (token[1] === '>') part.combinator = Combinator.Child;
-      else if (token[1] === '+') part.combinator = Combinator.Adjacent;
-      else if (token[1] === '~') part.combinator = Combinator.Sibling;
-      else part.combinator = Combinator.Descendant;
-      // Add a new Part for the next selector parts:
-      part = {combinator: Combinator.Inner, matchers: []};
+      if (
+        part.matchers.length === 0 &&
+        !(allowLeadingCombinator && parts.length === 1)
+      ) {
+        throwSelectorSyntaxError(selector);
+      }
+
+      if (token[1] === '>') part.combinator = COMBINATOR_CHILD;
+      else if (token[1] === '+') part.combinator = COMBINATOR_ADJACENT;
+      else if (token[1] === '~') part.combinator = COMBINATOR_SIBLING;
+      else part.combinator = COMBINATOR_DESCENDANT;
+      part = {combinator: COMBINATOR_INNER, matchers: []};
       parts.push(part);
     }
 
-    let type = MatcherType.Unknown;
+    const name = token[8] ? asciiLowercase(token[8]) : (token[2] || token[7])!;
+    const isTypeSelector = token[7] != null && !token[6];
+    if (isTypeSelector && part.matchers.length > 0) {
+      throwSelectorSyntaxError(selector);
+    }
+
+    let type: MatcherType;
+    let value = token[4] ?? token[5] ?? token[7];
     if (token[2]) {
-      type = MatcherType.Attribute;
-    } else if (token[5]) {
-      type = token[5] === '#' ? MatcherType.Id : MatcherType.Class;
-    } else if (token[7]) {
-      type = token[8] == null ? MatcherType.Pseudo : MatcherType.Function;
+      if (!SUPPORTED_IDENTIFIER_TEST.test(name)) {
+        throwSelectorSyntaxError(selector);
+      }
+
+      const unquotedValue = token[5];
+      const openingQuote = unquotedValue?.[0];
+      if (token[3] == null && (openingQuote === '"' || openingQuote === "'")) {
+        const valueOffset = token[0].lastIndexOf(unquotedValue!);
+        value = normalizedSelector.slice(token.index + valueOffset + 1);
+        tokenizer.lastIndex = normalizedSelector.length;
+      } else if (
+        unquotedValue != null &&
+        !SUPPORTED_IDENTIFIER_TEST.test(unquotedValue)
+      ) {
+        throwSelectorSyntaxError(selector);
+      }
+      type = MATCHER_ATTRIBUTE;
     } else if (token[6]) {
-      if (token[6] === '*') {
-        type = MatcherType.Unknown; // Universal selector matches all
-      } else if (ELEMENT_SELECTOR_TEST.test(token[6])) {
-        type = MatcherType.Element;
+      if (!SUPPORTED_IDENTIFIER_TEST.test(name)) {
+        throwSelectorSyntaxError(selector);
       }
+      type = token[6] === '#' ? MATCHER_ID : MATCHER_CLASS;
+    } else if (token[8]) {
+      type = token[9] == null ? MATCHER_PSEUDO : MATCHER_FUNCTION;
+    } else if (token[7] === '*') {
+      type = MATCHER_UNKNOWN;
+    } else if (token[7] && SUPPORTED_IDENTIFIER_TEST.test(token[7])) {
+      type = MATCHER_ELEMENT;
+    } else {
+      throwSelectorSyntaxError(selector);
     }
-    part.matchers.push({
-      type,
-      name: (token[2] || token[6] || token[7])!,
-      value: token[4] ?? token[6] ?? token[8],
-    });
+
+    if (token[9]) {
+      [value, tokenizer.lastIndex] = readFunctionArgument(
+        normalizedSelector,
+        tokenizer.lastIndex,
+      );
+
+      if (name !== 'has' && name !== 'not') {
+        throwSelectorSyntaxError(selector);
+      }
+      if (name === 'has' && insideHas) throwSelectorSyntaxError(selector);
+      parseSelector(value, insideHas || name === 'has', name === 'has');
+    } else if (type === MATCHER_PSEUDO) {
+      throwSelectorSyntaxError(selector);
+    }
+
+    part.matchers.push({type, name, value});
+    consumed = tokenizer.lastIndex;
   }
+
+  if (consumed !== normalizedSelector.length || part.matchers.length === 0) {
+    throwSelectorSyntaxError(selector);
+  }
+
   return parts;
 }
 
 function matchesSelector(element: Element, selector: string) {
   const parsed = parseSelector(selector);
-  let part: Part | undefined;
-  while ((part = parsed.pop())) {
-    if (!matchesSelectorPart(element, part)) return false;
+  return parsed[0]?.matchers.length
+    ? matchesSelectorRecursive(element, parsed)
+    : false;
+}
+
+function matchesRelativeSelector(scope: Element, selector: string) {
+  const parts = parseSelector(selector, true, true);
+  const first = parts[0]!;
+  if (parts.length === 1 && first.matchers.length === 0) return false;
+
+  let leadingCombinator = COMBINATOR_DESCENDANT;
+  const scopeMatcher: Matcher = {type: MATCHER_SCOPE, name: ':scope'};
+  if (first.matchers.length === 0) {
+    leadingCombinator = first.combinator;
+    first.matchers.push(scopeMatcher);
+  } else {
+    parts.unshift({
+      combinator: COMBINATOR_DESCENDANT,
+      matchers: [scopeMatcher],
+    });
   }
-  return true;
+
+  if (parts.some(({matchers}) => matchers.length === 0)) return false;
+
+  const root =
+    leadingCombinator === COMBINATOR_ADJACENT ||
+    leadingCombinator === COMBINATOR_SIBLING
+      ? scope[NEXT]
+      : scope[CHILD];
+  if (!root) return false;
+
+  let matched = false;
+  walkNodesForSelector(
+    root,
+    parts,
+    () => {
+      matched = true;
+      return false;
+    },
+    scope,
+  );
+  return matched;
 }
 
 function walkNodesForSelector(
   node: Node,
   parts: Part[],
   callback: (node: Element) => boolean | void,
+  scope?: Element,
 ) {
-  if (isElementNode(node)) {
-    if (matchesSelectorRecursive(node, parts)) {
-      if (callback(node) === false) return false;
-    }
-    const child = node[CHILD];
-    if (child && walkNodesForSelector(child, parts, callback) === false) {
-      return false;
+  const pendingSiblings: Node[] = [];
+  let current: Node | null = node;
+
+  while (current) {
+    if (isElementNode(current)) {
+      if (matchesSelectorRecursive(current, parts, scope)) {
+        if (callback(current) === false) return false;
+      }
+
+      const child: Node | null = current[CHILD];
+      if (child) {
+        const sibling = current[NEXT];
+        if (sibling) pendingSiblings.push(sibling);
+        current = child;
+        continue;
+      }
     }
+
+    current = current[NEXT] ?? pendingSiblings.pop() ?? null;
   }
-  const next = node[NEXT];
-  if (next && walkNodesForSelector(next, parts, callback) === false) {
-    return false;
-  }
+
   return true;
 }
 
-function matchesSelectorRecursive(element: Element, parts: Part[]): boolean {
+function matchesSelectorRecursive(
+  element: Element,
+  parts: Part[],
+  scope?: Element,
+): boolean {
   const {combinator, matchers} = parts[parts.length - 1]!;
-  if (combinator === Combinator.Inner) {
-    if (!matchesSelectorMatcher(element, matchers)) return false;
+  if (combinator === COMBINATOR_INNER) {
+    if (!matchesSelectorMatcher(element, matchers, scope)) return false;
     const pp = parts.slice(0, -1);
-    return pp.length === 0 || matchesSelectorRecursive(element, pp);
+    return pp.length === 0 || matchesSelectorRecursive(element, pp, scope);
   }
   const link =
-    combinator === Combinator.Child || combinator === Combinator.Descendant
+    combinator === COMBINATOR_CHILD || combinator === COMBINATOR_DESCENDANT
       ? PARENT
       : PREV;
   let ref = element[link];
   if (!ref) return false;
 
   if (
-    combinator === Combinator.Descendant ||
-    combinator === Combinator.Sibling
+    combinator === COMBINATOR_DESCENDANT ||
+    combinator === COMBINATOR_SIBLING
   ) {
     // For descendant/sibling combinators, search through all ancestors/siblings
     while (ref) {
-      if (isElementNode(ref) && matchesSelectorMatcher(ref, matchers)) {
+      if (isElementNode(ref) && matchesSelectorMatcher(ref, matchers, scope)) {
         const pp = parts.slice(0, -1);
         if (pp.length === 0) return true;
-        if (matchesSelectorRecursive(element, pp)) return true;
+        if (matchesSelectorRecursive(ref, pp, scope)) return true;
       }
       ref = ref[link];
     }
@@ -172,7 +360,7 @@ function matchesSelectorRecursive(element: Element, parts: Part[]): boolean {
   } else {
     // For child/adjacent combinators, check only the immediate parent/sibling
     // For sibling combinators, skip non-element siblings
-    if (combinator === Combinator.Adjacent && !isElementNode(ref)) {
+    if (combinator === COMBINATOR_ADJACENT && !isElementNode(ref)) {
       // Skip to next element sibling
       while (ref && !isElementNode(ref)) {
         ref = ref[link];
@@ -180,89 +368,64 @@ function matchesSelectorRecursive(element: Element, parts: Part[]): boolean {
       if (!ref) return false;
     }
 
-    if (!isElementNode(ref) || !matchesSelectorMatcher(ref, matchers)) {
+    if (!isElementNode(ref) || !matchesSelectorMatcher(ref, matchers, scope)) {
       return false;
     }
     const pp = parts.slice(0, -1);
-    return pp.length === 0 || matchesSelectorRecursive(element, pp);
+    return pp.length === 0 || matchesSelectorRecursive(ref, pp, scope);
   }
 }
 
-function matchesSelectorPart(element: Element, {combinator, matchers}: Part) {
-  if (combinator === Combinator.Inner) {
-    return matchesSelectorMatcher(element, matchers);
-  }
-  const link =
-    combinator === Combinator.Child || combinator === Combinator.Descendant
-      ? PARENT
-      : PREV;
-  let ref = element[link];
-  if (!ref) return false;
-
-  // For sibling combinators, skip non-element siblings
-  if (combinator === Combinator.Adjacent && !isElementNode(ref)) {
-    while (ref && !isElementNode(ref)) {
-      ref = ref[link];
-    }
-    if (!ref) return false;
-  }
-
-  if (!isElementNode(ref) || !matchesSelectorMatcher(ref, matchers)) {
-    return false;
-  }
-
-  if (
-    combinator === Combinator.Descendant ||
-    combinator === Combinator.Sibling
-  ) {
-    while ((ref = ref[link])) {
-      if (isElementNode(ref) && matchesSelectorMatcher(ref, matchers))
-        return true;
-    }
-  }
-  return true;
+function getSelectorAttribute(element: Element, name: string) {
+  return element.getAttributeNS(
+    null,
+    element.namespaceURI === HTML_NAMESPACE ? asciiLowercase(name) : name,
+  );
 }
 
 function matchesSelectorMatcher(
   element: Element | null,
   matcher: Matcher | Matcher[],
+  scope?: Element,
 ) {
   if (!element) return false;
   if (Array.isArray(matcher)) {
     for (const single of matcher) {
-      if (matchesSelectorMatcher(element, single) === false) return false;
+      if (matchesSelectorMatcher(element, single, scope) === false) {
+        return false;
+      }
     }
     return true;
   }
   const {type, name, value} = matcher;
   switch (type) {
-    case MatcherType.Unknown:
+    case MATCHER_UNKNOWN:
       return name === '*'; // Universal selector
-    case MatcherType.Element:
-      return element.localName === name;
-    case MatcherType.Id:
-      return element.getAttribute('id') === name;
-    case MatcherType.Class:
-      const classAttr = element.getAttribute('class');
+    case MATCHER_ELEMENT:
+      return element.namespaceURI === HTML_NAMESPACE
+        ? element.localName === asciiLowercase(name)
+        : element.localName === name;
+    case MATCHER_ID:
+      return getSelectorAttribute(element, 'id') === name;
+    case MATCHER_CLASS:
+      const classAttr = getSelectorAttribute(element, 'class');
       if (!classAttr) return false;
-      return classAttr.split(/\s+/).includes(name);
-    case MatcherType.Attribute:
-      return value == null
-        ? element.hasAttribute(name)
-        : element.getAttribute(name) === value;
-    case MatcherType.Pseudo:
-      switch (name) {
-        default:
-          throw Error(`Pseudo :${name} not implemented`);
-      }
-    case MatcherType.Function:
+      return splitOnASCIIWhitespace(classAttr).includes(name);
+    case MATCHER_ATTRIBUTE:
+      const attribute = getSelectorAttribute(element, name);
+      return value == null ? attribute != null : attribute === value;
+    case MATCHER_SCOPE:
+      return element === scope;
+    case MATCHER_PSEUDO:
+      throwSelectorSyntaxError(`:${name}`);
+    case MATCHER_FUNCTION:
       switch (name) {
         case 'has':
-          return matchesSelector(element, value || '');
+          return matchesRelativeSelector(element, value || '');
         case 'not':
           return !matchesSelector(element, value || '');
         default:
-          throw Error(`Function :${name}(${value}) not implemented`);
+          throwSelectorSyntaxError(`:${name}(${value})`);
       }
   }
   return false;