Docs - Update built docs

2026-08-18 13:52:36 +00:00 · 2019-09-09 17:43:58 +05:30
parent 21231fcb11
commit 977a376cad
10 changed files with 111 additions and 42 deletions
@@ -80,6 +80,36 @@ 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/18ea2e7/src/mocked-types/index.ts#L4)*
+*Defined in [mocked-types/index.ts:4](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L28)*
+*Defined in [mocked-types/index.ts:28](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L31)*
+*Defined in [mocked-types/index.ts:31](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L29)*
+*Defined in [mocked-types/index.ts:29](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L34)*
+*Defined in [mocked-types/index.ts:34](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L32)*
+*Defined in [mocked-types/index.ts:32](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L18)*
+*Defined in [mocked-types/index.ts:18](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L21)*
+*Defined in [mocked-types/index.ts:21](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L19)*
+*Defined in [mocked-types/index.ts:19](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L24)*
+*Defined in [mocked-types/index.ts:24](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L22)*
+*Defined in [mocked-types/index.ts:22](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L38)*
+*Defined in [mocked-types/index.ts:38](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/src/mocked-types/index.ts#L38)*

-*Defined in [mocked-types/index.ts:48](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L48)*
+*Defined in [mocked-types/index.ts:48](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L41)*
+*Defined in [mocked-types/index.ts:41](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/src/mocked-types/index.ts#L41)*

-*Defined in [mocked-types/index.ts:51](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L51)*
+*Defined in [mocked-types/index.ts:51](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L39)*
+*Defined in [mocked-types/index.ts:39](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/src/mocked-types/index.ts#L39)*

-*Defined in [mocked-types/index.ts:49](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L49)*
+*Defined in [mocked-types/index.ts:49](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L44)*
+*Defined in [mocked-types/index.ts:44](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/src/mocked-types/index.ts#L44)*

-*Defined in [mocked-types/index.ts:54](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L54)*
+*Defined in [mocked-types/index.ts:54](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L42)*
+*Defined in [mocked-types/index.ts:42](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/src/mocked-types/index.ts#L42)*

-*Defined in [mocked-types/index.ts:52](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L52)*
+*Defined in [mocked-types/index.ts:52](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L58)*
+*Defined in [mocked-types/index.ts:58](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L61)*
+*Defined in [mocked-types/index.ts:61](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L59)*
+*Defined in [mocked-types/index.ts:59](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L64)*
+*Defined in [mocked-types/index.ts:64](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L62)*
+*Defined in [mocked-types/index.ts:62](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/src/mocked-types/index.ts#L62)*
@@ -18,7 +18,21 @@

 ▸ **findNodeByComponent**(`node`: [FiberNode](_mocked_types_index_.md#fibernode) | null, `expectedClassOrFunction`: `React.ComponentType`): *[FiberNode](_mocked_types_index_.md#fibernode) | null*

-*Defined in [findNode.ts:32](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/findNode.ts#L32)*
+*Defined in [findNode.ts:63](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/src/findNode.ts#L63)*
+
+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.
+
+**`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.
+
+**`example`** 
+// returns FiberNode for first usage of AccordionMenu
+findNodeByComponent(startNode, AccordionMenu);

 **Parameters:**

@@ -35,7 +49,20 @@ ___

 ▸ **findNodeByComponentName**(`node`: [FiberNode](_mocked_types_index_.md#fibernode) | null, `expectedName`: string): *[FiberNode](_mocked_types_index_.md#fibernode) | null*

-*Defined in [findNode.ts:4](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/findNode.ts#L4)*
+*Defined in [findNode.ts:19](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/src/findNode.ts#L19)*
+
+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.
+
+**`note`** Highest chance of collision, least data access needed.
+Different components with same name will collide.
+Needs access to component name.
+
+**`example`** 
+// returns FiberNode for first usage of 'AccordionMenu'
+findNodeByComponentName(startNode, "AccordionMenu");

 **Parameters:**

@@ -52,7 +79,19 @@ ___

 ▸ **findNodeByComponentRef**(`node`: [FiberNode](_mocked_types_index_.md#fibernode) | null, `expectedClassInstance`: `Component`): *[FiberNode](_mocked_types_index_.md#fibernode) | null*

-*Defined in [findNode.ts:63](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/findNode.ts#L63)*
+*Defined in [findNode.ts:108](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/src/findNode.ts#L108)*
+
+Find node by component instance ref, till first match.
+
+Matches against class instances by reference.
+Returns null if no match is found.
+
+**`note`** Least chance of collision, maximum data access needed.
+Needs access to component instance (through React ref usually).
+
+**`example`** 
+// menuRef=createRef(); <AccordionMenu ref={menuRef}>
+findNodeByComponentRef(startNode, menuRef.current);

 **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/18ea2e7/src/mocked-types/index.ts#L11)*
+*Defined in [mocked-types/index.ts:11](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/mocked-types/index.ts#L67)*
+*Defined in [mocked-types/index.ts:67](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/src/mocked-types/index.ts#L67)*
@@ -17,7 +17,7 @@

 ▸ **traverse**(`node`: [FiberNode](_mocked_types_index_.md#fibernode), `fn`: function): *void*

-*Defined in [traverse.ts:4](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/traverse.ts#L4)*
+*Defined in [traverse.ts:4](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/src/traverse.ts#L4)*

 **Parameters:**

@@ -41,7 +41,7 @@ ___

 ▸ **traverseGenerator**(`node`: [FiberNode](_mocked_types_index_.md#fibernode), `__namedParameters`: object): *`IterableIterator<FiberNode>`*

-*Defined in [traverse.ts:15](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/traverse.ts#L15)*
+*Defined in [traverse.ts:15](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/utils.ts#L65)*
+*Defined in [utils.ts:65](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/utils.ts#L82)*
+*Defined in [utils.ts:82](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/utils.ts#L42)*
+*Defined in [utils.ts:42](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/utils.ts#L59)*
+*Defined in [utils.ts:59](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/utils.ts#L33)*
+*Defined in [utils.ts:33](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/utils.ts#L27)*
+*Defined in [utils.ts:27](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/utils.ts#L21)*
+*Defined in [utils.ts:21](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/utils.ts#L11)*
+*Defined in [utils.ts:11](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/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/18ea2e7/src/utils.ts#L15)*
+*Defined in [utils.ts:15](https://github.com/bendtherules/react-fiber-traverse/blob/21231fc/src/utils.ts#L15)*

 **Parameters:**