react-component-instance 0.0.2 → 0.0.4

package/index.d.mts

@@ -7,7 +7,7 @@ declare global {
      */
 
     export type FiberNode =
-      | FiberNodeForComponentClass
+      | FiberNodeForClassComponent
       | FiberNodeForFunctionComponent
       | FiberNodeForInstrinsicElement
       | FiberNodeForTextNode
@@ -22,7 +22,7 @@ declare global {
       stateNode: {
         current: FiberRootNode
       }
-      return: FiberRootNode
+      return?: FiberRootNode
     }
 
     export interface FiberNodeForFunctionComponent {
@@ -33,10 +33,10 @@ declare global {
       type: React.FunctionComponent
 
       stateNode: null
-      return: FiberNode
+      return?: FiberNode
     }
 
-    export interface FiberNodeForComponentClass {
+    export interface FiberNodeForClassComponent {
       child: FiberNode | null
       sibling: FiberNode | null
 
@@ -44,7 +44,7 @@ declare global {
       type: React.ComponentClass
 
       stateNode: React.Component
-      return: FiberNode
+      return?: FiberNode
     }
 
     export interface FiberNodeForInstrinsicElement {
@@ -55,7 +55,7 @@ declare global {
       type: keyof React.JSX.IntrinsicElements
 
       stateNode: HTMLElement
-      return: FiberNode
+      return?: FiberNode
     }
 
     export interface FiberNodeForTextNode {
@@ -66,7 +66,7 @@ declare global {
       type: null
 
       stateNode: Text
-      return: FiberNode
+      return?: FiberNode
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-component-instance",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Get a React class component instance from its DOM Element",
   "keywords": [
     "react",
@@ -35,8 +35,8 @@
     "@babel/eslint-parser": "^7.26.10",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
-    "@sequencemedia/eslint-config-standard": "^0.2.42",
-    "@sequencemedia/eslint-config-typescript": "^0.1.60",
+    "@sequencemedia/eslint-config-standard": "^0.2.43",
+    "@sequencemedia/eslint-config-typescript": "^0.1.62",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/debug": "^4.1.12",
@@ -53,10 +53,12 @@
   },
   "imports": {
     "#react-component-instance": "./src/index.mjs",
+    "#react-component-instance/common": "./src/common/index.mjs",
     "#react-component-instance/container": "./src/container/index.mjs"
   },
   "exports": {
     ".": "./src/index.mjs",
+    "./common": "./src/common/index.mjs",
     "./container": "./src/container/index.mjs"
   }
 }

package/src/common/index.mjs

@@ -0,0 +1,198 @@
+/**
+ *  @typedef {ReactComponentInstanceTypes.FiberNode} FiberNode
+ *  @typedef {ReactComponentInstanceTypes.FiberRootNode} FiberRootNode
+ */
+
+/**
+ *  @param {PropertyKey} key
+ *  @returns {boolean}
+ */
+export function isReactFiberKey (key) {
+  return String(key).startsWith('__reactFiber$')
+}
+
+/**
+ *  @param {PropertyKey} key
+ *  @returns {boolean}
+ */
+export function isReactPropsKey (key) {
+  return String(key).startsWith('__reactProps$')
+}
+
+/**
+ *  @param {PropertyKey} key
+ *  @returns {boolean}
+ */
+export function isReactContainerFiberKey (key) {
+  return String(key).startsWith('__reactContainer$')
+}
+
+/**
+ *  @param {Element} element
+ *  @returns {string | undefined}
+ */
+export function getReactFiberKey (element) {
+  return (
+    Object.keys(element)
+      .find(isReactFiberKey)
+  )
+}
+
+/**
+ *  @param {Element} element
+ *  @returns {string | undefined}
+ */
+export function getReactPropsKey (element) {
+  return (
+    Object.keys(element)
+      .find(isReactPropsKey)
+  )
+}
+
+/**
+ *  @param {Element} element
+ *  @returns {string | undefined}
+ */
+export function getReactContainerFiberKey (element) {
+  return (
+    Object.keys(element)
+      .find(isReactContainerFiberKey)
+  )
+}
+
+/**
+ *  @param {Element} element
+ *  @returns {FiberNode | null | undefined}
+ */
+export function getFiberFrom (element) {
+  const key = getReactFiberKey(element)
+
+  if (key) {
+    const { // @ts-expect-error
+      [key]: fiber
+    } = element
+
+    return fiber
+  }
+
+  throw new Error('Fiber is not found')
+}
+
+/**
+ *  @param {Element} element
+ *  @returns {FiberNode | null | undefined}
+ */
+export function getParentFiberFrom (element) {
+  const key = getReactFiberKey(element)
+
+  if (key) {
+    const { // @ts-expect-error
+      [key]: {
+        return: fiber
+      }
+    } = element
+
+    return fiber
+  }
+
+  throw new Error('Fiber is not found')
+}
+
+/**
+ *  @param {Element} element
+ *  @returns {FiberNode | null | undefined}
+ */
+export function getChildFiberFrom (element) {
+  const key = getReactFiberKey(element)
+
+  if (key) {
+    const { // @ts-expect-error
+      [key]: {
+        child: fiber
+      }
+    } = element
+
+    return fiber
+  }
+
+  throw new Error('Fiber is not found')
+}
+
+/**
+ *  @param {Element} element
+ *  @returns {FiberRootNode | null | undefined}
+ */
+export function getContainerFiberFrom (element) {
+  const key = getReactContainerFiberKey(element)
+
+  if (key) {
+    const { // @ts-expect-error
+      [key]: fiber
+    } = element
+
+    return fiber
+  }
+
+  throw new Error('Fiber is not found')
+}
+
+/**
+ * @param {FiberNode} fiber
+ * @returns {FiberNode | null | undefined}
+ */
+export function getParentFiber ({ return: parentFiber }) {
+  return parentFiber
+}
+
+/**
+ * @param {FiberNode} fiber
+ * @returns {FiberNode | null | undefined}
+ */
+export function getChildFiber ({ child: childFiber }) {
+  return childFiber
+}
+
+/**
+ * @param {FiberNode} fiber
+ * @returns {React.Component<any, any, any> | HTMLElement | Text | null}
+ */
+export function getComponentInstance ({ stateNode: instance }) {
+  return instance
+}
+
+/**
+ * @param {(() => React.JSX.Element) | typeof React.Component} Component
+ * @param {FiberNode} fiber
+ * @returns {boolean}
+ */
+export function isComponentType (Component, { type }) {
+  return Component === type
+}
+
+/**
+ * @param {(() => React.JSX.Element) | typeof React.Component} Component
+ * @returns {(fiber: FiberNode) => boolean}
+ */
+export function getIsComponentType (Component) {
+  return function isComponentType ({ type }) {
+    return Component === type
+  }
+}
+
+/**
+ *  @param {FiberNode} fiber
+ *  @returns {Generator<FiberNode | null | undefined, null, unknown>}
+ */
+export function * traverseFiberParents (fiber) {
+  let currentFiber = getParentFiber(fiber)
+
+  while (currentFiber) {
+    yield currentFiber
+
+    if (currentFiber) {
+      currentFiber = getParentFiber(currentFiber)
+    }
+  }
+
+  return null
+}

package/src/container/index.mjs

@@ -2,28 +2,31 @@
  *  @typedef {ReactComponentInstanceTypes.FiberRootNode} FiberRootNode
  */
 
+import {
+  getContainerFiberFrom
+} from '#react-component-instance/common'
+
 /**
- *  @param {string} key
- *  @returns {boolean}
+ *  @param {Element | null | undefined} container
+ *  @returns {FiberRootNode | null | undefined}
  */
-function isReactContainerKey (key) {
-  return key.startsWith('__reactContainer$')
+export function getContainerFiberNodeFrom (container) {
+  if (container instanceof HTMLElement) {
+    return (
+      getContainerFiberFrom(container)
+    )
+  }
+
+  throw new Error('Container is not an Element')
 }
 
 /**
- *  @param {HTMLElement} container
+ *  @param {Element | null | undefined} container
  *  @returns {React.Component<any, any, any> | HTMLElement | Text | null}
  */
-export default function getReactComponentInstanceFrom (container) {
-  const key = (
-    Object.keys(container)
-      .find(isReactContainerKey)
-  )
-
-  if (key) {
-    const { // @ts-expect-error
-      [key]: fiberNode
-    } = container
+export default function getComponentInstanceFrom (container) {
+  if (container instanceof HTMLElement) {
+    const fiberNode = getContainerFiberFrom(container)
 
     if (fiberNode) {
       const {
@@ -38,7 +41,9 @@ export default function getReactComponentInstanceFrom (container) {
 
       return stateNode
     }
+
+    throw new Error('Component instance is not found')
   }
 
-  throw new Error('Component instance is not found')
+  throw new Error('Container is not an Element')
 }

package/src/index.mjs

@@ -2,96 +2,102 @@
  *  @typedef {ReactComponentInstanceTypes.FiberNode} FiberNode
  */
 
-/**
- *  @param {PropertyKey} key
- *  @returns {boolean}
- */
-function isReactFiberKey (key) {
-  return String(key).startsWith('__reactFiber$')
-}
+import {
+  getFiberFrom,
+  getParentFiberFrom,
+  getChildFiberFrom,
+  getComponentInstance,
+  isComponentType,
+  traverseFiberParents
+} from '#react-component-instance/common'
 
 /**
- *  @param {FiberNode} fiberNode
- *  @returns {Generator<FiberNode, void, unknown>}
+ *  @param {Element | null | undefined} element
+ *  @param {(() => React.JSX.Element) | typeof React.Component} Component
+ *  @returns {React.Component<any, any, any> | HTMLElement | Text | null}
  */
-function * traverseFiberNodeTree (fiberNode) {
-  let currentNode = fiberNode
+export function findComponentInstanceFor (element, Component) {
+  if (element instanceof HTMLElement) {
+    const fiber = getFiberFrom(element)
 
-  while (true) {
-    yield currentNode
+    if (fiber) {
+      if (isComponentType(Component, fiber)) {
+        return (
+          getComponentInstance(fiber)
+        )
+      }
 
-    currentNode = currentNode.return
+      for (const parentFiber of traverseFiberParents(fiber)) {
+        if (parentFiber) {
+          if (isComponentType(Component, parentFiber)) {
+            return (
+              getComponentInstance(parentFiber)
+            )
+          }
+        }
+      }
+    }
+
+    throw new Error('Component instance is not found')
   }
+
+  throw new Error('Element is not an Element')
 }
 
 /**
  *  @param {Element | null | undefined} element
- *  @param {(() => React.JSX.Element) | typeof React.Component} Component
- *  @returns {React.Component<any, any, any> | HTMLElement | Text | null}
+ *  @returns {FiberNode | null | undefined}
  */
-export function findReactComponentInstanceFor (element, Component) {
+export function getFiberNodeFrom (element) {
   if (element instanceof HTMLElement) {
-    const key = (
-      Object.keys(element)
-        .find(isReactFiberKey)
+    return (
+      getFiberFrom(element)
     )
+  }
 
-    if (key) {
-      const { // @ts-expect-error
-        [key]: fiberNode
-      } = element
-
-      if (fiberNode) {
-        for (const fiber of traverseFiberNodeTree(fiberNode)) {
-          const {
-            type
-          } = fiber
+  throw new Error('Element is not an Element')
+}
 
-          if (type === Component) {
-            const {
-              stateNode
-            } = fiber
+/**
+ *  @param {Element | null | undefined} element
+ *  @returns {FiberNode | null | undefined}
+ */
+export function getParentFiberNodeFrom (element) {
+  if (element instanceof HTMLElement) {
+    return (
+      getParentFiberFrom(element)
+    )
+  }
 
-            return stateNode
-          }
-        }
-      }
-    }
+  throw new Error('Element is not an Element')
+}
 
-    throw new Error('Component instance is not found')
+/**
+ *  @param {Element | null | undefined} element
+ *  @returns {FiberNode | null | undefined}
+ */
+export function getChildFiberNodeFrom (element) {
+  if (element instanceof HTMLElement) {
+    return (
+      getChildFiberFrom(element)
+    )
   }
 
   throw new Error('Element is not an Element')
 }
 
 /**
- *  @param {Element | null} element
+ *  @param {Element | null | undefined} element
  *  @returns {React.Component<any, any, any> | HTMLElement | Text | null}
  */
-export default function getReactComponentInstanceFrom (element) {
+export default function getComponentInstanceFrom (element) {
   if (element instanceof HTMLElement) {
-    const key = (
-      Object.keys(element)
-        .find(isReactFiberKey)
-    )
+    const parentFiber = getParentFiberFrom(element)
 
-    if (key) {
-      const { // @ts-expect-error
-        [key]: fiberNode
-      } = element
-
-      if (fiberNode) {
-        /**
-         *  `return` is the component which owns `element`
-         */
-        const {
-          return: {
-            stateNode
-          }
-        } = fiberNode
-
-        return stateNode
-      }
+    if (parentFiber) {
+      return (
+        getComponentInstance(parentFiber)
+      )
     }
 
     throw new Error('Component instance is not found')