mirror of
https://github.com/bendtherules/react-fiber-traverse.git
synced 2026-08-18 22:01:49 +00:00
Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
17046c9aa4 | ||
|
|
144f4a861b | ||
|
|
adb1dae2c2 | ||
|
|
c48057b6a4 |
+29
@@ -1,6 +1,35 @@
|
||||
language: node_js
|
||||
matrix:
|
||||
include:
|
||||
- name: "react 16.0.x"
|
||||
env: REACT_V=react@16.0.x REACT_DOM_V=react-dom@16.0.x
|
||||
- name: "react 16.1.x"
|
||||
env: REACT_V=react@16.1.x REACT_DOM_V=react-dom@16.1.x
|
||||
- name: "react 16.2.x"
|
||||
env: REACT_V=react@16.2.x REACT_DOM_V=react-dom@16.2.x
|
||||
- name: "react 16.3.x"
|
||||
env: REACT_V=react@16.3.x REACT_DOM_V=react-dom@16.3.x
|
||||
- name: "react 16.4.x"
|
||||
env: REACT_V=react@16.4.x REACT_DOM_V=react-dom@16.4.x
|
||||
- name: "react 16.5.x"
|
||||
env: REACT_V=react@16.5.x REACT_DOM_V=react-dom@16.5.x
|
||||
- name: "react 16.6.x"
|
||||
env: REACT_V=react@16.6.x REACT_DOM_V=react-dom@16.6.x
|
||||
- name: "react 16.7.x"
|
||||
env: REACT_V=react@16.7.x REACT_DOM_V=react-dom@16.7.x
|
||||
- name: "react 16.8.x"
|
||||
env: REACT_V=react@16.8.x REACT_DOM_V=react-dom@16.8.x
|
||||
- name: "react 16.9.x"
|
||||
env: REACT_V=react@16.9.x REACT_DOM_V=react-dom@16.9.x
|
||||
|
||||
notifications:
|
||||
email: false
|
||||
|
||||
# Install reqd react and react-dom version for each matrix
|
||||
before_script:
|
||||
- echo $REACT_V $REACT_DOM_V # log react and react-dom versions
|
||||
- npm i --no-save $REACT_V $REACT_DOM_V # install them
|
||||
|
||||
script:
|
||||
- npm run test
|
||||
- npx codecov
|
||||
|
||||
Vendored
+1
-2
@@ -13,6 +13,5 @@
|
||||
"javascriptreact",
|
||||
"typescript",
|
||||
"typescriptreact"
|
||||
],
|
||||
"typescript.tsdk": "node_modules\\typescript\\lib"
|
||||
]
|
||||
}
|
||||
@@ -6,7 +6,6 @@
|
||||
4. Build some demo
|
||||
|
||||
5. Add `findAllNodes` helpers which searches all usages of the components - by name or class
|
||||
6. Allow using all methods without explicit root node. Find automatically, if not provided.
|
||||
|
||||
6. Fix getRootFiberNodeFromDOM and related helpers -
|
||||
- .\_internalRoot is not present is 16.0.0 but present in 16.9.0
|
||||
@@ -15,10 +14,3 @@
|
||||
|
||||
7. Make it work with older React versions
|
||||
8. Make it work with non React-DOM renderers
|
||||
|
||||
9. Add test - traverseGenerator - siblings were traversed earlier, not now. Check input config.
|
||||
|
||||
10. Find node by CSS (query language) - Make it work for Class/Function reference also
|
||||
11. Allow easy way to continue FiberNode select with CSS selector for dom node (handling Fragments)
|
||||
|
||||
12. Helper and filter by props and state
|
||||
@@ -80,36 +80,6 @@ For the minified production version, make sure you have already included:
|
||||
- [`React`](https://unpkg.com/react/umd/react.production.min.js)
|
||||
- [`ReactDOM`](https://unpkg.com/react-dom/umd/react-dom.production.min.js)
|
||||
|
||||
## Overview
|
||||
|
||||
This package contains few utility functions which operate over react-fiber tree.
|
||||
|
||||
Overall characteristics are:
|
||||
1. Only read-only operations
|
||||
2. Support inversion of control
|
||||
|
||||
There are few categories of helpers, each with their variations:
|
||||
1. Find node(s)
|
||||
2. Traverse node
|
||||
3. Others - Check node type, find root node, etc.
|
||||
|
||||
Little more info is present in docs section.
|
||||
|
||||
## Concerns and improvements
|
||||
|
||||
Currently, it assumes that nodes are created by `react 16.3+` with appropriate `react-dom`.
|
||||
|
||||
Because fiber nodes are internal to react and are supported by multiple renderers, this is an incorrect assumption to make. It should:
|
||||
1. support diff versions of react (which have fiber node, but slight variations of it)
|
||||
2. be renderer-agnostic (say, support react-fs-renderer) but with extra helpers for react-dom.
|
||||
3. heavily tested with all these variations (to know when internals have changed).
|
||||
|
||||
## Docs
|
||||
|
||||
Docs are sparse at the moment. I plan on adding them soon.
|
||||
|
||||
Till then, the auto-generated (typedoc) docs available in [docs folder](./docs/globals.md) might be of some help.
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
|
||||
@@ -347,7 +347,7 @@ ___
|
||||
|
||||
• **_reactRootContainer**: *object*
|
||||
|
||||
*Defined in [mocked-types/index.ts:4](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L4)*
|
||||
*Defined in [mocked-types/index.ts:4](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L4)*
|
||||
|
||||
#### Type declaration:
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
• **child**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null*
|
||||
|
||||
*Defined in [mocked-types/index.ts:28](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L28)*
|
||||
*Defined in [mocked-types/index.ts:28](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L28)*
|
||||
|
||||
___
|
||||
|
||||
@@ -32,7 +32,7 @@ ___
|
||||
|
||||
• **elementType**: *`ComponentClass`*
|
||||
|
||||
*Defined in [mocked-types/index.ts:31](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L31)*
|
||||
*Defined in [mocked-types/index.ts:31](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L31)*
|
||||
|
||||
___
|
||||
|
||||
@@ -40,7 +40,7 @@ ___
|
||||
|
||||
• **sibling**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null*
|
||||
|
||||
*Defined in [mocked-types/index.ts:29](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L29)*
|
||||
*Defined in [mocked-types/index.ts:29](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L29)*
|
||||
|
||||
___
|
||||
|
||||
@@ -48,7 +48,7 @@ ___
|
||||
|
||||
• **stateNode**: *`Component`*
|
||||
|
||||
*Defined in [mocked-types/index.ts:34](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L34)*
|
||||
*Defined in [mocked-types/index.ts:34](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L34)*
|
||||
|
||||
___
|
||||
|
||||
@@ -56,4 +56,4 @@ ___
|
||||
|
||||
• **type**: *`ComponentClass`*
|
||||
|
||||
*Defined in [mocked-types/index.ts:32](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L32)*
|
||||
*Defined in [mocked-types/index.ts:32](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L32)*
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
• **child**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null*
|
||||
|
||||
*Defined in [mocked-types/index.ts:18](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L18)*
|
||||
*Defined in [mocked-types/index.ts:18](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L18)*
|
||||
|
||||
___
|
||||
|
||||
@@ -32,7 +32,7 @@ ___
|
||||
|
||||
• **elementType**: *`FunctionComponent`*
|
||||
|
||||
*Defined in [mocked-types/index.ts:21](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L21)*
|
||||
*Defined in [mocked-types/index.ts:21](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L21)*
|
||||
|
||||
___
|
||||
|
||||
@@ -40,7 +40,7 @@ ___
|
||||
|
||||
• **sibling**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null*
|
||||
|
||||
*Defined in [mocked-types/index.ts:19](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L19)*
|
||||
*Defined in [mocked-types/index.ts:19](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L19)*
|
||||
|
||||
___
|
||||
|
||||
@@ -48,7 +48,7 @@ ___
|
||||
|
||||
• **stateNode**: *null*
|
||||
|
||||
*Defined in [mocked-types/index.ts:24](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L24)*
|
||||
*Defined in [mocked-types/index.ts:24](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L24)*
|
||||
|
||||
___
|
||||
|
||||
@@ -56,4 +56,4 @@ ___
|
||||
|
||||
• **type**: *`FunctionComponent`*
|
||||
|
||||
*Defined in [mocked-types/index.ts:22](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L22)*
|
||||
*Defined in [mocked-types/index.ts:22](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L22)*
|
||||
@@ -24,9 +24,9 @@
|
||||
|
||||
• **child**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null*
|
||||
|
||||
*Defined in [mocked-types/index.ts:38](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L38)*
|
||||
*Defined in [mocked-types/index.ts:38](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L38)*
|
||||
|
||||
*Defined in [mocked-types/index.ts:48](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L48)*
|
||||
*Defined in [mocked-types/index.ts:48](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L48)*
|
||||
|
||||
___
|
||||
|
||||
@@ -34,9 +34,9 @@ ___
|
||||
|
||||
• **elementType**: *keyof IntrinsicElements*
|
||||
|
||||
*Defined in [mocked-types/index.ts:41](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L41)*
|
||||
*Defined in [mocked-types/index.ts:41](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L41)*
|
||||
|
||||
*Defined in [mocked-types/index.ts:51](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L51)*
|
||||
*Defined in [mocked-types/index.ts:51](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L51)*
|
||||
|
||||
___
|
||||
|
||||
@@ -44,9 +44,9 @@ ___
|
||||
|
||||
• **sibling**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null*
|
||||
|
||||
*Defined in [mocked-types/index.ts:39](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L39)*
|
||||
*Defined in [mocked-types/index.ts:39](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L39)*
|
||||
|
||||
*Defined in [mocked-types/index.ts:49](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L49)*
|
||||
*Defined in [mocked-types/index.ts:49](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L49)*
|
||||
|
||||
___
|
||||
|
||||
@@ -54,9 +54,9 @@ ___
|
||||
|
||||
• **stateNode**: *`HTMLElement`*
|
||||
|
||||
*Defined in [mocked-types/index.ts:44](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L44)*
|
||||
*Defined in [mocked-types/index.ts:44](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L44)*
|
||||
|
||||
*Defined in [mocked-types/index.ts:54](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L54)*
|
||||
*Defined in [mocked-types/index.ts:54](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L54)*
|
||||
|
||||
___
|
||||
|
||||
@@ -64,6 +64,6 @@ ___
|
||||
|
||||
• **type**: *keyof IntrinsicElements*
|
||||
|
||||
*Defined in [mocked-types/index.ts:42](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L42)*
|
||||
*Defined in [mocked-types/index.ts:42](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L42)*
|
||||
|
||||
*Defined in [mocked-types/index.ts:52](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L52)*
|
||||
*Defined in [mocked-types/index.ts:52](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L52)*
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
• **child**: *null*
|
||||
|
||||
*Defined in [mocked-types/index.ts:58](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L58)*
|
||||
*Defined in [mocked-types/index.ts:58](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L58)*
|
||||
|
||||
___
|
||||
|
||||
@@ -32,7 +32,7 @@ ___
|
||||
|
||||
• **elementType**: *null*
|
||||
|
||||
*Defined in [mocked-types/index.ts:61](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L61)*
|
||||
*Defined in [mocked-types/index.ts:61](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L61)*
|
||||
|
||||
___
|
||||
|
||||
@@ -40,7 +40,7 @@ ___
|
||||
|
||||
• **sibling**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null*
|
||||
|
||||
*Defined in [mocked-types/index.ts:59](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L59)*
|
||||
*Defined in [mocked-types/index.ts:59](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L59)*
|
||||
|
||||
___
|
||||
|
||||
@@ -48,7 +48,7 @@ ___
|
||||
|
||||
• **stateNode**: *`Text`*
|
||||
|
||||
*Defined in [mocked-types/index.ts:64](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L64)*
|
||||
*Defined in [mocked-types/index.ts:64](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L64)*
|
||||
|
||||
___
|
||||
|
||||
@@ -56,4 +56,4 @@ ___
|
||||
|
||||
• **type**: *null*
|
||||
|
||||
*Defined in [mocked-types/index.ts:62](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L62)*
|
||||
*Defined in [mocked-types/index.ts:62](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L62)*
|
||||
@@ -18,23 +18,7 @@
|
||||
|
||||
▸ **findNodeByComponent**(`node`: [FiberNode](_mocked_types_index_.md#fibernode) | null, `expectedClassOrFunction`: `React.ComponentType`): *[FiberNode](_mocked_types_index_.md#fibernode) | null*
|
||||
|
||||
*Defined in [findNode.ts:67](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/findNode.ts#L67)*
|
||||
|
||||
Find node by component (i.e. class or function by reference), till first match.
|
||||
|
||||
Matches against class and function by reference.
|
||||
Returns null if no match is found.
|
||||
|
||||
**`example`**
|
||||
```js
|
||||
// returns FiberNode for first usage of AccordionMenu
|
||||
findNodeByComponent(startNode, AccordionMenu);
|
||||
```
|
||||
|
||||
**`note`** Medium chance of collision, medium data access needed.
|
||||
This is safer than findNodeByComponentName, as different components with the same name won't collide.
|
||||
But, two instances of the same component will still collide.
|
||||
Needs access to component class or function.
|
||||
*Defined in [findNode.ts:32](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/findNode.ts#L32)*
|
||||
|
||||
**Parameters:**
|
||||
|
||||
@@ -51,22 +35,7 @@ ___
|
||||
|
||||
▸ **findNodeByComponentName**(`node`: [FiberNode](_mocked_types_index_.md#fibernode) | null, `expectedName`: string): *[FiberNode](_mocked_types_index_.md#fibernode) | null*
|
||||
|
||||
*Defined in [findNode.ts:21](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/findNode.ts#L21)*
|
||||
|
||||
Find node by component name, till first match.
|
||||
|
||||
Matches against class and function name, doesn't match html-like nodes.
|
||||
Returns null if no match is found.
|
||||
|
||||
**`example`**
|
||||
```js
|
||||
// returns FiberNode for first usage of 'AccordionMenu'
|
||||
findNodeByComponentName(startNode, "AccordionMenu");
|
||||
```
|
||||
|
||||
**`note`** Highest chance of collision, least data access needed.
|
||||
Different components with same name will collide.
|
||||
Needs access to component name.
|
||||
*Defined in [findNode.ts:4](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/findNode.ts#L4)*
|
||||
|
||||
**Parameters:**
|
||||
|
||||
@@ -83,21 +52,7 @@ ___
|
||||
|
||||
▸ **findNodeByComponentRef**(`node`: [FiberNode](_mocked_types_index_.md#fibernode) | null, `expectedClassInstance`: `Component`): *[FiberNode](_mocked_types_index_.md#fibernode) | null*
|
||||
|
||||
*Defined in [findNode.ts:114](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/findNode.ts#L114)*
|
||||
|
||||
Find node by component instance ref, till first match.
|
||||
|
||||
Matches against class instances by reference.
|
||||
Returns null if no match is found.
|
||||
|
||||
**`example`**
|
||||
```js
|
||||
// menuRef=createRef(); <AccordionMenu ref={menuRef}>
|
||||
findNodeByComponentRef(startNode, menuRef.current);
|
||||
```
|
||||
|
||||
**`note`** Least chance of collision, maximum data access needed.
|
||||
Needs access to component instance (through React ref usually).
|
||||
*Defined in [findNode.ts:63](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/findNode.ts#L63)*
|
||||
|
||||
**Parameters:**
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
Ƭ **FiberNode**: *[FiberNodeForComponentClass](../interfaces/_mocked_types_index_.fibernodeforcomponentclass.md) | [FiberNodeForFunctionComponent](../interfaces/_mocked_types_index_.fibernodeforfunctioncomponent.md) | [FiberNodeForInstrinsicElement](../interfaces/_mocked_types_index_.fibernodeforinstrinsicelement.md) | [FiberNodeForTextNode](../interfaces/_mocked_types_index_.fibernodefortextnode.md)*
|
||||
|
||||
*Defined in [mocked-types/index.ts:11](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L11)*
|
||||
*Defined in [mocked-types/index.ts:11](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L11)*
|
||||
|
||||
___
|
||||
|
||||
@@ -33,4 +33,4 @@ ___
|
||||
|
||||
Ƭ **FiberNodeisHTMLLike**: *[FiberNodeForInstrinsicElement](../interfaces/_mocked_types_index_.fibernodeforinstrinsicelement.md) | [FiberNodeForTextNode](../interfaces/_mocked_types_index_.fibernodefortextnode.md)*
|
||||
|
||||
*Defined in [mocked-types/index.ts:67](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/mocked-types/index.ts#L67)*
|
||||
*Defined in [mocked-types/index.ts:67](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L67)*
|
||||
@@ -17,19 +17,7 @@
|
||||
|
||||
▸ **traverse**(`node`: [FiberNode](_mocked_types_index_.md#fibernode), `fn`: function): *void*
|
||||
|
||||
*Defined in [traverse.ts:19](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/traverse.ts#L19)*
|
||||
|
||||
Traverse nodes recursively in depth-first manner, starting from a start node.
|
||||
|
||||
This is the default and basic traversal method, which covers basic use cases.
|
||||
You can't do advanced things like change the order of traversal, skip or cancel traversal after any node, etc.
|
||||
For more advanced usecases, see [traverseGenerator](_traverse_.md#traversegenerator)
|
||||
|
||||
**`example`**
|
||||
```js
|
||||
// calls fn for each node inside startNode
|
||||
traverse(startNode, fn);
|
||||
```
|
||||
*Defined in [traverse.ts:4](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/traverse.ts#L4)*
|
||||
|
||||
**Parameters:**
|
||||
|
||||
@@ -53,7 +41,7 @@ ___
|
||||
|
||||
▸ **traverseGenerator**(`node`: [FiberNode](_mocked_types_index_.md#fibernode), `__namedParameters`: object): *`IterableIterator<FiberNode>`*
|
||||
|
||||
*Defined in [traverse.ts:30](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/traverse.ts#L30)*
|
||||
*Defined in [traverse.ts:15](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/traverse.ts#L15)*
|
||||
|
||||
**Parameters:**
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
▸ **doesElementContainRootFiberNode**(`element`: `Element`): *boolean*
|
||||
|
||||
*Defined in [utils.ts:65](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/utils.ts#L65)*
|
||||
*Defined in [utils.ts:65](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L65)*
|
||||
|
||||
**Parameters:**
|
||||
|
||||
@@ -40,7 +40,7 @@ ___
|
||||
|
||||
▸ **getRootFiberNodeFromDOM**(`startElement?`: [Element](../interfaces/_mocked_types_index_.fibernodedomcontainer.md#element)): *[FiberNode](_mocked_types_index_.md#fibernode) | null*
|
||||
|
||||
*Defined in [utils.ts:82](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/utils.ts#L82)*
|
||||
*Defined in [utils.ts:82](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L82)*
|
||||
|
||||
Util to find root React Fiber node from html DOM tree.
|
||||
Returns null, if not found.SHould be called after ReactDOM.render is finished.
|
||||
@@ -59,7 +59,7 @@ ___
|
||||
|
||||
▸ **isConstructorComponentClass**(`ctr`: `React.ElementType` | null): *boolean*
|
||||
|
||||
*Defined in [utils.ts:42](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/utils.ts#L42)*
|
||||
*Defined in [utils.ts:42](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L42)*
|
||||
|
||||
**Parameters:**
|
||||
|
||||
@@ -75,7 +75,7 @@ ___
|
||||
|
||||
▸ **isConstructorFunctionComponent**(`ctr`: `React.ElementType` | null): *boolean*
|
||||
|
||||
*Defined in [utils.ts:59](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/utils.ts#L59)*
|
||||
*Defined in [utils.ts:59](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L59)*
|
||||
|
||||
**Parameters:**
|
||||
|
||||
@@ -91,7 +91,7 @@ ___
|
||||
|
||||
▸ **isConstructorHtmlLike**(`ctr`: `React.ElementType` | null): *boolean*
|
||||
|
||||
*Defined in [utils.ts:33](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/utils.ts#L33)*
|
||||
*Defined in [utils.ts:33](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L33)*
|
||||
|
||||
**Parameters:**
|
||||
|
||||
@@ -107,7 +107,7 @@ ___
|
||||
|
||||
▸ **isNodeComponentClass**(`node`: [FiberNode](_mocked_types_index_.md#fibernode)): *boolean*
|
||||
|
||||
*Defined in [utils.ts:27](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/utils.ts#L27)*
|
||||
*Defined in [utils.ts:27](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L27)*
|
||||
|
||||
**Parameters:**
|
||||
|
||||
@@ -123,7 +123,7 @@ ___
|
||||
|
||||
▸ **isNodeFunctionComponent**(`node`: [FiberNode](_mocked_types_index_.md#fibernode)): *boolean*
|
||||
|
||||
*Defined in [utils.ts:21](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/utils.ts#L21)*
|
||||
*Defined in [utils.ts:21](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L21)*
|
||||
|
||||
**Parameters:**
|
||||
|
||||
@@ -139,7 +139,7 @@ ___
|
||||
|
||||
▸ **isNodeHtmlLike**(`node`: [FiberNode](_mocked_types_index_.md#fibernode)): *boolean*
|
||||
|
||||
*Defined in [utils.ts:11](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/utils.ts#L11)*
|
||||
*Defined in [utils.ts:11](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L11)*
|
||||
|
||||
**Parameters:**
|
||||
|
||||
@@ -155,7 +155,7 @@ ___
|
||||
|
||||
▸ **isNodeNotHtmlLike**(`node`: [FiberNode](_mocked_types_index_.md#fibernode)): *boolean*
|
||||
|
||||
*Defined in [utils.ts:15](https://github.com/bendtherules/react-fiber-traverse/blob/fd6dad2/src/utils.ts#L15)*
|
||||
*Defined in [utils.ts:15](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L15)*
|
||||
|
||||
**Parameters:**
|
||||
|
||||
|
||||
+52
-108
@@ -1,150 +1,94 @@
|
||||
import { FiberNode } from "./mocked-types";
|
||||
import { traverseGenerator, TTraverseConfig } from "./traverse";
|
||||
import { isNodeNotHtmlLike } from "./utils";
|
||||
|
||||
/**
|
||||
* Find node by component name, till first match.
|
||||
*
|
||||
* Matches against class and function name, doesn't match html-like nodes.
|
||||
* Returns null if no match is found.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* // returns FiberNode for first usage of 'AccordionMenu'
|
||||
* findNodeByComponentName(startNode, "AccordionMenu");
|
||||
* ```
|
||||
*
|
||||
* @note Highest chance of collision, least data access needed.
|
||||
* Different components with same name will collide.
|
||||
* Needs access to component name.
|
||||
*
|
||||
*/
|
||||
function findNodeByComponentName(
|
||||
node: FiberNode | null,
|
||||
expectedName: string,
|
||||
traverseConfig?: TTraverseConfig
|
||||
expectedName: string
|
||||
): FiberNode | null {
|
||||
if (node === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const nodeIterator = traverseGenerator(node, traverseConfig);
|
||||
for (const tmpNode of nodeIterator) {
|
||||
if (isNodeNotHtmlLike(tmpNode) && tmpNode.type.name === expectedName) {
|
||||
return tmpNode;
|
||||
if (isNodeNotHtmlLike(node) && node.type.name === expectedName) {
|
||||
return node;
|
||||
}
|
||||
|
||||
{
|
||||
const returnVal = findNodeByComponentName(node.child, expectedName);
|
||||
if (returnVal !== null) {
|
||||
return returnVal;
|
||||
}
|
||||
}
|
||||
{
|
||||
const returnVal = findNodeByComponentName(node.sibling, expectedName);
|
||||
if (returnVal !== null) {
|
||||
return returnVal;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function* findNodesByComponentName(
|
||||
node: FiberNode | null,
|
||||
expectedName: string,
|
||||
traverseConfig?: TTraverseConfig
|
||||
): IterableIterator<FiberNode> {
|
||||
if (node === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const nodeIterator = traverseGenerator(node, traverseConfig);
|
||||
for (const tmpNode of nodeIterator) {
|
||||
if (isNodeNotHtmlLike(tmpNode) && tmpNode.type.name === expectedName) {
|
||||
yield tmpNode;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function findAllNodesByComponentName(
|
||||
node: FiberNode | null,
|
||||
expectedName: string,
|
||||
traverseConfig?: TTraverseConfig
|
||||
): Array<FiberNode> {
|
||||
return [...findNodesByComponentName(node, expectedName, traverseConfig)];
|
||||
}
|
||||
|
||||
/**
|
||||
* Find node by component (i.e. class or function by reference), till first match.
|
||||
*
|
||||
* Matches against class and function by reference.
|
||||
* Returns null if no match is found.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* // returns FiberNode for first usage of AccordionMenu
|
||||
* findNodeByComponent(startNode, AccordionMenu);
|
||||
* ```
|
||||
*
|
||||
* @note Medium chance of collision, medium data access needed.
|
||||
* This is safer than findNodeByComponentName, as different components with the same name won't collide.
|
||||
* But, two instances of the same component will still collide.
|
||||
* Needs access to component class or function.
|
||||
*
|
||||
*/
|
||||
function findNodeByComponent(
|
||||
node: FiberNode | null,
|
||||
expectedClassOrFunction: React.ComponentType,
|
||||
traverseConfig?: TTraverseConfig
|
||||
expectedClassOrFunction: React.ComponentType
|
||||
): FiberNode | null {
|
||||
if (node === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const nodeIterator = traverseGenerator(node, traverseConfig);
|
||||
for (const tmpNode of nodeIterator) {
|
||||
if (
|
||||
isNodeNotHtmlLike(tmpNode) &&
|
||||
tmpNode.type === expectedClassOrFunction
|
||||
) {
|
||||
return tmpNode;
|
||||
if (isNodeNotHtmlLike(node) && node.type === expectedClassOrFunction) {
|
||||
return node;
|
||||
}
|
||||
|
||||
{
|
||||
const returnVal = findNodeByComponent(node.child, expectedClassOrFunction);
|
||||
if (returnVal !== null) {
|
||||
return returnVal;
|
||||
}
|
||||
}
|
||||
{
|
||||
const returnVal = findNodeByComponent(
|
||||
node.sibling,
|
||||
expectedClassOrFunction
|
||||
);
|
||||
if (returnVal !== null) {
|
||||
return returnVal;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Find node by component instance ref, till first match.
|
||||
*
|
||||
* Matches against class instances by reference.
|
||||
* Returns null if no match is found.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* // menuRef=createRef(); <AccordionMenu ref={menuRef}>
|
||||
* findNodeByComponentRef(startNode, menuRef.current);
|
||||
* ```
|
||||
*
|
||||
* @note Least chance of collision, maximum data access needed.
|
||||
* Needs access to component instance (through React ref usually).
|
||||
*
|
||||
*/
|
||||
function findNodeByComponentRef(
|
||||
node: FiberNode | null,
|
||||
expectedClassInstance: React.Component,
|
||||
traverseConfig?: TTraverseConfig
|
||||
expectedClassInstance: React.Component
|
||||
): FiberNode | null {
|
||||
if (node === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const nodeIterator = traverseGenerator(node, traverseConfig);
|
||||
for (const tmpNode of nodeIterator) {
|
||||
if (
|
||||
isNodeNotHtmlLike(tmpNode) &&
|
||||
tmpNode.stateNode === expectedClassInstance
|
||||
) {
|
||||
return tmpNode;
|
||||
if (isNodeNotHtmlLike(node) && node.stateNode === expectedClassInstance) {
|
||||
return node;
|
||||
}
|
||||
|
||||
{
|
||||
const returnVal = findNodeByComponentRef(node.child, expectedClassInstance);
|
||||
if (returnVal !== null) {
|
||||
return returnVal;
|
||||
}
|
||||
}
|
||||
{
|
||||
const returnVal = findNodeByComponentRef(
|
||||
node.sibling,
|
||||
expectedClassInstance
|
||||
);
|
||||
if (returnVal !== null) {
|
||||
return returnVal;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export {
|
||||
findNodeByComponentName,
|
||||
findNodesByComponentName,
|
||||
findAllNodesByComponentName,
|
||||
findNodeByComponent,
|
||||
findNodeByComponentRef
|
||||
};
|
||||
export { findNodeByComponentName, findNodeByComponent, findNodeByComponentRef };
|
||||
|
||||
+16
-101
@@ -1,83 +1,29 @@
|
||||
// import { isNodeSimple } from './utils';
|
||||
import { FiberNode } from "./mocked-types";
|
||||
|
||||
interface TTraverseConfig {
|
||||
order?: Array<"self" | "child" | "sibling">;
|
||||
skipSiblingForStartNode?: boolean;
|
||||
function traverse(node: FiberNode, fn: (node: FiberNode) => any) {
|
||||
fn.call(null, node);
|
||||
|
||||
if (node.child !== null) {
|
||||
traverse(node.child, fn);
|
||||
}
|
||||
if (node.sibling !== null) {
|
||||
traverse(node.sibling, fn);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Traverse nodes recursively using generators.
|
||||
*
|
||||
* This is the advanced traverse function, which can be used used
|
||||
* to write other variants of traversal and find.
|
||||
*
|
||||
* Type signature for generator.next first argument is `{ skipChild?: boolean; skipSibling?: boolean } | void `
|
||||
* Throw any error into the generator to finish the generator and let it cleanup its internals.
|
||||
*
|
||||
* It allows inversion of control -
|
||||
* so, application code can decide to
|
||||
* 1. change order of traversal,
|
||||
* 2. skip some elements,
|
||||
* 3. cancel traversal mid-way.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* // Basic use (for-of)
|
||||
*
|
||||
* const nodeIterator = traverseGenerator(rootNode);
|
||||
* for (const node of nodeIterator) {
|
||||
* // do something with each node here
|
||||
* }
|
||||
* ```
|
||||
* ------
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* // Breadth-first
|
||||
*
|
||||
* // note the order below
|
||||
* const nodeIterator = traverseGenerator(rootNode, ["self", "sibling", "child"]);
|
||||
* // rest - same as above
|
||||
* ```
|
||||
* -----
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* // Get first 3 nodes and then stop the generator
|
||||
*
|
||||
* const nodeIterator = traverseGenerator(rootNode);
|
||||
*
|
||||
* var count = 0;
|
||||
* var next;
|
||||
* while (
|
||||
* count < 3 &&
|
||||
* !(next = nodeIterator.next()).done
|
||||
* ) {
|
||||
* count++;
|
||||
* const node = next.value;
|
||||
* // do something with each node here
|
||||
* }
|
||||
*
|
||||
* // Finish generator, to prevent memory leak
|
||||
* nodeIterator.throw(new Error());
|
||||
* ```
|
||||
* -----
|
||||
*
|
||||
*/
|
||||
function* traverseGenerator(
|
||||
node: FiberNode,
|
||||
{
|
||||
order = ["self", "child", "sibling"],
|
||||
skipSiblingForStartNode = true
|
||||
}: TTraverseConfig = {}
|
||||
order = ["self", "child", "sibling"]
|
||||
}: { order?: Array<"self" | "child" | "sibling"> } = {}
|
||||
): IterableIterator<FiberNode> {
|
||||
let skipChild = false,
|
||||
skipSibling = skipSiblingForStartNode;
|
||||
skipSibling = false;
|
||||
|
||||
function* traverseSelf() {
|
||||
const controlInput:
|
||||
| { skipChild?: boolean; skipSibling?: boolean }
|
||||
| { skipChild: boolean; skipSibling: boolean }
|
||||
| undefined = yield node;
|
||||
|
||||
if (controlInput !== undefined) {
|
||||
@@ -88,20 +34,14 @@ function* traverseGenerator(
|
||||
function* traverseChild() {
|
||||
if (!skipChild && node.child !== null) {
|
||||
const nextNode = node.child;
|
||||
yield* traverseGenerator(nextNode, {
|
||||
order,
|
||||
skipSiblingForStartNode: false
|
||||
});
|
||||
yield* traverseGenerator(nextNode, { order });
|
||||
}
|
||||
}
|
||||
|
||||
function* traverseSibling() {
|
||||
if (!skipSibling && node.sibling !== null) {
|
||||
const nextNode = node.sibling;
|
||||
yield* traverseGenerator(nextNode, {
|
||||
order,
|
||||
skipSiblingForStartNode: false
|
||||
});
|
||||
yield* traverseGenerator(nextNode, { order });
|
||||
}
|
||||
}
|
||||
|
||||
@@ -122,29 +62,4 @@ function* traverseGenerator(
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Traverse nodes recursively in depth-first manner, starting from a start node.
|
||||
*
|
||||
* This is the default and basic traversal function, which covers basic use cases.
|
||||
* You can't do advanced things like change the order of traversal, skip or cancel traversal after any node, etc.
|
||||
* For more advanced usecases, see {@link traverseGenerator}
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* // calls fn for each node inside startNode
|
||||
* traverse(startNode, fn);
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
function traverse(
|
||||
node: FiberNode,
|
||||
fn: (node: FiberNode) => any,
|
||||
traverseConfig?: TTraverseConfig
|
||||
) {
|
||||
const nodeIterator = traverseGenerator(node, traverseConfig);
|
||||
for (const tmpNode of nodeIterator) {
|
||||
fn.call(null, tmpNode);
|
||||
}
|
||||
}
|
||||
|
||||
export { traverse, traverseGenerator, TTraverseConfig };
|
||||
export { traverse, traverseGenerator };
|
||||
|
||||
Reference in New Issue
Block a user