https://github.com/x-kom/component-trace-element-finder
Simple helper functions for finding DOM elements through "component trace"
https://github.com/x-kom/component-trace-element-finder
data-attributes dom-selection html testing
Last synced: 3 months ago
JSON representation
Simple helper functions for finding DOM elements through "component trace"
- Host: GitHub
- URL: https://github.com/x-kom/component-trace-element-finder
- Owner: x-kom
- License: mit
- Created: 2019-02-14T12:28:21.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-18T15:11:31.000Z (over 6 years ago)
- Last Synced: 2025-02-09T12:47:39.271Z (4 months ago)
- Topics: data-attributes, dom-selection, html, testing
- Language: TypeScript
- Homepage:
- Size: 31.3 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# component-trace-element-finder
Simple functions that help finding DOM elements through "component trace".
### React - babel plugin
To get it working you can simply use [babel-plugin-react-component-trace-data-attr](https://github.com/x-kom/babel-plugin-react-component-trace-data-attr) with default `separator` and `attribute` options.
### Manual usage
You can also manually add `data-component-trace` attributes to your dom elements and separate the component names using single space.
## API
| Method name | Description |
|-------------|-------------|
| **`findAllComponentsByTrace`**
(name: string, parent?: Element | Document) | Returns all elements that have `name` in their trace. Use `parent` to search only within the given element. |
| **`findTopComponentsByTrace`**
(name: string, parent?: Element | Document) | Returns all elements that have `name` in their trace but **are not contained** within elements that have `name` in their trace too. Use `parent` to search only within the given element. |
## Example
Consider the following HTML markup
```html
ðŸŒ
Witness me
💥
What a day, what a lovely day!
```
If you call
```js
findAllComponentsByTrace('second-component')
```
you will get a set with all shown elements: `h1`, `div` and two `span`s. However when you change the function to
```js
findTopComponentsByTrace('second-component')
```
you will get only `h1` and `div`, since `span`s are inside the `h1`/`div` and thus are not considered a "top" component here.
You can use parent to search for an element iside any other given element
```js
const header = findTopComponentsByTrace('header-of-component');
const iconInHeader = findTopComponentsByTrace('icon', header[0]);
```