@asamuzakjp/dom-selector 0.14.0 → 0.15.3

package/README.md

@@ -29,52 +29,49 @@ const {
 
 ### matches(selector, node, opt)
 
-matches - [Element.matches()][64]
+matches - same functionality as [Element.matches()][64]
 
 #### Parameters
 
 - `selector` **[string][59]** CSS selector
 - `node` **[object][60]** Element node
 - `opt` **[object][60]?** options
-  - `opt.globalObject` **[object][60]?** global object, e.g. `window`, `globalThis`
-  - `opt.jsdom` **[boolean][61]?** is jsdom
+  - `opt.warn` **[boolean][61]?** console warn e.g. unsupported pseudo-class
 
 Returns **[boolean][61]** result
 
 
 ### closest(selector, node, opt)
 
-closest - [Element.closest()][65]
+closest - same functionality as [Element.closest()][65]
 
 #### Parameters
 
 - `selector` **[string][59]** CSS selector
 - `node` **[object][60]** Element node
 - `opt` **[object][60]?** options
-  - `opt.globalObject` **[object][60]?** global object, e.g. `window`, `globalThis`
-  - `opt.jsdom` **[boolean][61]?** is jsdom
+  - `opt.warn` **[boolean][61]?** console warn e.g. unsupported pseudo-class
 
 Returns **[object][60]?** matched node
 
 
 ### querySelector(selector, refPoint, opt)
 
-querySelector - [Document.querySelector()][66], [DocumentFragment.querySelector()][67], [Element.querySelector()][68]
+querySelector - same functionality as [Document.querySelector()][66], [DocumentFragment.querySelector()][67], [Element.querySelector()][68]
 
 #### Parameters
 
 - `selector` **[string][59]** CSS selector
 - `refPoint` **[object][60]** Document, DocumentFragment or Element node
 - `opt` **[object][60]?** options
-  - `opt.globalObject` **[object][60]?** global object, e.g. `window`, `globalThis`
-  - `opt.jsdom` **[boolean][61]?** is jsdom
+  - `opt.warn` **[boolean][61]?** console warn e.g. unsupported pseudo-class
 
 Returns **[object][60]?** matched node
 
 
 ### querySelectorAll(selector, refPoint, opt)
 
-querySelectorAll - [Document.querySelectorAll()][69], [Document.querySelectorAll()][70], [Element.querySelectorAll()][71]
+querySelectorAll - same functionality as [Document.querySelectorAll()][69], [DocumentFragment.querySelectorAll()][70], [Element.querySelectorAll()][71]
 **NOTE**: returns Array, not NodeList
 
 #### Parameters
@@ -82,8 +79,7 @@ querySelectorAll - [Document.querySelectorAll()][69], [Document.querySelectorAll
 - `selector` **[string][59]** CSS selector
 - `refPoint` **[object][60]** Document, DocumentFragment or Element node
 - `opt` **[object][60]?** options
-  - `opt.globalObject` **[object][60]?** global object, e.g. `window`, `globalThis`
-  - `opt.jsdom` **[boolean][61]?** is jsdom
+  - `opt.warn` **[boolean][61]?** console warn e.g. unsupported pseudo-class
 
 Returns **[Array][62]<([object][60] \| [undefined][63])>** array of matched nodes
 

package/package.json

@@ -31,7 +31,7 @@
     "eslint-plugin-jsdoc": "^44.2.7",
     "eslint-plugin-regexp": "^1.15.0",
     "eslint-plugin-unicorn": "^47.0.0",
-    "jsdom": "^22.0.0",
+    "jsdom": "^22.1.0",
     "mocha": "^10.2.0",
     "sinon": "^15.1.0",
     "typescript": "^5.0.4"
@@ -42,5 +42,5 @@
     "test": "c8 --reporter=text mocha --exit test/**/*.test.js",
     "tsc": "npx tsc"
   },
-  "version": "0.14.0"
+  "version": "0.15.3"
 }

package/src/index.js

@@ -14,8 +14,7 @@ const { Matcher } = require('./js/matcher.js');
  * @param {string} selector - CSS selector
  * @param {object} node - Element node
  * @param {object} [opt] - options
- * @param {object} [opt.globalObject] - global object
- * @param {boolean} [opt.jsdom] - is jsdom
+ * @param {object} [opt.warn] - console warn e.g. unsupported pseudo-class
  * @returns {boolean} - result
  */
 const matches = (selector, node, opt) => {
@@ -28,8 +27,7 @@ const matches = (selector, node, opt) => {
  * @param {string} selector - CSS selector
  * @param {object} node - Element node
  * @param {object} [opt] - options
- * @param {object} [opt.globalObject] - global object
- * @param {boolean} [opt.jsdom] - is jsdom
+ * @param {object} [opt.warn] - console warn e.g. unsupported pseudo-class
  * @returns {?object} - matched node
  */
 const closest = (selector, node, opt) => {
@@ -42,8 +40,7 @@ const closest = (selector, node, opt) => {
  * @param {string} selector - CSS selector
  * @param {object} refPoint - Document or Element node
  * @param {object} [opt] - options
- * @param {object} [opt.globalObject] - global object
- * @param {boolean} [opt.jsdom] - is jsdom
+ * @param {object} [opt.warn] - console warn e.g. unsupported pseudo-class
  * @returns {?object} - matched node
  */
 const querySelector = (selector, refPoint, opt) => {
@@ -57,8 +54,7 @@ const querySelector = (selector, refPoint, opt) => {
  * @param {string} selector - CSS selector
  * @param {object} refPoint - Document or Element node
  * @param {object} [opt] - options
- * @param {object} [opt.globalObject] - global object
- * @param {boolean} [opt.jsdom] - is jsdom
+ * @param {object} [opt.warn] - console warn e.g. unsupported pseudo-class
  * @returns {Array.<object|undefined>} - array of matched nodes
  */
 const querySelectorAll = (selector, refPoint, opt) => {

package/src/js/matcher.js

@@ -26,7 +26,8 @@ const HEX_CAPTURE = /^([\da-f]{1,6}\s?)/i;
 const HTML_FORM_INPUT = /^(?:(?:inpu|selec)t|textarea)$/;
 const HTML_FORM_PARTS = /^(?:button|fieldset|opt(?:group|ion))$/;
 const HTML_INTERACT = /^d(?:etails|ialog)$/;
-const INPUT_TYPE_BARRED = /^(?:(?:butto|hidde)n|reset)$/;
+const INPUT_PLACEHOLDER = /^(?:(?:emai|te|ur)l|number|password|search|text)$/;
+const INPUT_RANGE = /(?:(?:rang|tim)e|date(?:time-local)?|month|number|week)$/;
 const PSEUDO_FUNC = /^(?:(?:ha|i)s|not|where)$/;
 const PSEUDO_NTH = /^nth-(?:last-)?(?:child|of-type)$/;
 const WHITESPACE = /^[\n\r\f]/;
@@ -38,19 +39,19 @@ const WHITESPACE = /^[\n\r\f]/;
  * @returns {boolean} - result
  */
 const isContentEditable = (node = {}) => {
-  let bool;
+  let res;
   if (node.nodeType === ELEMENT_NODE) {
     if (node.ownerDocument.designMode === 'on') {
-      bool = true;
+      res = true;
     } else if (node.hasAttribute('contenteditable')) {
       const attr = node.getAttribute('contenteditable');
       if (/^(?:plaintext-only|true)$/.test(attr) || attr === '') {
-        bool = true;
+        res = true;
       } else if (attr === 'inherit') {
         let parent = node.parentNode;
         while (parent) {
           if (isContentEditable(parent)) {
-            bool = true;
+            res = true;
             break;
           }
           parent = parent.parentNode;
@@ -58,7 +59,7 @@ const isContentEditable = (node = {}) => {
       }
     }
   }
-  return !!bool;
+  return !!res;
 };
 
 /**
@@ -85,6 +86,27 @@ const isNamespaceDeclared = (ns = '', node = {}) => {
   return !!res;
 };
 
+/**
+ * is node attached to owner document
+ * @param {object} node - Element node
+ * @returns {boolean} - result
+ */
+const isAttached = (node = {}) => {
+  const { nodeType, ownerDocument } = node;
+  let res;
+  if (nodeType === ELEMENT_NODE && ownerDocument) {
+    const root = ownerDocument.documentElement;
+    if (node === root) {
+      res = true;
+    } else {
+      const posBit =
+        node.compareDocumentPosition(root) & DOCUMENT_POSITION_CONTAINS;
+      res = posBit;
+    }
+  }
+  return !!res;
+};
+
 /**
  * unescape selector
  * @param {string} selector - CSS selector
@@ -150,7 +172,7 @@ const createSelectorForNode = (node = {}) => {
       }
     }
   }
-  return res || null;
+  return res ?? null;
 };
 
 /**
@@ -888,7 +910,7 @@ const matchDirectionPseudoClass = (ast = {}, node = {}) => {
   const { type: astType } = ast;
   const { dir: nodeDir, localName, nodeType, type: inputType } = node;
   let res;
-  if (astType === IDENTIFIER && nodeType === ELEMENT_NODE) {
+  if (astType === IDENTIFIER && nodeType === ELEMENT_NODE && isAttached(node)) {
     const astName = unescapeSelector(ast.name);
     let dir;
     if (/^(?:ltr|rtl)$/.test(nodeDir)) {
@@ -1028,13 +1050,13 @@ const matchPseudoClassSelector = (
       } else if (astName === 'dir') {
         const res = matchDirectionPseudoClass(branch, node);
         if (res) {
-          matched.push(node);
+          matched.push(res);
         }
       // :lang()
       } else if (astName === 'lang') {
         const res = matchLanguagePseudoClass(branch, node);
         if (res) {
-          matched.push(node);
+          matched.push(res);
         }
       } else {
         switch (astName) {
@@ -1165,8 +1187,8 @@ const matchPseudoClassSelector = (
         }
         case 'read-only': {
           if (/^(?:input|textarea)$/.test(localName)) {
-            if (node.hasAttribute('readonly') ||
-                node.hasAttribute('disabled')) {
+            if (node.readonly || node.hasAttribute('readonly') ||
+                node.disabled || node.hasAttribute('disabled')) {
               matched.push(node);
             }
           } else if (!isContentEditable(node)) {
@@ -1176,8 +1198,8 @@ const matchPseudoClassSelector = (
         }
         case 'read-write': {
           if (/^(?:input|textarea)$/.test(localName)) {
-            if (!(node.hasAttribute('readonly') ||
-                  node.hasAttribute('disabled'))) {
+            if (!(node.readonly || node.hasAttribute('readonly') ||
+                  node.disabled || node.hasAttribute('disabled'))) {
               matched.push(node);
             }
           } else if (isContentEditable(node)) {
@@ -1186,7 +1208,10 @@ const matchPseudoClassSelector = (
           break;
         }
         case 'placeholder-shown': {
-          if (/^(?:input|textarea)$/.test(localName) &&
+          if (((localName === 'input' &&
+                (!node.hasAttribute('type') ||
+                 INPUT_PLACEHOLDER.test(node.getAttribute('type')))) ||
+               localName === 'textarea') &&
               node.hasAttribute('placeholder') &&
               node.getAttribute('placeholder').trim().length &&
               node.value === '') {
@@ -1345,26 +1370,26 @@ const matchPseudoClassSelector = (
           break;
         }
         case 'in-range': {
-          if (localName === 'input' && !node.hasAttribute('readonly') &&
-              !node.hasAttribute('disabled') &&
+          if (localName === 'input' &&
+              !(node.readonly || node.hasAttribute('readonly')) &&
+              !(node.disabled || node.hasAttribute('disabled')) &&
+              node.hasAttribute('type') &&
+              INPUT_RANGE.test(node.getAttribute('type')) &&
               !(node.validity.rangeUnderflow || node.validity.rangeOverflow)) {
-            if (!(node.hasAttribute('type') &&
-                 INPUT_TYPE_BARRED.test(node.getAttribute('type'))) &&
-               node.hasAttribute('min') && node.hasAttribute('max')) {
-              matched.push(node);
-            } else if (node.getAttribute('type') === 'range') {
+            if (node.hasAttribute('min') || node.hasAttribute('max') ||
+                node.getAttribute('type') === 'range') {
               matched.push(node);
             }
           }
           break;
         }
         case 'out-of-range': {
-          if (localName === 'input' && !node.hasAttribute('readonly') &&
-              !node.hasAttribute('disabled') &&
-              (node.validity.rangeUnderflow || node.validity.rangeOverflow) &&
-              !(node.hasAttribute('type') &&
-                INPUT_TYPE_BARRED.test(node.getAttribute('type'))) &&
-              node.hasAttribute('min') && node.hasAttribute('max')) {
+          if (localName === 'input' &&
+              !(node.readonly || node.hasAttribute('readonly')) &&
+              !(node.disabled || node.hasAttribute('disabled')) &&
+              node.hasAttribute('type') &&
+              INPUT_RANGE.test(node.getAttribute('type')) &&
+              (node.validity.rangeUnderflow || node.validity.rangeOverflow)) {
             matched.push(node);
           }
           break;
@@ -1460,12 +1485,13 @@ const matchPseudoClassSelector = (
           }
           break;
         }
+        // legacy pseudo-elements
         case 'after':
         case 'before':
         case 'first-letter':
         case 'first-line': {
-          // legacy pseudo-elements
-          break;
+          throw new DOMException(`Unsupported pseudo-element ::${astName}`,
+            'NotSupportedError');
         }
         case 'active':
         case 'autofill':
@@ -1528,11 +1554,11 @@ const matchPseudoElementSelector = (ast = {}, node = {}) => {
       case 'selection':
       case 'slotted':
       case 'target-text': {
-        throw new DOMException(`Unsupported pseudo-element ${astName}`,
+        throw new DOMException(`Unsupported pseudo-element ::${astName}`,
           'NotSupportedError');
       }
       default: {
-        throw new DOMException(`Unknown pseudo-element ${astName}`,
+        throw new DOMException(`Unknown pseudo-element ::${astName}`,
           'SyntaxError');
       }
     }
@@ -1564,17 +1590,6 @@ class Matcher {
     this.#warn = !!warn;
   }
 
-  /**
-   * node is attached to document or detached
-   * @returns {boolean} - result
-   */
-  _isAttached() {
-    const root = this.#document.documentElement;
-    const posBit =
-      this.#node.compareDocumentPosition(root) & DOCUMENT_POSITION_CONTAINS;
-    return !!posBit;
-  };
-
   /**
    * match AST and node
    * @param {object} ast - AST
@@ -1588,21 +1603,21 @@ class Matcher {
       case ID_SELECTOR: {
         const res = matchIDSelector(ast, node);
         if (res) {
-          matched.push(node);
+          matched.push(res);
         }
         break;
       }
       case CLASS_SELECTOR: {
         const res = matchClassSelector(ast, node);
         if (res) {
-          matched.push(node);
+          matched.push(res);
         }
         break;
       }
       case ATTRIBUTE_SELECTOR: {
         const res = matchAttributeSelector(ast, node);
         if (res) {
-          matched.push(node);
+          matched.push(res);
         }
         break;
       }
@@ -1621,7 +1636,7 @@ class Matcher {
       default: {
         const res = matchTypeSelector(ast, node);
         if (res) {
-          matched.push(node);
+          matched.push(res);
         }
       }
     }
@@ -1705,7 +1720,7 @@ class Matcher {
     let res;
     try {
       let node;
-      if (this._isAttached()) {
+      if (isAttached(this.#node)) {
         node = this.#document;
       } else {
         node = this.#node;
@@ -1821,6 +1836,7 @@ module.exports = {
   collectNthOfType,
   createSelectorForNode,
   groupASTLeaves,
+  isAttached,
   isContentEditable,
   isNamespaceDeclared,
   matchAnPlusB,

package/types/index.d.ts

@@ -1,16 +1,12 @@
 export function closest(selector: string, node: object, opt?: {
-    globalObject?: object;
-    jsdom?: boolean;
+    warn?: object;
 }): object | null;
 export function matches(selector: string, node: object, opt?: {
-    globalObject?: object;
-    jsdom?: boolean;
+    warn?: object;
 }): boolean;
 export function querySelector(selector: string, refPoint: object, opt?: {
-    globalObject?: object;
-    jsdom?: boolean;
+    warn?: object;
 }): object | null;
 export function querySelectorAll(selector: string, refPoint: object, opt?: {
-    globalObject?: object;
-    jsdom?: boolean;
+    warn?: object;
 }): Array<object | undefined>;

package/types/js/matcher.d.ts

@@ -2,7 +2,6 @@ export class Matcher {
     constructor(selector: string, refPoint: object, opt?: {
         warn?: object;
     });
-    _isAttached(): boolean;
     _match(ast: object, node: object): Array<object | undefined>;
     _getMatchedNodes(branch?: Array<object>, node?: object): Array<object | undefined>;
     _find(ast: object, node: object): Array<object | undefined>;
@@ -25,6 +24,7 @@ export function collectNthOfType(anb?: {
 }, node?: object): Array<object | undefined>;
 export function createSelectorForNode(node?: object): string | null;
 export function groupASTLeaves(branch?: Array<object>): Array<object>;
+export function isAttached(node?: object): boolean;
 export function isContentEditable(node?: object): boolean;
 export function isNamespaceDeclared(ns?: string, node?: object): boolean;
 export function matchAnPlusB(nthName: string, ast?: object, node?: object): Array<object | undefined>;