wip: dnm testing size and verdaccio shadowdom for size testing #7548

snowystinger · 2024-12-23T10:55:23Z

Closes

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

Update domHelpers.test.js.

Add Tests for FocusScope.test.js. New helper util `getRootBody`.

Fix `useRestoreFocus` issue. Add new DOM util `getDeepActiveElement`.

… navigation example`.

update `useFocus` - `useFocusWithin` - `usePress`.

Test for `focusSafely`.

rspbot · 2024-12-23T11:23:23Z

Build successful! 🎉

rspbot · 2024-12-23T11:29:59Z

Build successful! 🎉

rspbot · 2024-12-23T11:48:02Z

Build successful! 🎉

rspbot · 2024-12-23T12:05:21Z

Build successful! 🎉

# Conflicts: # packages/@react-aria/focus/src/FocusScope.tsx

snowystinger · 2025-01-16T02:35:28Z

There appears to be no appreciable difference between node.contains and event.composedPath
run on the same dom of 100 nested divs, event fired on the lowest one, checking from document.body and with the same number of runs, times are consistently taking 10s to run in jest and differ from each other by 100ms in both directions depending on the run

describe('checking if node is contained', () => {
  let user;
  beforeAll(() => {
    user = userEvent.setup({delay: null, pointerMap});
  });
  it.only("benchmark native contains", async () => {
    let Component = (props) => {
      if (props.depth === 0) {
        return <div data-testid="hello">hello</div>
      }
      return <div><Component depth={props.depth -1}/></div>
    }
    let {getByTestId} = render(
      <Component depth={100} />
    );
    let target = getByTestId('hello');
    let handler = jest.fn((e) => {
      expect(e.currentTarget.contains(e.target)).toBe(true);
    });
    document.body.addEventListener('click', handler);
    for (let i = 0; i < 50; i++) {
      await user.click(target);
      expect(handler).toHaveBeenCalledTimes(i + 1);
    }
  });
  it.only("benchmark nodeContains", async () => {
    let Component = (props) => {
      if (props.depth === 0) {
        return <div data-testid="hello">hello</div>
      }
      return <div><Component depth={props.depth -1}/></div>
    }
    let {getByTestId} = render(
      <Component depth={100} />
    );
    let target = getByTestId('hello');
    let handler = jest.fn((e) => {
      expect(nodeContains(e.currentTarget, e.composedPath()[0])).toBe(true);
    });
    document.body.addEventListener('click', handler);
    for (let i = 0; i < 50; i++) {
      await user.click(target);
      expect(handler).toHaveBeenCalledTimes(i + 1);
    }
  });
});

snowystinger · 2025-01-16T02:53:03Z

There is a large difference in amount of time for shadow tree walker

Native:
Time taken for 10000 iterations: 41.57495799660683ms

Shadow:
Time taken for 10000 iterations: 1139.0474170148373ms

The good news is that usually we don't run it this far or as many times. It's typically in response to a user action with the walker destination not very far away and with 1 iteration being roughly 0.1ms, that's plenty of time.
We can still separate these so that not everyone is hit with the performance degradation, but I think we're ok to do that in followup, this should be ok for an initial release.

describe.only('speed test', () => {
  let Component = (props) => {
    if (props.depth === 0) {
      return <div data-testid="hello">hello</div>
    }
    return <div><Component depth={props.depth -1}/></div>
  }
  it.each`
  Name | createTreeWalker
  ${'native'} | ${() => document.createTreeWalker(document.body, NodeFilter.SHOW_ALL)}
  ${'shadow'} | ${() => createShadowTreeWalker(document, document.body)}
  `('$Name', ({createTreeWalker}) => {
    render(
      <>
        <div id="div-one" />
        <Component depth={100} />
        <input id="input-one" />
        <div id="div-two" />
        <Component depth={100} />
        <input id="input-two" />
        <div id="div-three" />
        <Component depth={100} />
        <input id="input-three" />
        <div id="div-four" />
        <Component depth={100} />
      </>
    );
    let walker = createTreeWalker();
    let start = performance.now();
    for (let i = 0; i < 10000; i++) {
      walker.firstChild();
      walker.nextNode();
      walker.previousNode();
      walker.lastChild();
    }
    let end = performance.now();
    console.log(`Time taken for 10000 iterations: ${end - start}ms`);
  });
});

…ting

snowystinger · 2025-01-16T02:56:05Z

~~attempting to get size commented~~

Sizes https://app.circleci.com/pipelines/github/adobe/react-spectrum/24303/workflows/fc3f1a68-0916-454d-91c3-f1e04367d0c7/jobs/392433

@react-aria/utils: original 82.179kB   branch 93.623kB   delta 11.44kB

This branch: https://reactspectrum.blob.core.windows.net/reactspectrum/a549500925359b7429d5e2f3d259bfff23e26607/verdaccio/publish-stats/next-build-stats.txt

Main:
https://reactspectrum.blob.core.windows.net/reactspectrum/1286a652e900dc621d96157b0cfe82716a729849/verdaccio/publish-stats/next-build-stats.txt

rspbot · 2025-01-16T03:20:15Z

Build successful! 🎉

rspbot · 2025-01-16T03:24:41Z

Build successful! 🎉

rspbot · 2025-01-16T03:37:03Z

Build successful! 🎉

rspbot · 2025-01-16T04:46:35Z

Build successful! 🎉

rspbot · 2025-01-16T05:05:33Z

Build successful! 🎉

rspbot · 2025-01-16T23:55:53Z

Build successful! 🎉

rspbot · 2025-01-17T00:13:32Z

Build successful! 🎉

rspbot · 2025-01-17T00:14:54Z

Build successful! 🎉

rspbot · 2025-01-17T00:14:55Z

## API Changes

@react-aria/focus

/@react-aria/focus:isFocusable

 isFocusable {
-  element: HTMLElement
+  element: Element
   returnVal: undefined
 }

@react-aria/utils

/@react-aria/utils:createShadowTreeWalker

+createShadowTreeWalker {
+  doc: Document
+  root: Node
+  whatToShow?: number
+  filter?: NodeFilter | null
+  returnVal: undefined
+}

/@react-aria/utils:ShadowTreeWalker

+ShadowTreeWalker {
+  constructor: (Document, Node, number, NodeFilter | null) => void
+  currentNode: Node
+  doc: Document
+  filter: NodeFilter | null
+  firstChild: () => Node | null
+  lastChild: () => Node | null
+  nextNode: () => Node | null
+  previousNode: () => Node | null
+  root: Node
+  whatToShow: number
+}

/@react-aria/utils:getActiveElement

+getActiveElement {
+  doc: Document
+  returnVal: undefined
+}

/@react-aria/utils:getEventTarget

+getEventTarget {
+  event: any
+  returnVal: undefined
+}

/@react-aria/utils:nodeContains

+nodeContains {
+  node: Node | null | undefined
+  otherNode: Node | null | undefined
+  returnVal: undefined
+}

/@react-aria/utils:isShadowRoot

+isShadowRoot {
+  node: Node | null
+  returnVal: undefined
+}

rspbot · 2025-01-17T00:31:18Z

Build successful! 🎉

MahmoudElsayad and others added 30 commits March 11, 2024 23:12

Add getRootNode utility.

c026270

Update getRootNode util.

9299cee

Update domHelpers.test.js.

Update getOwnerWindow util.

71836e3

Add tests for Shadow DOM handling using getRootNode.

10893b9

Update comment.

5f81d34

Fix FocusScope.tsx in Shadow DOM.

bfb9429

Add Tests for FocusScope.test.js. New helper util `getRootBody`.

Add more test for FocusScope.test.js.

3448ed7

Fix `useRestoreFocus` issue. Add new DOM util `getDeepActiveElement`.

Fix another useRestoreFocus issue with restoring focus in `Keyboard…

0c07404

… navigation example`.

Add tests for getDeepActiveElement

90906bf

Add useFocus shadow DOM tests.

314fc44

update `useFocus` - `useFocusWithin` - `usePress`.

Update focusSafely.

9cb6c5a

Test for `focusSafely`.

Update useInteractionOutside for Shadow DOM support.

67399bb

Update useFocusVisible for Shadow DOM support.

59c3705

Add useInteractOutside tests.

3c85408

Add test for use case mentioned in issue #1472.

61ba1b0

Add tests for usePress hook.

75d7fa5

Update the fix for useInteractOutside to use simpler one.

db45ef4

Update useOverlay to use composedPath.

f9b94a3

Tests refactor.

758575c

Revert useOverlay changes as it works correctly without these changes.

25ef5c5

Fix types.

0d4f70e

Merge branch 'main' into shadow-dom-enhancement-1-getRootNode

3cf2091

Fix types.

1d8c439

lint.

e5dbda1

lint.

ae7b76e

Fix failing tests.

aea5d8d

Fix failing tests.

f2ca9b7

Fix failing tests.

4d6ff95

Test CI

4c53797

Test CI

85b7146

fix lint

1660aad

Merge branch 'main' into for-size-testing

edd5019

snowystinger and others added 2 commits January 13, 2025 14:32

Merge branch 'main' into shadow-dom-enhancement-1-getRootNode

d90cc98

# Conflicts: # packages/@react-aria/focus/src/FocusScope.tsx

Merge branch 'main' into shadow-dom-enhancement-1-getRootNode

c43a15e

Merge branch 'main' into shadow-dom-enhancement-1-getRootNode

0d962db

snowystinger marked this pull request as ready for review January 16, 2025 02:53

snowystinger added 2 commits January 16, 2025 13:54

check in speed tests

9bf04b1

Merge branch 'shadow-dom-enhancement-1-getRootNode' into for-size-tes…

4c22e04

…ting

fix lint

613e129

get comment in the circle job hopefully

a549500

snowystinger mentioned this pull request Jan 16, 2025

feat: Focus Management within ShadowDOM #6046

Open

5 tasks

use shadow tree walker to see impact on aria hide outside

ba6fbd7

track time

95e6162

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

wip: dnm testing size and verdaccio shadowdom for size testing #7548

wip: dnm testing size and verdaccio shadowdom for size testing #7548

snowystinger commented Dec 23, 2024

rspbot commented Dec 23, 2024

rspbot commented Dec 23, 2024

rspbot commented Dec 23, 2024

rspbot commented Dec 23, 2024

snowystinger commented Jan 16, 2025

snowystinger commented Jan 16, 2025 •

edited

Loading

snowystinger commented Jan 16, 2025 •

edited

Loading

rspbot commented Jan 16, 2025

rspbot commented Jan 16, 2025

rspbot commented Jan 16, 2025

rspbot commented Jan 16, 2025

rspbot commented Jan 16, 2025

rspbot commented Jan 16, 2025

rspbot commented Jan 17, 2025

rspbot commented Jan 17, 2025

rspbot commented Jan 17, 2025

rspbot commented Jan 17, 2025

wip: dnm testing size and verdaccio shadowdom for size testing #7548

Are you sure you want to change the base?

wip: dnm testing size and verdaccio shadowdom for size testing #7548

Conversation

snowystinger commented Dec 23, 2024

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Dec 23, 2024

rspbot commented Dec 23, 2024

rspbot commented Dec 23, 2024

rspbot commented Dec 23, 2024

snowystinger commented Jan 16, 2025

snowystinger commented Jan 16, 2025 • edited Loading

snowystinger commented Jan 16, 2025 • edited Loading

rspbot commented Jan 16, 2025

rspbot commented Jan 16, 2025

rspbot commented Jan 16, 2025

rspbot commented Jan 16, 2025

rspbot commented Jan 16, 2025

rspbot commented Jan 16, 2025

rspbot commented Jan 17, 2025

rspbot commented Jan 17, 2025

rspbot commented Jan 17, 2025

@react-aria/focus

/@react-aria/focus:isFocusable

@react-aria/utils

/@react-aria/utils:createShadowTreeWalker

/@react-aria/utils:ShadowTreeWalker

/@react-aria/utils:getActiveElement

/@react-aria/utils:getEventTarget

/@react-aria/utils:nodeContains

/@react-aria/utils:isShadowRoot

rspbot commented Jan 17, 2025

snowystinger commented Jan 16, 2025 •

edited

Loading

snowystinger commented Jan 16, 2025 •

edited

Loading