@asamuzakjp/dom-selector 8.0.1 → 8.1.1

package/src/js/utility.js

@@ -4,38 +4,25 @@
 
 /* import */
 import bidiFactory from 'bidi-js';
-import * as cssTree from 'css-tree';
 import isCustomElementName from 'is-potential-custom-element-name';
 
 /* constants */
 import {
-  ATRULE,
-  COMBO,
-  COMPOUND_I,
-  DESCEND,
+  CLASS_SELECTOR,
   DOCUMENT_FRAGMENT_NODE,
   DOCUMENT_NODE,
   DOCUMENT_POSITION_CONTAINS,
   DOCUMENT_POSITION_PRECEDING,
   ELEMENT_NODE,
-  HAS_COMPOUND,
+  ID_SELECTOR,
   INPUT_BUTTON,
   INPUT_EDIT,
   INPUT_LTR,
   INPUT_TEXT,
-  KEYS_LOGICAL,
-  LOGIC_COMPLEX,
-  LOGIC_COMPOUND,
-  N_TH,
-  PSEUDO_CLASS,
-  RULE,
-  SCOPE,
-  SELECTOR_LIST,
-  TAG_TYPE,
-  TARGET_ALL,
-  TARGET_FIRST,
+  SHOW_ELEMENT,
   TEXT_NODE,
   TYPE_FROM,
+  TYPE_SELECTOR,
   TYPE_TO
 } from './constant.js';
 const KEYS_DIR_AUTO = new Set([...INPUT_BUTTON, ...INPUT_TEXT, 'hidden']);
@@ -58,105 +45,9 @@ const KEYS_NODE_FOCUSABLE_SVG = new Set([
   'symbol',
   'title'
 ]);
-const REG_ATTR_SIMPLE = /^\[[A-Z\d-]{1,255}(?:="?[A-Z\d\s-]{1,255}"?)?\]$/i;
-const REG_TAG_SIMPLE = new RegExp(`^(?:${TAG_TYPE})$`);
-const REG_EXCLUDE_BASIC =
-  /[|\\]|::|[^\u0021-\u007F\s]|\[\s*[\w$*=^|~-]+(?:(?:"[\w$*=^|~\s'-]+"|'[\w$*=^|~\s"-]+')?(?:\s+[\w$*=^|~-]+)+|"[^"\]]{1,255}|'[^'\]]{1,255})\s*\]|:(?:is|where)\(\s*\)/;
-const REG_COMPLEX = new RegExp(`${COMPOUND_I}${COMBO}${COMPOUND_I}`, 'i');
-const REG_DESCEND = new RegExp(`${COMPOUND_I}${DESCEND}${COMPOUND_I}`, 'i');
-const REG_LOGIC_COMPLEX = new RegExp(
-  `:(?!${PSEUDO_CLASS}|${N_TH}|${LOGIC_COMPLEX})`
-);
-const REG_LOGIC_COMPOUND = new RegExp(
-  `:(?!${PSEUDO_CLASS}|${N_TH}|${LOGIC_COMPOUND})`
-);
-const REG_LOGIC_HAS_COMPOUND = new RegExp(
-  `:(?!${PSEUDO_CLASS}|${N_TH}|${LOGIC_COMPOUND}|${HAS_COMPOUND})`
-);
-const REG_END_WITH_HAS = new RegExp(`:${HAS_COMPOUND}$`);
-const REG_WO_LOGICAL = new RegExp(`:(?!${PSEUDO_CLASS}|${N_TH})`);
 const REG_IS_HTML = /^(?:application\/xhtml\+x|text\/ht)ml$/;
 const REG_IS_XML =
   /^(?:application\/(?:[\w\-.]+\+)?|image\/[\w\-.]+\+|text\/)xml$/;
-const REG_COMBO = new RegExp(COMBO);
-const REG_ID = /#(\D[^#.*]+)/g;
-const REG_CLASS = /\.(\D[^#.*]+)/g;
-const REG_TAG = /^([^#.]+)/;
-
-/**
- * Manages state for extracting nested selectors from a CSS AST.
- */
-class SelectorExtractor {
-  constructor() {
-    this.selectors = [];
-    this.isScoped = false;
-  }
-
-  /**
-   * Walker enter function.
-   * @param {object} node - The AST node.
-   */
-  enter(node) {
-    switch (node.type) {
-      case ATRULE: {
-        if (node.name === 'scope') {
-          this.isScoped = true;
-        }
-        break;
-      }
-      case SCOPE: {
-        const { children, type } = node.root;
-        const arr = [];
-        if (type === SELECTOR_LIST) {
-          for (const child of children) {
-            const selector = cssTree.generate(child);
-            arr.push(selector);
-          }
-          this.selectors.push(arr);
-        }
-        break;
-      }
-      case RULE: {
-        const { children, type } = node.prelude;
-        const arr = [];
-        if (type === SELECTOR_LIST) {
-          let hasAmp = false;
-          for (const child of children) {
-            const selector = cssTree.generate(child);
-            if (this.isScoped && !hasAmp) {
-              hasAmp = /\x26/.test(selector);
-            }
-            arr.push(selector);
-          }
-          if (this.isScoped) {
-            if (hasAmp) {
-              this.selectors.push(arr);
-              /* FIXME:
-              } else {
-                this.selectors = arr;
-                this.isScoped = false;
-              */
-            }
-          } else {
-            this.selectors.push(arr);
-          }
-        }
-      }
-    }
-  }
-
-  /**
-   * Walker leave function.
-   * @param {object} node - The AST node.
-   */
-  leave(node) {
-    if (node.type === ATRULE) {
-      if (node.name === 'scope') {
-        this.isScoped = false;
-      }
-    }
-  }
-}
 
 /**
  * Get type of an object.
@@ -199,27 +90,6 @@ export const generateException = (msg, name, globalObject = globalThis) => {
   return new globalObject.DOMException(msg, name);
 };
 
-/**
- * Find a nested :has() pseudo-class.
- * @param {object} leaf - The AST leaf to check.
- * @returns {?object} The leaf if it's :has, otherwise null.
- */
-export const findNestedHas = leaf => {
-  return leaf.name === 'has';
-};
-
-/**
- * Find a logical pseudo-class that contains a nested :has().
- * @param {object} leaf - The AST leaf to check.
- * @returns {?object} The leaf if it matches, otherwise null.
- */
-export const findLogicalWithNestedHas = leaf => {
-  if (KEYS_LOGICAL.has(leaf.name) && cssTree.find(leaf, findNestedHas)) {
-    return leaf;
-  }
-  return null;
-};
-
 /**
  * Filter a list of nodes based on An+B logic
  * @param {Array.<object>} nodes - array of nodes to filter
@@ -431,19 +301,24 @@ export const getSlottedTextContent = node => {
  * Get directionality of a node.
  * @see https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute
  * @param {object} node - The Element node.
+ * @param {WeakMap} [dirCache] - Cache for directionality.
  * @returns {?string} - 'ltr' or 'rtl'.
  */
-export const getDirectionality = node => {
+export const getDirectionality = (node, dirCache = new WeakMap()) => {
   if (!node?.nodeType) {
     throw new TypeError(`Unexpected type ${getType(node)}`);
   }
   if (node.nodeType !== ELEMENT_NODE) {
     return null;
   }
+  if (dirCache.has(node)) {
+    return dirCache.get(node);
+  }
   const { dir: dirAttr, localName, parentNode } = node;
   const { getEmbeddingLevels } = bidiFactory();
+  let result = 'ltr';
   if (dirAttr === 'ltr' || dirAttr === 'rtl') {
-    return dirAttr;
+    result = dirAttr;
   } else if (dirAttr === 'auto') {
     let text = '';
     switch (localName) {
@@ -451,7 +326,8 @@ export const getDirectionality = node => {
         if (!node.type || KEYS_DIR_AUTO.has(node.type)) {
           text = node.value;
         } else if (KEYS_DIR_LTR.has(node.type)) {
-          return 'ltr';
+          result = 'ltr';
+          text = null; // Flag to skip text evaluation
         }
         break;
       }
@@ -491,21 +367,23 @@ export const getDirectionality = node => {
         }
       }
     }
-    if (text) {
-      const {
-        paragraphs: [{ level }]
-      } = getEmbeddingLevels(text);
-      if (level % 2 === 1) {
-        return 'rtl';
-      }
-    } else if (parentNode) {
-      const { nodeType: parentNodeType } = parentNode;
-      if (parentNodeType === ELEMENT_NODE) {
-        return getDirectionality(parentNode);
+    if (text !== null) {
+      if (text) {
+        const {
+          paragraphs: [{ level }]
+        } = getEmbeddingLevels(text);
+        if (level % 2 === 1) {
+          result = 'rtl';
+        }
+      } else if (parentNode) {
+        const { nodeType: parentNodeType } = parentNode;
+        if (parentNodeType === ELEMENT_NODE) {
+          result = getDirectionality(parentNode, dirCache);
+        }
       }
     }
   } else if (localName === 'input' && node.type === 'tel') {
-    return 'ltr';
+    result = 'ltr';
   } else if (localName === 'bdi') {
     const text = node.textContent.trim();
     if (text) {
@@ -513,7 +391,7 @@ export const getDirectionality = node => {
         paragraphs: [{ level }]
       } = getEmbeddingLevels(text);
       if (level % 2 === 1) {
-        return 'rtl';
+        result = 'rtl';
       }
     }
   } else if (parentNode) {
@@ -524,47 +402,67 @@ export const getDirectionality = node => {
           paragraphs: [{ level }]
         } = getEmbeddingLevels(text);
         if (level % 2 === 1) {
-          return 'rtl';
+          result = 'rtl';
+        } else {
+          result = 'ltr';
+        }
+      } else {
+        const { nodeType: parentNodeType } = parentNode;
+        if (parentNodeType === ELEMENT_NODE) {
+          result = getDirectionality(parentNode, dirCache);
         }
-        return 'ltr';
       }
-    }
-    const { nodeType: parentNodeType } = parentNode;
-    if (parentNodeType === ELEMENT_NODE) {
-      return getDirectionality(parentNode);
+    } else {
+      const { nodeType: parentNodeType } = parentNode;
+      if (parentNodeType === ELEMENT_NODE) {
+        result = getDirectionality(parentNode, dirCache);
+      }
     }
   }
-  return 'ltr';
+  dirCache.set(node, result);
+  return result;
 };
 
 /**
- * Traverses up the DOM tree to find the language attribute for a node.
- * It checks for 'lang' in HTML and 'xml:lang' in XML contexts.
- * @param {object} node - The starting element node.
- * @returns {string|null} The language attribute value, or null if not found.
+ * Get language attribute of a node.
+ * @param {object} node - The Element node.
+ * @param {WeakMap} [langCache] - Cache for language attributes.
+ * @returns {?string} - Language attribute value.
  */
-export const getLanguageAttribute = node => {
+export const getLanguageAttribute = (node, langCache = new WeakMap()) => {
   if (!node?.nodeType) {
     throw new TypeError(`Unexpected type ${getType(node)}`);
   }
   if (node.nodeType !== ELEMENT_NODE) {
     return null;
   }
+  if (langCache.has(node)) {
+    return langCache.get(node);
+  }
   const { contentType } = node.ownerDocument;
   const isHtml = REG_IS_HTML.test(contentType);
   const isXml = REG_IS_XML.test(contentType);
   let isShadow = false;
+  let result;
+  const visited = [];
   // Traverse up from the current node to the root.
   let current = node;
   while (current) {
+    if (current.nodeType === ELEMENT_NODE && langCache.has(current)) {
+      result = langCache.get(current);
+      break;
+    }
+    if (current.nodeType === ELEMENT_NODE) {
+      visited.push(current);
+    }
     // Check if the current node is an element.
     switch (current.nodeType) {
       case ELEMENT_NODE: {
         // Check for and return the language attribute if present.
         if (isHtml && current.hasAttribute('lang')) {
-          return current.getAttribute('lang');
+          result = current.getAttribute('lang');
         } else if (isXml && current.hasAttribute('xml:lang')) {
-          return current.getAttribute('xml:lang');
+          result = current.getAttribute('xml:lang');
         }
         break;
       }
@@ -578,9 +476,12 @@ export const getLanguageAttribute = node => {
       case DOCUMENT_NODE:
       default: {
         // Stop if we reach the root document node.
-        return null;
+        result = null;
       }
     }
+    if (result !== undefined) {
+      break;
+    }
     if (isShadow) {
       current = current.host;
       isShadow = false;
@@ -590,8 +491,13 @@ export const getLanguageAttribute = node => {
       break;
     }
   }
-  // No language attribute was found in the hierarchy.
-  return null;
+  if (result === undefined) {
+    result = null;
+  }
+  for (const visitedNode of visited) {
+    langCache.set(visitedNode, result);
+  }
+  return result;
 };
 
 /**
@@ -930,201 +836,101 @@ export const sortNodes = (nodes = []) => {
 };
 
 /**
- * Concat an array of nested selectors into an equivalent single selector.
- * @param {Array.<Array.<string>>} selectors - [parents, children, ...].
- * @returns {string} - The concatenated selector.
- */
-export const concatNestedSelectors = selectors => {
-  if (!Array.isArray(selectors)) {
-    throw new TypeError(`Unexpected type ${getType(selectors)}`);
-  }
-  let selector = '';
-  if (selectors.length) {
-    const revSelectors = selectors.toReversed();
-    let child = verifyArray(revSelectors.shift(), 'String');
-    if (child.length === 1) {
-      [child] = child;
-    }
-    while (revSelectors.length) {
-      const parentArr = verifyArray(revSelectors.shift(), 'String');
-      if (!parentArr.length) {
-        continue;
-      }
-      let parent;
-      if (parentArr.length === 1) {
-        [parent] = parentArr;
-        if (!/^[>~+]/.test(parent) && /[\s>~+]/.test(parent)) {
-          parent = `:is(${parent})`;
-        }
-      } else {
-        parent = `:is(${parentArr.join(', ')})`;
-      }
-      if (selector.includes('\x26')) {
-        selector = selector.replace(/\x26/g, parent);
-      }
-      if (Array.isArray(child)) {
-        const items = [];
-        for (let item of child) {
-          if (item.includes('\x26')) {
-            if (/^[>~+]/.test(item)) {
-              item = `${parent} ${item.replace(/\x26/g, parent)} ${selector}`;
-            } else {
-              item = `${item.replace(/\x26/g, parent)} ${selector}`;
-            }
-          } else {
-            item = `${parent} ${item} ${selector}`;
-          }
-          items.push(item.trim());
-        }
-        selector = items.join(', ');
-      } else if (revSelectors.length) {
-        selector = `${child} ${selector}`;
-      } else {
-        if (child.includes('\x26')) {
-          if (/^[>~+]/.test(child)) {
-            selector = `${parent} ${child.replace(/\x26/g, parent)} ${selector}`;
-          } else {
-            selector = `${child.replace(/\x26/g, parent)} ${selector}`;
-          }
-        } else {
-          selector = `${parent} ${child} ${selector}`;
-        }
-      }
-      selector = selector.trim();
-      if (revSelectors.length) {
-        child = parentArr.length > 1 ? parentArr : parent;
-      } else {
-        break;
-      }
-    }
-    selector = selector.replace(/\x26/g, ':scope').trim();
-  }
-  return selector;
-};
-
-/**
- * Extract nested selectors from CSSRule.cssText.
- * @param {string} css - CSSRule.cssText.
- * @returns {Array.<Array.<string>>} - Array of nested selectors.
+ * Traverses AST nodes to find the most optimal seed selector
+ * (ID > Class > Tag).
+ * @param {Array} nodes - AST nodes to traverse.
+ * @param {object} [state] - The current state of the search.
+ * @returns {object} The search state containing the best seed.
  */
-export const extractNestedSelectors = css => {
-  const ast = cssTree.parse(css, {
-    context: 'rule'
-  });
-  const extractor = new SelectorExtractor();
-  cssTree.walk(ast, {
-    enter: extractor.enter.bind(extractor),
-    leave: extractor.leave.bind(extractor)
-  });
-  return extractor.selectors;
+export const findBestSeed = (nodes, state = { seed: null, priority: 0 }) => {
+  for (const node of nodes) {
+    if (state.priority === 3) {
+      return state;
+    }
+    if (Array.isArray(node)) {
+      findBestSeed(node, state);
+    } else if (node && typeof node === 'object') {
+      // ID Selector (Fastest: getElementById)
+      if (node.type === ID_SELECTOR) {
+        state.seed = { type: 'id', value: node.name };
+        state.priority = 3;
+        return state;
+      } else if (node.type === CLASS_SELECTOR && state.priority < 2) {
+        // Class Selector (Faster: getElementsByClassName)
+        state.seed = { type: 'class', value: node.name };
+        state.priority = 2;
+      } else if (
+        node.type === TYPE_SELECTOR &&
+        state.priority < 1 &&
+        node.name !== '*'
+      ) {
+        // Type/Tag Selector (Excludes universal '*')
+        state.seed = { type: 'tag', value: node.name };
+        state.priority = 1;
+      }
+      if (node.children) {
+        findBestSeed(node.children, state);
+      }
+    }
+  }
+  return state;
 };
 
 /**
- * Extracts the rightmost subject keys (id, class, tag) from a selector.
- * @param {string} selector - The CSS selector string to parse.
- * @param {boolean} caseSensitive - True if the tag should be case-sensitive.
- * @returns {Array<{id: string|null, className: string|null, tag: string|null}>} The list of extracted keys for each selector group.
+ * Traces the DOM tree upwards and sideways from a seed element,
+ * populating the allowlist with safe paths for :has() evaluation.
+ * @param {object} current - The starting seed element.
+ * @param {WeakSet} list - The WeakSet to populate.
+ * @param {Set} visitedAncestors - The Set to track visited nodes.
+ * @returns {void}
  */
-export const extractSubjectsRegExp = (selector, caseSensitive) => {
-  const subjects = [];
-  const groups = selector.split(',');
-  for (let i = 0; i < groups.length; i++) {
-    const group = groups[i].trim();
-    if (!group) {
-      continue;
+export const populateHasAllowlist = (current, list, visitedAncestors) => {
+  list.add(current);
+  while (
+    current &&
+    (current.nodeType === ELEMENT_NODE ||
+      current.nodeType === DOCUMENT_FRAGMENT_NODE)
+  ) {
+    if (visitedAncestors.has(current)) {
+      break;
     }
-    const compounds = group.split(REG_COMBO);
-    const rightmost = compounds[compounds.length - 1];
-    let idKey = null;
-    let classKey = null;
-    let tagKey = null;
-    if (rightmost) {
-      const idMatch = rightmost.match(REG_ID);
-      if (idMatch) {
-        idKey = idMatch[idMatch.length - 1].slice(1);
-      }
-      const classMatch = rightmost.match(REG_CLASS);
-      if (classMatch) {
-        classKey = classMatch[classMatch.length - 1].slice(1);
-      }
-      const tagMatch = rightmost.match(REG_TAG);
-      if (tagMatch) {
-        const tag = tagMatch[1];
-        if (tag !== '*') {
-          tagKey = caseSensitive ? tag : tag.toLowerCase();
-        }
-      }
+    visitedAncestors.add(current);
+    let sibling = current.previousElementSibling;
+    while (sibling) {
+      list.add(sibling);
+      sibling = sibling.previousElementSibling;
+    }
+    sibling = current.nextElementSibling;
+    while (sibling) {
+      list.add(sibling);
+      sibling = sibling.nextElementSibling;
+    }
+    current = current.parentNode;
+    if (current) {
+      list.add(current);
     }
-    subjects.push({ id: idKey, className: classKey, tag: tagKey });
   }
-  return subjects;
 };
 
 /**
- * Filter a selector for use with nwsapi.
- * @param {string} selector - The selector string.
- * @param {string} target - The target type.
- * @returns {boolean} - True if the selector is valid for nwsapi.
+ * Collects all descendant elements of a given node using a TreeWalker.
+ * @param {Document|DocumentFragment|Element} node - The node to start from.
+ * @param {Document} document - The Document used to create the TreeWalker.
+ * @returns {Array<Element>} An array containing all descendant elements.
  */
-export const filterSelector = (selector, target) => {
-  const isQuerySelectorAll = target === TARGET_ALL;
-  // Basic validation and fast-fail for null/undefined/non-string values.
-  if (
-    !selector ||
-    typeof selector !== 'string' ||
-    /null|undefined/.test(selector)
-  ) {
-    return false;
-  }
-  // Exclude various complex or unsupported selectors early.
-  // i.e. non-ASCII, escaped selectors, namespaced selectors, pseudo-elements.
-  if (selector.includes('/') || REG_EXCLUDE_BASIC.test(selector)) {
-    return false;
-  }
-  // Validate attribute selector integrity.
-  if (selector.includes('[')) {
-    const index = selector.lastIndexOf('[');
-    if (selector.indexOf(']', index) === -1) {
-      return false;
-    }
+export const collectAllDescendants = (node, document) => {
+  if (!node?.nodeType) {
+    throw new TypeError(`Unexpected type ${getType(node)}`);
   }
-  // Target-specific early exits.
-  if (target === TARGET_FIRST) {
-    return REG_ATTR_SIMPLE.test(selector);
+  if (document?.nodeType !== DOCUMENT_NODE) {
+    throw new TypeError(`Unexpected type ${getType(document)}`);
   }
-  if (target === TARGET_ALL && REG_TAG_SIMPLE.test(selector)) {
-    return false;
-  }
-  // Logic for pseudo-classes.
-  if (selector.includes(':')) {
-    // Exclude descendant combinators in logical selectors for querySelectorAll.
-    if (isQuerySelectorAll && REG_DESCEND.test(selector)) {
-      return false;
-    }
-    // Determine if the selector has complex logical structures.
-    const isComplex = isQuerySelectorAll ? false : REG_COMPLEX.test(selector);
-    // Handle :has() specifically.
-    if (selector.includes(':has(')) {
-      if (isQuerySelectorAll) {
-        return false;
-      }
-      if (!isComplex || REG_LOGIC_HAS_COMPOUND.test(selector)) {
-        return false;
-      }
-      return REG_END_WITH_HAS.test(selector);
-    }
-    // Handle :is() and :not().
-    if (/(?:is|not)\(/.test(selector)) {
-      if (isComplex) {
-        return !REG_LOGIC_COMPLEX.test(selector);
-      } else {
-        return !REG_LOGIC_COMPOUND.test(selector);
-      }
-    }
-    // Default check for other pseudo-classes against known list.
-    if (REG_WO_LOGICAL.test(selector)) {
-      return false;
-    }
+  const walker = document.createTreeWalker(node, SHOW_ELEMENT);
+  const descendants = [];
+  let refNode = walker.nextNode();
+  while (refNode) {
+    descendants.push(refNode);
+    refNode = walker.nextNode();
   }
-  return true;
+  return descendants;
 };

package/types/index.d.ts

@@ -1,11 +1,12 @@
 export class DOMSelector {
     constructor(window: Window, document: Document, opt?: object);
-    clear: () => void;
+    clear: (clearAll?: boolean) => void;
     extractSubjects: (selector: string, caseSensitive?: boolean) => Array<{
         id: string | null;
         className: string | null;
         tag: string | null;
     }>;
+    supports: (selector: string) => boolean;
     check: (selector: string, node: Element, opt?: object) => CheckResult;
     matches: (selector: string, node: Element, opt?: object) => boolean;
     closest: (selector: string, node: Element, opt?: object) => Element | null;