react-component-instance 0.0.9 → 0.0.11

package/README.md

@@ -3,24 +3,68 @@
 Get a React class component instance from its `DOM` element
 
 ```javascript
-import getInstance from 'react-component-instance'
+import {
+  getInstance,
+  findInstanceFor
+} from 'react-component-instance'
 ```
 
 ## With `@testing-library/react`
 
-**Note** that for use with _Testing Library_ import from `react-component-instance/container`
-
 ```javascript
 import {
   render
 } from '@testing-library/react'
 
-import getInstance from 'react-component-instance/container'
+import {
+  getInstance
+} from 'react-component-instance'
 
 describe('`getInstance`', () => {
   class Component extends React.Component {
     render () {
-      return <div />
+      return (
+        <div className='grand-parent'>
+          <div className='parent'>
+            <div className='child'>
+              TEXT
+            </div>
+          </div>
+        </div>
+      )
+    }
+  }
+
+  it('gets the instance', () => {
+    expect(getInstance(render(
+      <Component />
+    )))
+      .toBeInstanceOf(Component)
+  })
+})
+```
+
+```javascript
+import {
+  render
+} from '@testing-library/react'
+
+import {
+  findInstanceFor
+} from 'react-component-instance'
+
+describe('`findInstanceFor`', () => {
+  class Component extends React.Component {
+    render () {
+      return (
+        <div className='grand-parent'>
+          <div className='parent'>
+            <div className='child'>
+              TEXT
+            </div>
+          </div>
+        </div>
+      )
     }
   }
 
@@ -31,7 +75,9 @@ describe('`getInstance`', () => {
       <Component />
     )
 
-    expect(getInstance(container))
+    const child  = container.querySelector('.child')
+
+    expect(findInstanceFor(child, Component))
       .toBeInstanceOf(Component)
   })
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-component-instance",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Get a React class component instance from its DOM Element",
   "keywords": [
     "react",
@@ -36,7 +36,7 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@sequencemedia/eslint-config-standard": "^0.2.43",
-    "@sequencemedia/eslint-config-typescript": "^0.1.62",
+    "@sequencemedia/eslint-config-typescript": "^0.1.63",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/debug": "^4.1.12",
@@ -52,13 +52,9 @@
     "react": "^19.0.0"
   },
   "imports": {
-    "#react-component-instance": "./src/index.mjs",
-    "#react-component-instance/common": "./src/common/index.mjs",
-    "#react-component-instance/container": "./src/container/index.mjs"
+    "#react-component-instance": "./src/index.mjs"
   },
   "exports": {
-    ".": "./src/index.mjs",
-    "./common": "./src/common/index.mjs",
-    "./container": "./src/container/index.mjs"
+    ".": "./src/index.mjs"
   }
 }

package/src/index.mjs

@@ -1,52 +1,36 @@
 /**
  *  @typedef {import('@testing-library/react').RenderResult} RenderType
+ *  @typedef {ReactComponentInstanceTypes.FiberRootNode} FiberRootNode
  *  @typedef {ReactComponentInstanceTypes.FiberNode} FiberNode
  */
 
 import {
+  getContainerFiberFrom,
   getFiberFrom,
   getParentFiberFrom,
   getChildFiberFrom,
   getComponentInstance,
+  getContainerInstance,
   isComponentType,
   traverseFiberParents
-} from '#react-component-instance/common'
+} from './utils/index.mjs'
 
 /**
- *  @param {Element | null | undefined} element
- *  @param {(() => React.JSX.Element) | typeof React.Component} Component
- *  @returns {React.Component<any, any, any> | HTMLElement | Text | null}
+ *  @param {Element | null | undefined} containerElement
+ *  @returns {FiberRootNode | null | undefined}
  */
-export function findComponentInstanceFor (element, Component) {
-  if (element instanceof HTMLElement) {
-    const fiber = getFiberFrom(element)
-
-    if (fiber) {
-      if (isComponentType(Component, fiber)) {
-        return (
-          getComponentInstance(fiber)
-        )
-      }
-
-      for (const parentFiber of traverseFiberParents(fiber)) {
-        if (parentFiber) {
-          if (isComponentType(Component, parentFiber)) {
-            return (
-              getComponentInstance(parentFiber)
-            )
-          }
-        }
-      }
-    }
-
-    throw new Error('Component instance is not found')
+export function getContainerFiberNodeFrom (containerElement) {
+  if (containerElement instanceof HTMLElement) {
+    return (
+      getContainerFiberFrom(containerElement)
+    )
   }
 
-  throw new Error('Element is not an Element')
+  throw new Error('Container is not an Element')
 }
 
 /**
- *  @param {Element | null | undefined} element
+ *  @param {Element | null} [element]
  *  @returns {FiberNode | null | undefined}
  */
 export function getFiberNodeFrom (element) {
@@ -60,7 +44,7 @@ export function getFiberNodeFrom (element) {
 }
 
 /**
- *  @param {Element | null | undefined} element
+ *  @param {Element | null} [element]
  *  @returns {FiberNode | null | undefined}
  */
 export function getParentFiberNodeFrom (element) {
@@ -74,7 +58,7 @@ export function getParentFiberNodeFrom (element) {
 }
 
 /**
- *  @param {Element | null | undefined} element
+ *  @param {Element | null} [element]
  *  @returns {FiberNode | null | undefined}
  */
 export function getChildFiberNodeFrom (element) {
@@ -88,33 +72,110 @@ export function getChildFiberNodeFrom (element) {
 }
 
 /**
- *  @param {RenderType} component
+ *  @param {RenderType} render
  *  @returns {Element | null}
  */
-export function getComponentElement ({
+export function getComponentElementFromRender ({
   container: {
-    firstElementChild: element
+    firstElementChild: componentElement
   }
 }) {
-  return element
+  return componentElement
+}
+
+/**
+ *  @param {RenderType} render
+ *  @returns {Element | null}
+ */
+export function getContainerElementFromRender ({
+  container: containerElement
+}) {
+  return containerElement
+}
+
+/**
+ *  @param {Element | null} [containerElement]
+ *  @returns {React.Component<any, any, any> | HTMLElement | Text | null}
+ */
+export function getInstanceFromContainerElement (containerElement) {
+  if (containerElement instanceof HTMLElement) {
+    const containerFiber = getContainerFiberFrom(containerElement)
+
+    if (containerFiber) {
+      return (
+        getContainerInstance(containerFiber)
+      )
+    }
+  }
+
+  return null
+}
+
+/**
+ *  @param {Element | null} [componentElement]
+ *  @returns {React.Component<any, any, any> | HTMLElement | Text | null}
+ */
+export function getInstanceFromComponentElement (componentElement) {
+  if (componentElement instanceof HTMLElement) {
+    const parentFiber = getParentFiberFrom(componentElement)
+
+    if (parentFiber) {
+      return (
+        getComponentInstance(parentFiber)
+      )
+    }
+  }
+
+  return null
 }
 
 /**
  *  @param {Element | null | undefined} element
+ *  @param {(() => React.JSX.Element) | typeof React.Component} Component
  *  @returns {React.Component<any, any, any> | HTMLElement | Text | null}
  */
-export default function getComponentInstanceFrom (element) {
+export function findInstanceFor (element, Component) {
   if (element instanceof HTMLElement) {
-    const parentFiber = getParentFiberFrom(element)
+    const fiber = getFiberFrom(element)
+
+    if (fiber) {
+      if (isComponentType(Component, fiber)) {
+        return (
+          getComponentInstance(fiber)
+        )
+      }
+
+      for (const parentFiber of traverseFiberParents(fiber)) {
+        if (parentFiber) {
+          if (isComponentType(Component, parentFiber)) {
+            return (
+              getComponentInstance(parentFiber)
+            )
+          }
+        }
+      }
+    }
+  }
+
+  return null
+}
+
+/**
+ *  @param {RenderType} render
+ *  @returns {React.Component<any, any, any> | HTMLElement | Text | null}
+ */
+export function getInstance (render) {
+  const componentElement = getComponentElementFromRender(render)
+
+  if (componentElement instanceof HTMLElement) {
+    const parentFiber = getParentFiberFrom(componentElement)
 
     if (parentFiber) {
       return (
         getComponentInstance(parentFiber)
       )
     }
-
-    throw new Error('Component instance is not found')
   }
 
-  throw new Error('Element is not an Element')
+  return null
 }

package/src/{common → utils}/index.mjs

@@ -156,7 +156,25 @@ export function getChildFiber ({ child: childFiber }) {
  *  @param {FiberNode} fiber
  *  @returns {React.Component<any, any, any> | HTMLElement | Text | null}
  */
-export function getComponentInstance ({ stateNode: instance }) {
+export function getComponentInstance ({
+  stateNode: instance = null
+}) {
+  return instance
+}
+
+/**
+ *  @param {FiberRootNode} fiber
+ *  @returns {React.Component<any, any, any> | HTMLElement | Text | null}
+ */
+export function getContainerInstance ({
+  stateNode: {
+    current: {
+      child: {
+        stateNode: instance = null
+      }
+    }
+  }
+}) {
   return instance
 }
 

package/src/container/index.mjs

@@ -1,62 +0,0 @@
-/**
- *  @typedef {import('@testing-library/react').RenderResult} RenderType
- *  @typedef {ReactComponentInstanceTypes.FiberRootNode} FiberRootNode
- */
-
-import {
-  getContainerFiberFrom
-} from '#react-component-instance/common'
-
-/**
- *  @param {Element | null | undefined} container
- *  @returns {FiberRootNode | null | undefined}
- */
-export function getContainerFiberNodeFrom (container) {
-  if (container instanceof HTMLElement) {
-    return (
-      getContainerFiberFrom(container)
-    )
-  }
-
-  throw new Error('Container is not an Element')
-}
-
-/**
- *  @param {RenderType} component
- *  @returns {Element | null}
- */
-export function getComponentElement ({
-  container: {
-    firstElementChild: element
-  }
-}) {
-  return element
-}
-
-/**
- *  @param {Element | null | undefined} container
- *  @returns {React.Component<any, any, any> | HTMLElement | Text | null}
- */
-export default function getComponentInstanceFrom (container) {
-  if (container instanceof HTMLElement) {
-    const fiberNode = getContainerFiberFrom(container)
-
-    if (fiberNode) {
-      const {
-        stateNode: {
-          current: {
-            child: {
-              stateNode
-            }
-          }
-        }
-      } = fiberNode
-
-      return stateNode
-    }
-
-    throw new Error('Component instance is not found')
-  }
-
-  throw new Error('Container is not an Element')
-}