@asamuzakjp/dom-selector 0.21.2 → 0.23.2

package/README.md

@@ -85,6 +85,112 @@ querySelectorAll - same functionality as [Document.querySelectorAll()][69], [Doc
 Returns **[Array][62]<([object][60] \| [undefined][63])>** array of matched nodes
 
 
+## Monkey patch jsdom
+
+``` javascript
+import { JSDOM } from 'jsdom';
+import {
+  closest, matches, querySelector, querySelectorAll
+} from '@asamuzakjp/dom-selector';
+
+const dom = new JSDOM('', {
+  runScripts: 'dangerously',
+  url: 'http://localhost/',
+  beforeParse: window => {
+    window.Element.prototype.matches = function (...args) {
+      if (!args.length) {
+        throw new window.TypeError('1 argument required, but only 0 present.');
+      }
+      const [selector] = args;
+      return matches(selector, this);
+    };
+    window.Element.prototype.closest = function (...args) {
+      if (!args.length) {
+        throw new window.TypeError('1 argument required, but only 0 present.');
+      }
+      const [selector] = args;
+      return closest(selector, this);
+    };
+    window.Document.prototype.querySelector = function (...args) {
+      if (!args.length) {
+        throw new window.TypeError('1 argument required, but only 0 present.');
+      }
+      const [selector] = args;
+      return querySelector(selector, this);
+    };
+    window.DocumentFragment.prototype.querySelector = function (...args) {
+      if (!args.length) {
+        throw new window.TypeError('1 argument required, but only 0 present.');
+      }
+      const [selector] = args;
+      return querySelector(selector, this);
+    };
+    window.Element.prototype.querySelector = function (...args) {
+      if (!args.length) {
+        throw new window.TypeError('1 argument required, but only 0 present.');
+      }
+      const [selector] = args;
+      return querySelector(selector, this);
+    };
+    window.Document.prototype.querySelectorAll = function (...args) {
+      if (!args.length) {
+        throw new window.TypeError('1 argument required, but only 0 present.');
+      }
+      const [selector] = args;
+      return querySelectorAll(selector, this);
+    };
+    window.DocumentFragment.prototype.querySelectorAll = function (...args) {
+      if (!args.length) {
+        throw new window.TypeError('1 argument required, but only 0 present.');
+      }
+      const [selector] = args;
+      return querySelectorAll(selector, this);
+    };
+    window.Element.prototype.querySelectorAll = function (...args) {
+      if (!args.length) {
+        throw new window.TypeError('1 argument required, but only 0 present.');
+      }
+      const [selector] = args;
+      return querySelectorAll(selector, this);
+    };
+  }
+});
+```
+
+### Performance
+
+|selector|jsdom|patched-jsdom|result|
+|:------------|:------------|:------------|:------------|
+|matches('.container.box')|1,704,793 ops/sec ±2.10%|95,691 ops/sec ±2.40%|jsdom is 17.8 times faster. patched-jsdom took 0.010msec.|
+|matches('.container:not(.box)')|906,712 ops/sec ±2.02%|57,603 ops/sec ±4.57%|jsdom is 15.7 times faster. patched-jsdom took 0.017msec.|
+|matches('.box + .box')|1,566,175 ops/sec ±2.17%|90,759 ops/sec ±5.32%|jsdom is 17.3 times faster. patched-jsdom took 0.011msec.|
+|matches('.box ~ .box')|1,585,314 ops/sec ±2.06%|90,257 ops/sec ±3.06%|jsdom is 17.6 times faster. patched-jsdom took 0.011msec.|
+|matches('.box > .block')|830,259 ops/sec ±2.29%|79,630 ops/sec ±2.76%|jsdom is 10.4 times faster. patched-jsdom took 0.013msec.|
+|matches('.box .content')|1,465,248 ops/sec ±2.74%|95,500 ops/sec ±2.36%|jsdom is 15.3 times faster. patched-jsdom took 0.010msec.|
+|matches('.box:first-child ~ .box:nth-of-type(4n+1) + .box .block.inner > .content')|1,531,871 ops/sec ±2.68%|30,324 ops/sec ±3.09%|* jsdom is 50.5 times faster. patched-jsdom took 0.033msec.|
+|closest('.container.box')|398,561 ops/sec ±2.74%|46,478 ops/sec ±2.31%|jsdom is 8.6 times faster. patched-jsdom took 0.022msec.|
+|closest('.container:not(.box)')|220,109 ops/sec ±2.58%|28,449 ops/sec ±4.44%|jsdom is 7.7 times faster. patched-jsdom took 0.035msec.|
+|closest('.box + .box')|355,897 ops/sec ±1.53%|43,752 ops/sec ±1.70%|jsdom is 8.1 times faster. patched-jsdom took 0.023msec.|
+|closest('.box ~ .box')|124,255 ops/sec ±1.87%|25,663 ops/sec ±2.76%|jsdom is 4.8 times faster. patched-jsdom took 0.039msec.|
+|closest('.box > .block')|387,622 ops/sec ±1.59%|40,747 ops/sec ±3.41%|jsdom is 9.5 times faster. patched-jsdom took 0.025msec.|
+|closest('.box .content')|235,499 ops/sec ±2.42%|50,113 ops/sec ±2.81%|jsdom is 4.7 times faster. patched-jsdom took 0.020msec.|
+|closest('.box:first-child ~ .box:nth-of-type(4n+1) + .box .block.inner > .content')|235,201 ops/sec ±2.80%|24,940 ops/sec ±2.26%|jsdom is 9.4 times faster. patched-jsdom took 0.040msec.|
+|querySelector('.container.box')|59,348 ops/sec ±3.98%|20,617 ops/sec ±2.05%|jsdom is 2.9 times faster. patched-jsdom took 0.049msec.|
+|querySelector('.container:not(.box)')|51,310 ops/sec ±2.61%|15,210 ops/sec ±1.42%|jsdom is 3.4 times faster. patched-jsdom took 0.066msec.|
+|querySelector('.box + .box')|52,099 ops/sec ±1.32%|16,644 ops/sec ±1.21%|jsdom is 3.1 times faster. patched-jsdom took 0.060msec.|
+|jsdom querySelector('.box ~ .box')|53,329 ops/sec ±2.51%|7,801 ops/sec ±2.10%|jsdom is 6.8 times faster. patched-jsdom took 0.128msec.|
+|querySelector('.box > .block')|755 ops/sec ±2.34%|2,492 ops/sec ±1.13%|patched-jsdom is 3.3 times faster. patched-jsdom took 0.401msec.|
+|querySelector('.box .content')|386 ops/sec ±2.96%|187 ops/sec ±1.12%|jsdom is 2.1 times faster. patched-jsdom took 5.359msec.|
+| querySelector('.box:first-child ~ .box:nth-of-type(4n+1) + .box .block.inner > .content')|158 ops/sec ±2.40%|287 ops/sec ±2.03%|patched-jsdom is 1.8 times faster. patched-jsdom took 3.486msec.|
+|querySelectorAll('.container.box')|73,206 ops/sec ±3.78%|19,290 ops/sec ±1.55%|jsdom is 3.8 times faster. patched-jsdom took 0.052msec.|
+|querySelectorAll('.container:not(.box)')|65,761 ops/sec ±3.31%|14,269 ops/sec ±2.86%|jsdom is 4.6 times faster. patched-jsdom took 0.070msec.|
+|querySelectorAll('.box + .box')|69,019 ops/sec ±1.54%|17,941 ops/sec ±1.48%|jsdom is 3.8 times faster. patched-jsdom took 0.056msec.|
+|querySelectorAll('.box ~ .box')|64,329 ops/sec ±1.25%|7,748 ops/sec ±3.19%|jsdom is 8.3 times faster. patched-jsdom took 0.129msec.|
+|jsdom querySelectorAll('.box > .block')|764 ops/sec ±1.90%|2,086 ops/sec ±1.49%|patched-jsdom is 2.7 times faster. patched-jsdom took 0.479msec.|
+|querySelectorAll('.box .content')|370 ops/sec ±1.67%|165 ops/sec ±2.22%|jsdom is 2.3 times faster. patched-jsdom took 6.076msec.|
+|querySelectorAll('.box:first-child ~ .box:nth-of-type(4n+1) + .box .block.inner > .content')|165 ops/sec ±1.13%|292 ops/sec ±1.79%|patched-jsdom is 1.8 times faster. patched-jsdom took 3.425msec.|
+
+
 ## Acknowledgments
 
 The following resources have been of great help in the development of the DOM Selector.

package/package.json

@@ -19,6 +19,7 @@
   "type": "module",
   "types": "types/index.d.ts",
   "dependencies": {
+    "bidi-js": "^1.0.3",
     "css-tree": "^2.3.1",
     "is-potential-custom-element-name": "^1.0.1"
   },
@@ -27,16 +28,16 @@
     "benchmark": "^2.1.4",
     "c8": "^8.0.1",
     "chai": "^4.3.10",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jsdoc": "^46.8.2",
     "eslint-plugin-regexp": "^2.1.1",
-    "eslint-plugin-unicorn": "^48.0.1",
+    "eslint-plugin-unicorn": "^49.0.0",
     "jsdom": "^22.1.0",
     "mocha": "^10.2.0",
     "npm-run-all": "^4.1.5",
-    "sinon": "^17.0.0",
+    "sinon": "^17.0.1",
     "typescript": "^5.2.2",
     "wpt-runner": "^5.0.0"
   },
@@ -48,7 +49,7 @@
     "test-wpt": "npm run update-wpt && node test/wpt/wpt-runner.js",
     "tsc": "npx tsc",
     "update": "npm-run-all -s update-*",
-    "update-wpt": "git submodule update --init --recursive"
+    "update-wpt": "git submodule update --init --recursive --remote"
   },
-  "version": "0.21.2"
+  "version": "0.23.2"
 }

package/src/js/dom-util.js

@@ -2,10 +2,148 @@
  * dom-util.js
  */
 
+/* import */
+import bidiFactory from 'bidi-js';
+
 /* constants */
 import {
-  DOCUMENT_POSITION_CONTAINED_BY, ELEMENT_NODE, SYNTAX_ERR
+  DOCUMENT_NODE, DOCUMENT_FRAGMENT_NODE, DOCUMENT_POSITION_CONTAINED_BY,
+  ELEMENT_NODE, SYNTAX_ERR
 } from './constant.js';
+const LTR = 'ltr';
+const RTL = 'rtl';
+
+/* regexp */
+const INPUT_TYPE =
+  /^(?:(?:butto|hidde)n|(?:emai|te|ur)l|(?:rese|submi|tex)t|password|search)$/;
+const SHADOW_MODE = /^(?:close|open)$/;
+
+/* bidi */
+const bidi = bidiFactory();
+
+/**
+ * get slotted text content
+ * @param {object} node - Element node
+ * @returns {?string} - text content
+ */
+export const getSlottedTextContent = (node = {}) => {
+  let res;
+  if (node.nodeType === ELEMENT_NODE && node.localName === 'slot') {
+    let parent = node.parentNode;
+    let bool;
+    while (parent) {
+      const { host, mode, nodeType, parentNode } = parent;
+      if (nodeType === DOCUMENT_FRAGMENT_NODE && host &&
+          mode && SHADOW_MODE.test(mode)) {
+        bool = true;
+        break;
+      }
+      parent = parentNode;
+    }
+    if (bool) {
+      const nodes = node.assignedNodes();
+      if (nodes.length) {
+        for (const item of nodes) {
+          res = item.textContent.trim();
+          if (res) {
+            break;
+          }
+        }
+      } else {
+        res = node.textContent.trim();
+      }
+    }
+  }
+  return res ?? null;
+};
+
+/**
+ * get directionality of node
+ * @see https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute
+ * @param {object} node - Element node
+ * @returns {?string} - result
+ */
+export const getDirectionality = (node = {}) => {
+  let res;
+  if (node.nodeType === ELEMENT_NODE) {
+    const { dir: nodeDir, localName, parentNode } = node;
+    if (/^(?:ltr|rtl)$/.test(nodeDir)) {
+      res = nodeDir;
+    } else if (nodeDir === 'auto') {
+      let text;
+      if (localName === 'textarea') {
+        text = node.value;
+      } else if (localName === 'input' &&
+                 (!node.type || INPUT_TYPE.test(node.type))) {
+        text = node.value;
+      } else if (localName === 'slot') {
+        text = getSlottedTextContent(node);
+      } else {
+        text = node.textContent.trim();
+      }
+      if (text) {
+        const { paragraphs: [{ level }] } = bidi.getEmbeddingLevels(text);
+        if (level % 2 === 1) {
+          res = RTL;
+        } else {
+          res = LTR;
+        }
+      }
+      if (!res) {
+        if (parentNode) {
+          const { nodeType: parentNodeType } = parentNode;
+          if (parentNodeType === ELEMENT_NODE) {
+            res = getDirectionality(parentNode);
+          } else if (parentNodeType === DOCUMENT_NODE ||
+                     parentNodeType === DOCUMENT_FRAGMENT_NODE) {
+            res = LTR;
+          }
+        } else {
+          res = LTR;
+        }
+      }
+    } else if (localName === 'bdi') {
+      const text = node.textContent.trim();
+      if (text) {
+        const { paragraphs: [{ level }] } = bidi.getEmbeddingLevels(text);
+        if (level % 2 === 1) {
+          res = RTL;
+        } else {
+          res = LTR;
+        }
+      }
+      if (!(res || parentNode)) {
+        res = LTR;
+      }
+    } else if (localName === 'input' && node.type === 'tel') {
+      res = LTR;
+    } else if (parentNode) {
+      if (localName === 'slot') {
+        const text = getSlottedTextContent(node);
+        if (text) {
+          const { paragraphs: [{ level }] } = bidi.getEmbeddingLevels(text);
+          if (level % 2 === 1) {
+            res = RTL;
+          } else {
+            res = LTR;
+          }
+        }
+      }
+      if (!res) {
+        const { nodeType: parentNodeType } = parentNode;
+        if (parentNodeType === ELEMENT_NODE) {
+          res = getDirectionality(parentNode);
+        } else if (parentNodeType === DOCUMENT_NODE ||
+                   parentNodeType === DOCUMENT_FRAGMENT_NODE) {
+          res = LTR;
+        }
+      }
+    } else {
+      res = LTR;
+    }
+  }
+  return res ?? null;
+};
 
 /**
  * is content editable
@@ -72,11 +210,10 @@ export const isNamespaceDeclared = (ns = '', node = {}) => {
  * @returns {boolean} - result
  */
 export const isSameOrDescendant = (node = {}, root = {}) => {
-  const { nodeType, ownerDocument } = node;
   let res;
-  if (nodeType === ELEMENT_NODE && ownerDocument) {
+  if (node.nodeType === ELEMENT_NODE && node.ownerDocument) {
     if (!root || root.nodeType !== ELEMENT_NODE) {
-      root = ownerDocument;
+      root = node.ownerDocument;
     }
     if (node === root) {
       res = true;
@@ -98,10 +235,6 @@ export const selectorToNodeProps = (selector, node) => {
   if (selector && typeof selector === 'string') {
     if (/\|/.test(selector)) {
       [prefix, tagName] = selector.split('|');
-      if (prefix && prefix !== '*' &&
-          node && !isNamespaceDeclared(prefix, node)) {
-        throw new DOMException(`invalid selector ${selector}`, SYNTAX_ERR);
-      }
     } else {
       prefix = '*';
       tagName = selector;