npm - accented - Versions diffs - 0.0.0-20250404114312 → 0.0.0-20250618181418 - Mend

accented 0.0.0-20250404114312 → 0.0.0-20250618181418

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (207) hide show

package/README.md +0 -207
package/dist/accented.d.ts +2 -2
package/dist/accented.d.ts.map +1 -1
package/dist/accented.js +29 -23
package/dist/accented.js.map +1 -1
package/dist/common/tokens.d.ts +2 -0
package/dist/common/tokens.d.ts.map +1 -0
package/dist/common/tokens.js +2 -0
package/dist/common/tokens.js.map +1 -0
package/dist/constants.d.ts.map +1 -1
package/dist/dom-updater.d.ts +1 -1
package/dist/dom-updater.d.ts.map +1 -1
package/dist/dom-updater.js +43 -16
package/dist/dom-updater.js.map +1 -1
package/dist/elements/accented-dialog.d.ts +13 -10
package/dist/elements/accented-dialog.d.ts.map +1 -1
package/dist/elements/accented-dialog.js +46 -69
package/dist/elements/accented-dialog.js.map +1 -1
package/dist/elements/accented-trigger.d.ts +12 -9
package/dist/elements/accented-trigger.d.ts.map +1 -1
package/dist/elements/accented-trigger.js +14 -15
package/dist/elements/accented-trigger.js.map +1 -1
package/dist/fullscreen-listener.d.ts +1 -1
package/dist/fullscreen-listener.d.ts.map +1 -1
package/dist/fullscreen-listener.js +3 -4
package/dist/fullscreen-listener.js.map +1 -1
package/dist/intersection-observer.d.ts +1 -1
package/dist/intersection-observer.d.ts.map +1 -1
package/dist/intersection-observer.js +12 -6
package/dist/intersection-observer.js.map +1 -1
package/dist/log-and-rethrow.d.ts +1 -1
package/dist/log-and-rethrow.d.ts.map +1 -1
package/dist/log-and-rethrow.js +2 -3
package/dist/log-and-rethrow.js.map +1 -1
package/dist/logger.d.ts +1 -1
package/dist/logger.d.ts.map +1 -1
package/dist/logger.js +6 -3
package/dist/logger.js.map +1 -1
package/dist/register-elements.d.ts +1 -1
package/dist/register-elements.d.ts.map +1 -1
package/dist/register-elements.js +6 -7
package/dist/register-elements.js.map +1 -1
package/dist/resize-listener.d.ts +1 -1
package/dist/resize-listener.d.ts.map +1 -1
package/dist/resize-listener.js +3 -4
package/dist/resize-listener.js.map +1 -1
package/dist/scanner.d.ts +2 -2
package/dist/scanner.d.ts.map +1 -1
package/dist/scanner.js +39 -36
package/dist/scanner.js.map +1 -1
package/dist/scroll-listeners.d.ts +1 -1
package/dist/scroll-listeners.d.ts.map +1 -1
package/dist/scroll-listeners.js +3 -4
package/dist/scroll-listeners.js.map +1 -1
package/dist/state.d.ts +1 -1
package/dist/state.d.ts.map +1 -1
package/dist/state.js +4 -5
package/dist/state.js.map +1 -1
package/dist/task-queue.d.ts +4 -4
package/dist/task-queue.d.ts.map +1 -1
package/dist/task-queue.js +3 -2
package/dist/task-queue.js.map +1 -1
package/dist/types.d.ts +28 -6
package/dist/types.d.ts.map +1 -1
package/dist/types.js.map +1 -1
package/dist/utils/are-elements-with-issues-equal.d.ts +2 -2
package/dist/utils/are-elements-with-issues-equal.d.ts.map +1 -1
package/dist/utils/are-elements-with-issues-equal.js +3 -3
package/dist/utils/are-elements-with-issues-equal.js.map +1 -1
package/dist/utils/are-issue-sets-equal.d.ts +2 -2
package/dist/utils/are-issue-sets-equal.d.ts.map +1 -1
package/dist/utils/are-issue-sets-equal.js +3 -3
package/dist/utils/are-issue-sets-equal.js.map +1 -1
package/dist/utils/containing-blocks.d.ts +3 -0
package/dist/utils/containing-blocks.d.ts.map +1 -0
package/dist/utils/containing-blocks.js +46 -0
package/dist/utils/containing-blocks.js.map +1 -0
package/dist/utils/contains.d.ts +2 -0
package/dist/utils/contains.d.ts.map +1 -0
package/dist/utils/contains.js +19 -0
package/dist/utils/contains.js.map +1 -0
package/dist/utils/deduplicate-nodes.d.ts +2 -0
package/dist/utils/deduplicate-nodes.d.ts.map +1 -0
package/dist/utils/deduplicate-nodes.js +4 -0
package/dist/utils/deduplicate-nodes.js.map +1 -0
package/dist/utils/deep-merge.d.ts +1 -1
package/dist/utils/deep-merge.d.ts.map +1 -1
package/dist/utils/deep-merge.js +6 -5
package/dist/utils/deep-merge.js.map +1 -1
package/dist/utils/dom-helpers.d.ts +3 -0
package/dist/utils/dom-helpers.d.ts.map +1 -1
package/dist/utils/dom-helpers.js +15 -0
package/dist/utils/dom-helpers.js.map +1 -1
package/dist/utils/ensure-non-empty.d.ts +2 -0
package/dist/utils/ensure-non-empty.d.ts.map +1 -0
package/dist/utils/ensure-non-empty.js +7 -0
package/dist/utils/ensure-non-empty.js.map +1 -0
package/dist/utils/get-element-html.d.ts +1 -1
package/dist/utils/get-element-html.d.ts.map +1 -1
package/dist/utils/get-element-html.js +4 -2
package/dist/utils/get-element-html.js.map +1 -1
package/dist/utils/get-element-position.d.ts +10 -2
package/dist/utils/get-element-position.d.ts.map +1 -1
package/dist/utils/get-element-position.js +34 -23
package/dist/utils/get-element-position.js.map +1 -1
package/dist/utils/get-parent.d.ts +1 -1
package/dist/utils/get-parent.d.ts.map +1 -1
package/dist/utils/get-parent.js +1 -1
package/dist/utils/get-parent.js.map +1 -1
package/dist/utils/get-scan-context.d.ts +3 -0
package/dist/utils/get-scan-context.d.ts.map +1 -0
package/dist/utils/get-scan-context.js +28 -0
package/dist/utils/get-scan-context.js.map +1 -0
package/dist/utils/get-scrollable-ancestors.d.ts +1 -1
package/dist/utils/get-scrollable-ancestors.d.ts.map +1 -1
package/dist/utils/get-scrollable-ancestors.js +5 -5
package/dist/utils/get-scrollable-ancestors.js.map +1 -1
package/dist/utils/is-node-in-scan-context.d.ts +3 -0
package/dist/utils/is-node-in-scan-context.d.ts.map +1 -0
package/dist/utils/is-node-in-scan-context.js +26 -0
package/dist/utils/is-node-in-scan-context.js.map +1 -0
package/dist/utils/is-non-empty.d.ts +2 -0
package/dist/utils/is-non-empty.d.ts.map +1 -0
package/dist/utils/is-non-empty.js +4 -0
package/dist/utils/is-non-empty.js.map +1 -0
package/dist/utils/normalize-context.d.ts +3 -0
package/dist/utils/normalize-context.d.ts.map +1 -0
package/dist/utils/normalize-context.js +59 -0
package/dist/utils/normalize-context.js.map +1 -0
package/dist/utils/recalculate-positions.d.ts +1 -1
package/dist/utils/recalculate-positions.d.ts.map +1 -1
package/dist/utils/recalculate-positions.js +5 -5
package/dist/utils/recalculate-positions.js.map +1 -1
package/dist/utils/recalculate-scrollable-ancestors.d.ts +1 -1
package/dist/utils/recalculate-scrollable-ancestors.d.ts.map +1 -1
package/dist/utils/recalculate-scrollable-ancestors.js +4 -4
package/dist/utils/recalculate-scrollable-ancestors.js.map +1 -1
package/dist/utils/shadow-dom-aware-mutation-observer.d.ts +1 -1
package/dist/utils/shadow-dom-aware-mutation-observer.d.ts.map +1 -1
package/dist/utils/shadow-dom-aware-mutation-observer.js +19 -22
package/dist/utils/shadow-dom-aware-mutation-observer.js.map +1 -1
package/dist/utils/supports-anchor-positioning.d.ts +1 -1
package/dist/utils/supports-anchor-positioning.d.ts.map +1 -1
package/dist/utils/supports-anchor-positioning.js +1 -1
package/dist/utils/supports-anchor-positioning.js.map +1 -1
package/dist/utils/transform-violations.d.ts +2 -2
package/dist/utils/transform-violations.d.ts.map +1 -1
package/dist/utils/transform-violations.js +9 -9
package/dist/utils/transform-violations.js.map +1 -1
package/dist/utils/update-elements-with-issues.d.ts +11 -5
package/dist/utils/update-elements-with-issues.d.ts.map +1 -1
package/dist/utils/update-elements-with-issues.js +54 -26
package/dist/utils/update-elements-with-issues.js.map +1 -1
package/dist/validate-options.d.ts +2 -2
package/dist/validate-options.d.ts.map +1 -1
package/dist/validate-options.js +91 -4
package/dist/validate-options.js.map +1 -1
package/package.json +11 -5
package/src/accented.test.ts +2 -2
package/src/accented.ts +38 -28
package/src/common/tokens.ts +1 -0
package/src/dom-updater.ts +59 -22
package/src/elements/accented-dialog.ts +102 -106
package/src/elements/accented-trigger.ts +58 -48
package/src/fullscreen-listener.ts +15 -11
package/src/intersection-observer.ts +27 -16
package/src/log-and-rethrow.ts +2 -3
package/src/logger.ts +14 -4
package/src/register-elements.ts +7 -7
package/src/resize-listener.ts +15 -11
package/src/scanner.ts +70 -50
package/src/scroll-listeners.ts +27 -19
package/src/state.ts +24 -21
package/src/task-queue.test.ts +5 -4
package/src/task-queue.ts +8 -6
package/src/types.ts +74 -42
package/src/utils/are-elements-with-issues-equal.ts +7 -5
package/src/utils/are-issue-sets-equal.test.ts +10 -6
package/src/utils/are-issue-sets-equal.ts +8 -6
package/src/utils/containing-blocks.ts +60 -0
package/src/utils/contains.test.ts +55 -0
package/src/utils/contains.ts +19 -0
package/src/utils/deduplicate-nodes.ts +3 -0
package/src/utils/deep-merge.test.ts +8 -1
package/src/utils/deep-merge.ts +11 -8
package/src/utils/dom-helpers.ts +20 -0
package/src/utils/ensure-non-empty.ts +6 -0
package/src/utils/get-element-html.ts +4 -2
package/src/utils/get-element-position.ts +51 -22
package/src/utils/get-parent.ts +1 -1
package/src/utils/get-scan-context.test.ts +85 -0
package/src/utils/get-scan-context.ts +36 -0
package/src/utils/get-scrollable-ancestors.ts +8 -5
package/src/utils/is-node-in-scan-context.test.ts +70 -0
package/src/utils/is-node-in-scan-context.ts +29 -0
package/src/utils/is-non-empty.ts +3 -0
package/src/utils/normalize-context.test.ts +105 -0
package/src/utils/normalize-context.ts +65 -0
package/src/utils/recalculate-positions.ts +5 -5
package/src/utils/recalculate-scrollable-ancestors.ts +4 -4
package/src/utils/shadow-dom-aware-mutation-observer.ts +21 -24
package/src/utils/supports-anchor-positioning.ts +3 -3
package/src/utils/transform-violations.test.ts +22 -20
package/src/utils/transform-violations.ts +14 -10
package/src/utils/update-elements-with-issues.test.ts +102 -49
package/src/utils/update-elements-with-issues.ts +122 -58
package/src/validate-options.ts +154 -14

package/src/utils/get-element-position.ts CHANGED Viewed

@@ -1,15 +1,36 @@
-import type { Position } from '../types';
+import type { Position } from '../types.ts';
+import { createsContainingBlock } from './containing-blocks.js';
 import { isHtmlElement } from './dom-helpers.js';
-import getParent from './get-parent.js';
+import { getParent } from './get-parent.js';
 // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block
 function isContainingBlock(element: Element, win: Window): boolean {
   const style = win.getComputedStyle(element);
-  const { transform, perspective } = style;
-  // TODO: https://github.com/pomerantsev/accented/issues/119
-  // Support other types of containing blocks
-  return transform !== 'none'
-    || perspective !== 'none';
+  const {
+    transform,
+    perspective,
+    contain,
+    contentVisibility,
+    containerType,
+    filter,
+    backdropFilter,
+    willChange,
+  } = style;
+  const containItems = contain.split(' ');
+  const willChangeItems = willChange.split(/\s*,\s*/);
+  return (
+    transform !== 'none' ||
+    perspective !== 'none' ||
+    containItems.some((item) => ['layout', 'paint', 'strict', 'content'].includes(item)) ||
+    contentVisibility === 'auto' ||
+    (createsContainingBlock('containerType') && containerType !== 'normal') ||
+    (createsContainingBlock('filter') && filter !== 'none') ||
+    (createsContainingBlock('backdropFilter') && backdropFilter !== 'none') ||
+    willChangeItems.some((item) =>
+      ['transform', 'perspective', 'contain', 'filter', 'backdrop-filter'].includes(item),
+    )
+  );
 }
 function getNonInitialContainingBlock(element: Element, win: Window): Element | null {
@@ -23,10 +44,20 @@ function getNonInitialContainingBlock(element: Element, win: Window): Element |
   return null;
 }
-export default function getElementPosition(element: Element, win: Window): Position {
+/**
+ * https://github.com/pomerantsev/accented/issues/116
+ *
+ * This calculation leads to incorrectly positioned Accented triggers when all of the following are true:
+ * * The element is an SVG element.
+ * * The element itself, or one of the element's ancestors has a scale or rotate transform.
+ * * The browser doesn't support anchor positioning.
+ */
+export function getElementPosition(element: Element, win: Window): Position {
   const nonInitialContainingBlock = getNonInitialContainingBlock(element, win);
-  // If an element has an ancestor whose transform is not 'none',
+  // If an element has a containing block as an ancestor,
+  // and that containing block is not the <html> element (the initial containing block),
   // fixed positioning works differently.
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#effects_of_the_containing_block
   // https://achrafkassioui.com/blog/position-fixed-and-CSS-transforms/
   if (nonInitialContainingBlock) {
     if (isHtmlElement(element)) {
@@ -42,19 +73,17 @@ export default function getElementPosition(element: Element, win: Window): Posit
         currentElement = currentElement.offsetParent as HTMLElement | null;
       }
       return { top, left, width, height };
-    } else {
-      // TODO: https://github.com/pomerantsev/accented/issues/116
-      // This is half-baked. It works incorrectly with scaled / rotated elements with issues.
-      const elementRect = element.getBoundingClientRect();
-      const nonInitialContainingBlockRect = nonInitialContainingBlock.getBoundingClientRect();
-      return {
-        top: elementRect.top - nonInitialContainingBlockRect.top,
-        height: elementRect.height,
-        left: elementRect.left - nonInitialContainingBlockRect.left,
-        width: elementRect.width
-      };
     }
-  } else {
-    return element.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    const nonInitialContainingBlockRect = nonInitialContainingBlock.getBoundingClientRect();
+    return {
+      top: elementRect.top - nonInitialContainingBlockRect.top,
+      height: elementRect.height,
+      left: elementRect.left - nonInitialContainingBlockRect.left,
+      width: elementRect.width,
+    };
   }
+  return element.getBoundingClientRect();
 }

package/src/utils/get-parent.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { isDocumentFragment, isShadowRoot } from './dom-helpers.js';
-export default function getParent (element: Element): Element | null {
+export function getParent(element: Element): Element | null {
   if (element.parentElement) {
     return element.parentElement;
   }

package/src/utils/get-scan-context.test.ts ADDED Viewed

@@ -0,0 +1,85 @@
+import assert from 'node:assert/strict';
+import { suite, test } from 'node:test';
+import { JSDOM } from 'jsdom';
+import { getScanContext } from './get-scan-context';
+suite('getScanContext', () => {
+  test('when context doesn’t overlap with nodes, the result is empty', () => {
+    const dom = new JSDOM('<div><div id="context"></div><div id="mutated-node"></div></div>');
+    const { document } = dom.window;
+    global.document = document;
+    const mutatedNode = document.querySelector('#mutated-node')!;
+    const scanContext = getScanContext([mutatedNode], '#context');
+    assert.deepEqual(scanContext, {
+      include: [],
+      exclude: [],
+    });
+  });
+  test('when context is within the mutated node, the result is the context', () => {
+    const dom = new JSDOM('<div><div id="mutated-node"><div id="context"></div></div></div>');
+    const { document } = dom.window;
+    global.document = document;
+    const mutatedNode = document.querySelector('#mutated-node')!;
+    const scanContext = getScanContext([mutatedNode], '#context');
+    const contextNode = document.querySelector('#context')!;
+    assert.deepEqual(scanContext, {
+      include: [contextNode],
+      exclude: [],
+    });
+  });
+  test('when mutated node is within context, the mutated node and the context nodes within it are correctly included / excluded', () => {
+    const dom = new JSDOM(`<div>
+      <div class="include" id="outer-include">
+        <div id="mutated-node">
+          <div class="exclude" id="inner-exclude">
+            <div class="include" id="inner-include"></div>
+          </div>
+        </div>
+      </div>
+    </div>`);
+    const { document } = dom.window;
+    global.document = document;
+    const mutatedNode = document.querySelector('#mutated-node')!;
+    const scanContext = getScanContext([mutatedNode], {
+      include: ['.include'],
+      exclude: ['.exclude'],
+    });
+    const innerExclude = document.querySelector('#inner-exclude')!;
+    const innerInclude = document.querySelector('#inner-include')!;
+    assert.deepEqual(scanContext, {
+      include: [mutatedNode, innerInclude],
+      exclude: [innerExclude],
+    });
+  });
+  test('when mutated node is within exclude, context elements within it are still included', () => {
+    const dom = new JSDOM(`<div>
+      <div class="exclude" id="outer-exclude">
+        <div id="mutated-node">
+          <div class="exclude" id="inner-exclude">
+            <div class="include" id="inner-include"></div>
+          </div>
+        </div>
+      </div>
+    </div>`);
+    const { document } = dom.window;
+    global.document = document;
+    const mutatedNode = document.querySelector('#mutated-node')!;
+    const scanContext = getScanContext([mutatedNode], {
+      include: ['.include'],
+      exclude: ['.exclude'],
+    });
+    const innerExclude = document.querySelector('#inner-exclude')!;
+    const innerInclude = document.querySelector('#inner-include')!;
+    assert.deepEqual(scanContext, {
+      include: [innerInclude],
+      exclude: [innerExclude],
+    });
+  });
+});

package/src/utils/get-scan-context.ts ADDED Viewed

@@ -0,0 +1,36 @@
+import type { Context, ScanContext } from '../types.ts';
+import { contains } from './contains.js';
+import { deduplicateNodes } from './deduplicate-nodes.js';
+import { isNodeInScanContext } from './is-node-in-scan-context.js';
+import { normalizeContext } from './normalize-context.js';
+export function getScanContext(nodes: Array<Node>, context: Context): ScanContext {
+  const { include: contextInclude, exclude: contextExclude } = normalizeContext(context);
+  // Filter only nodes that are included by context (see isNodeInContext above).
+  const nodesInContext = nodes.filter((node) =>
+    isNodeInScanContext(node, {
+      include: contextInclude,
+      exclude: contextExclude,
+    }),
+  );
+  const include: Array<Node> = [];
+  const exclude: Array<Node> = [];
+  // Adds all nodesInContext to the include array.
+  include.push(...nodesInContext);
+  // Now add any included and excluded context nodes that are contained by any of the original nodes.
+  for (const node of nodes) {
+    const includeDescendants = contextInclude.filter((item) => contains(node, item));
+    include.push(...includeDescendants);
+    const excludeDescendants = contextExclude.filter((item) => contains(node, item));
+    exclude.push(...excludeDescendants);
+  }
+  return {
+    include: deduplicateNodes(include),
+    exclude: deduplicateNodes(exclude),
+  };
+}

package/src/utils/get-scrollable-ancestors.ts CHANGED Viewed

@@ -1,19 +1,22 @@
-import getParent from './get-parent.js';
+import { getParent } from './get-parent.js';
 const scrollableOverflowValues = new Set(['auto', 'scroll', 'hidden']);
-export default function getScrollableAncestors (element: Element, win: Window) {
+export function getScrollableAncestors(element: Element, win: Window) {
   let currentElement: Element | null = element;
-  let scrollableAncestors = new Set<Element>();
+  const scrollableAncestors = new Set<Element>();
   while (true) {
     currentElement = getParent(currentElement);
     if (!currentElement) {
       break;
     }
     const computedStyle = win.getComputedStyle(currentElement);
-    if (scrollableOverflowValues.has(computedStyle.overflowX) || scrollableOverflowValues.has(computedStyle.overflowY)) {
+    if (
+      scrollableOverflowValues.has(computedStyle.overflowX) ||
+      scrollableOverflowValues.has(computedStyle.overflowY)
+    ) {
       scrollableAncestors.add(currentElement);
     }
   }
   return scrollableAncestors;
-};
+}

package/src/utils/is-node-in-scan-context.test.ts ADDED Viewed

@@ -0,0 +1,70 @@
+import assert from 'node:assert/strict';
+import { suite, test } from 'node:test';
+import { JSDOM } from 'jsdom';
+import { isNodeInScanContext } from './is-node-in-scan-context';
+suite('isNodeInScanContext', () => {
+  test('doesn’t include an element if scan context is empty', () => {
+    const dom = new JSDOM('<div id="test"></div>');
+    const { document } = dom.window;
+    const node = document.querySelector('#test')!;
+    const scanContext = { include: [], exclude: [] };
+    assert.equal(isNodeInScanContext(node, scanContext), false);
+  });
+  test('includes an element whose ancestor is included', () => {
+    const dom = new JSDOM('<div id="test"></div>');
+    const { document } = dom.window;
+    const node = document.querySelector('#test')!;
+    const body = document.body;
+    const scanContext = { include: [body], exclude: [] };
+    assert.ok(isNodeInScanContext(node, scanContext));
+  });
+  test('does not include an element whose closest ancestor is excluded', () => {
+    const dom = new JSDOM('<div id="excluded"><div id="test"></div></div>');
+    const { document } = dom.window;
+    const node = document.querySelector('#test')!;
+    const body = document.body;
+    const excludedAncestor = document.querySelector('#excluded')!;
+    const scanContext = { include: [body], exclude: [excludedAncestor] };
+    assert.equal(isNodeInScanContext(node, scanContext), false);
+  });
+  test('includes an element if it itself is included', () => {
+    const dom = new JSDOM('<div id="test"></div>');
+    const { document } = dom.window;
+    const node = document.querySelector('#test')!;
+    const scanContext = { include: [node], exclude: [] };
+    assert.ok(isNodeInScanContext(node, scanContext));
+  });
+  test('doesn’t include an element if it itself is excluded', () => {
+    const dom = new JSDOM('<div id="test"></div>');
+    const { document } = dom.window;
+    const node = document.querySelector('#test')!;
+    const body = document.body;
+    const scanContext = { include: [body], exclude: [node] };
+    assert.equal(isNodeInScanContext(node, scanContext), false);
+  });
+  test('includes an element if it’s both included and excluded (include takes precedence)', () => {
+    const dom = new JSDOM('<div id="test"></div>');
+    const { document } = dom.window;
+    const node = document.querySelector('#test')!;
+    const scanContext = { include: [node], exclude: [node] };
+    assert.ok(isNodeInScanContext(node, scanContext));
+  });
+});

package/src/utils/is-node-in-scan-context.ts ADDED Viewed

@@ -0,0 +1,29 @@
+/* Adapted from https://github.com/dequelabs/axe-core/blob/fd6239bfc97ebc904044f93f68d7e49137f744ad/lib/core/utils/is-node-in-context.js */
+import type { ScanContext } from '../types.ts';
+import { contains } from './contains.js';
+import { ensureNonEmpty } from './ensure-non-empty.js';
+function getDeepest(nodes: [Node, ...Node[]]): Node {
+  let deepest = nodes[0];
+  for (const node of nodes.slice(1)) {
+    if (!contains(node, deepest)) {
+      deepest = node;
+    }
+  }
+  return deepest;
+}
+export function isNodeInScanContext(node: Node, { include, exclude }: ScanContext): boolean {
+  const filteredInclude = include.filter((includeNode) => contains(includeNode, node));
+  if (filteredInclude.length === 0) {
+    return false;
+  }
+  const filteredExclude = exclude.filter((excludeNode) => contains(excludeNode, node));
+  if (filteredExclude.length === 0) {
+    return true;
+  }
+  const deepestInclude = getDeepest(ensureNonEmpty(filteredInclude));
+  const deepestExclude = getDeepest(ensureNonEmpty(filteredExclude));
+  return contains(deepestExclude, deepestInclude);
+}

package/src/utils/is-non-empty.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export function isNonEmpty<T>(arr: T[]): arr is [T, ...T[]] {
+  return arr.length > 0;
+}

package/src/utils/normalize-context.test.ts ADDED Viewed

@@ -0,0 +1,105 @@
+import assert from 'node:assert/strict';
+import { suite, test } from 'node:test';
+import { JSDOM } from 'jsdom';
+import { normalizeContext } from './normalize-context';
+suite('normalizeContext', () => {
+  test('when document is passed, only document is returned in include', () => {
+    const dom = new JSDOM('<div id="test"></div>');
+    const { document } = dom.window;
+    const normalizedContext = normalizeContext(document);
+    assert.deepEqual(normalizedContext, {
+      include: [document],
+      exclude: [],
+    });
+  });
+  test('when an element is passed, only that element is returned in include', () => {
+    const dom = new JSDOM('<div id="test"></div>');
+    const { document } = dom.window;
+    const element = document.querySelector('#test')!;
+    const normalizedContext = normalizeContext(element);
+    assert.deepEqual(normalizedContext, {
+      include: [element],
+      exclude: [],
+    });
+  });
+  test('when a selector is passed and elements matching that selector exist, all those elements are included', () => {
+    const dom = new JSDOM(`<div>
+      <div class="matches"></div>
+      <div class="matches"></div>
+      <div class="doesnt-match"></div>
+    </div>`);
+    const { document } = dom.window;
+    global.document = document;
+    const matchingElements = Array.from(document.querySelectorAll('.matches'));
+    const normalizedContext = normalizeContext('.matches');
+    assert.equal(matchingElements.length, 2);
+    assert.deepEqual(normalizedContext, {
+      include: matchingElements,
+      exclude: [],
+    });
+  });
+  test('when a selector is passed and no elements matching that selector exist, `include` is empty', () => {
+    const dom = new JSDOM(`<div>
+      <div class="doesnt-match"></div>
+      <div class="doesnt-match"></div>
+      <div class="doesnt-match"></div>
+    </div>`);
+    const { document } = dom.window;
+    global.document = document;
+    const normalizedContext = normalizeContext('.matches');
+    assert.deepEqual(normalizedContext, {
+      include: [],
+      exclude: [],
+    });
+  });
+  test('when a node list is passed, all the nodes from the list are included', () => {
+    const dom = new JSDOM(`<div>
+      <div class="matches"></div>
+      <div class="matches"></div>
+      <div class="doesnt-match"></div>
+    </div>`);
+    const { document } = dom.window;
+    const matchingElements = document.querySelectorAll('.matches');
+    const normalizedContext = normalizeContext(matchingElements);
+    assert.equal(matchingElements.length, 2);
+    assert.deepEqual(normalizedContext, {
+      include: Array.from(matchingElements),
+      exclude: [],
+    });
+  });
+  test('when an object with `fromShadowDom` is passed, all the matching nodes are included', () => {
+    const dom = new JSDOM(`<div>
+      <div class="host"></div>
+      <div class="host"></div>
+    </div>`);
+    const { document } = dom.window;
+    global.document = document;
+    const hosts = document.querySelectorAll('.host');
+    const matchingElements = [];
+    for (const host of hosts) {
+      const shadowRoot = host.attachShadow({ mode: 'open' });
+      const matchingElement = document.createElement('div');
+      matchingElement.classList.add('matches');
+      shadowRoot.appendChild(matchingElement);
+      matchingElements.push(matchingElement);
+    }
+    const normalizedContext = normalizeContext({ fromShadowDom: ['.host', '.matches'] });
+    assert.equal(matchingElements.length, 2);
+    assert.deepEqual(normalizedContext, {
+      include: matchingElements,
+      exclude: [],
+    });
+  });
+});

package/src/utils/normalize-context.ts ADDED Viewed

@@ -0,0 +1,65 @@
+import type { Context, ContextProp, ScanContext, Selector } from '../types.ts';
+import { deduplicateNodes } from './deduplicate-nodes.js';
+import { isNode, isNodeList } from './dom-helpers.js';
+import { isNonEmpty } from './is-non-empty.js';
+function recursiveSelectAll(
+  selectors: [string, ...string[]],
+  root: Document | ShadowRoot,
+): Array<Node> {
+  const nodesOnCurrentLevel = root.querySelectorAll(selectors[0]);
+  if (selectors.length === 1) {
+    return Array.from(nodesOnCurrentLevel);
+  }
+  const restSelectors: Array<string> = selectors.slice(1);
+  if (!isNonEmpty(restSelectors)) {
+    throw new Error('Error: the restSelectors array must not be empty.');
+  }
+  const selected = [];
+  for (const node of nodesOnCurrentLevel) {
+    if (node.shadowRoot) {
+      selected.push(...recursiveSelectAll(restSelectors, node.shadowRoot));
+    }
+  }
+  return selected;
+}
+function selectorToNodes(selector: Selector): Array<Node> {
+  if (typeof selector === 'string') {
+    return recursiveSelectAll([selector], document);
+  }
+  if (isNode(selector)) {
+    return [selector];
+  }
+  return recursiveSelectAll(selector.fromShadowDom, document);
+}
+function contextPropToNodes(contextProp: ContextProp): Array<Node> {
+  let nodes: Array<Node> = [];
+  if (typeof contextProp === 'object' && (Array.isArray(contextProp) || isNodeList(contextProp))) {
+    nodes = Array.from(contextProp).flatMap((item) => selectorToNodes(item));
+  } else {
+    nodes = selectorToNodes(contextProp);
+  }
+  return deduplicateNodes(nodes);
+}
+export function normalizeContext(context: Context): ScanContext {
+  let contextInclude: Array<Node> = [];
+  let contextExclude: Array<Node> = [];
+  if (typeof context === 'object' && ('include' in context || 'exclude' in context)) {
+    if (context.include !== undefined) {
+      contextInclude = contextPropToNodes(context.include);
+    }
+    if (context.exclude !== undefined) {
+      contextExclude = contextPropToNodes(context.exclude);
+    }
+  } else {
+    contextInclude = contextPropToNodes(context);
+  }
+  return {
+    include: contextInclude,
+    exclude: contextExclude,
+  };
+}

package/src/utils/recalculate-positions.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 import { batch } from '@preact/signals-core';
+import { logAndRethrow } from '../log-and-rethrow.js';
 import { extendedElementsWithIssues } from '../state.js';
-import getElementPosition from './get-element-position.js';
-import logAndRethrow from '../log-and-rethrow.js';
+import { getElementPosition } from './get-element-position.js';
 let frameRequested = false;
-export default function recalculatePositions() {
+export function recalculatePositions() {
   if (frameRequested) {
     return;
   }
@@ -14,11 +14,11 @@ export default function recalculatePositions() {
     try {
       frameRequested = false;
       batch(() => {
-        extendedElementsWithIssues.value.forEach(({ element, position, visible }) => {
+        for (const { element, position, visible } of extendedElementsWithIssues.value) {
           if (visible.value && element.isConnected) {
             position.value = getElementPosition(element, window);
           }
-        });
+        }
       });
     } catch (error) {
       logAndRethrow(error);

package/src/utils/recalculate-scrollable-ancestors.ts CHANGED Viewed

@@ -1,13 +1,13 @@
 import { batch } from '@preact/signals-core';
 import { extendedElementsWithIssues } from '../state.js';
-import getScrollableAncestors from './get-scrollable-ancestors.js';
+import { getScrollableAncestors } from './get-scrollable-ancestors.js';
-export default function recalculateScrollableAncestors() {
+export function recalculateScrollableAncestors() {
   batch(() => {
-    extendedElementsWithIssues.value.forEach(({ element, scrollableAncestors }) => {
+    for (const { element, scrollableAncestors } of extendedElementsWithIssues.value) {
       if (element.isConnected) {
         scrollableAncestors.value = getScrollableAncestors(element, window);
       }
-    });
+    }
   });
 }

package/src/utils/shadow-dom-aware-mutation-observer.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { isElement, isDocument, isDocumentFragment } from './dom-helpers.js';
 import { getAccentedElementNames } from '../constants.js';
+import { isDocument, isDocumentFragment, isElement } from './dom-helpers.js';
-export default function createShadowDOMAwareMutationObserver (name: string, callback: MutationCallback) {
+export function createShadowDOMAwareMutationObserver(name: string, callback: MutationCallback) {
   class ShadowDOMAwareMutationObserver extends MutationObserver {
     #shadowRoots = new Set();
@@ -10,22 +10,19 @@ export default function createShadowDOMAwareMutationObserver (name: string, call
     constructor(callback: MutationCallback) {
       super((mutations, observer) => {
         const accentedElementNames = getAccentedElementNames(name);
-        const childListMutations = mutations
-          .filter(mutation => mutation.type === 'childList')
+        const childListMutations = mutations.filter((mutation) => mutation.type === 'childList');
         const newElements = childListMutations
-          .map(mutation => [...mutation.addedNodes])
-          .flat()
-          .filter(node => isElement(node))
-          .filter(node => !accentedElementNames.includes(node.nodeName.toLowerCase()));
+          .flatMap((mutation) => [...mutation.addedNodes])
+          .filter((node) => isElement(node))
+          .filter((node) => !accentedElementNames.includes(node.nodeName.toLowerCase()));
         this.#observeShadowRoots(newElements);
         const removedElements = childListMutations
-          .map(mutation => [...mutation.removedNodes])
-          .flat()
-          .filter(node => isElement(node))
-          .filter(node => !accentedElementNames.includes(node.nodeName.toLowerCase()));
+          .flatMap((mutation) => [...mutation.removedNodes])
+          .filter((node) => isElement(node))
+          .filter((node) => !accentedElementNames.includes(node.nodeName.toLowerCase()));
         // Mutation observer has no "unobserve" method, so we're simply deleting
         // the elements from the set of shadow roots.
@@ -50,28 +47,28 @@ export default function createShadowDOMAwareMutationObserver (name: string, call
     #observeShadowRoots = (elements: Array<Element | Document | DocumentFragment>) => {
       const shadowRoots = elements
-        .map(element => [...element.querySelectorAll('*')])
-        .flat()
-        .filter(element => element.shadowRoot)
-        .map(element => element.shadowRoot!);
+        .flatMap((element) => [...element.querySelectorAll('*')])
+        .filter((element) => element.shadowRoot)
+        .map((element) => element.shadowRoot);
       for (const shadowRoot of shadowRoots) {
-        this.#shadowRoots.add(shadowRoot);
-        this.observe(shadowRoot, this.#options);
+        if (shadowRoot) {
+          this.#shadowRoots.add(shadowRoot);
+          this.observe(shadowRoot, this.#options);
+        }
       }
-    }
+    };
     #deleteShadowRoots = (elements: Array<Element | Document | DocumentFragment>) => {
       const shadowRoots = elements
-        .map(element => [...element.querySelectorAll('*')])
-        .flat()
-        .filter(element => element.shadowRoot)
-        .map(element => element.shadowRoot!);
+        .flatMap((element) => [...element.querySelectorAll('*')])
+        .filter((element) => element.shadowRoot)
+        .map((element) => element.shadowRoot);
       for (const shadowRoot of shadowRoots) {
         this.#shadowRoots.delete(shadowRoot);
       }
-    }
+    };
   }
   return new ShadowDOMAwareMutationObserver(callback);