react-component-instance 0.0.0 → 0.0.2

package/README.md

@@ -0,0 +1,27 @@
+# react-component-instance
+
+Get a React class component instance from its `DOM` element
+
+```javascript
+import getInstance from 'react-component-instance'
+```
+
+## With `@testing-library/react`
+
+**Note** that for use with _Testing Library_ import from `react-component-instance/container`
+
+```javascript
+import getInstance from 'react-component-instance/container'
+
+import {
+  render
+} from '@testing-library/react'
+
+const {
+  container
+} = render(
+  <Component />
+)
+
+const instance = getInstance(container)
+```

package/index.d.mts

@@ -1,5 +1,74 @@
+import type React from 'react'
+
 declare global {
-  namespace ReactComponentInstanceTypes {}
+  namespace ReactComponentInstanceTypes {
+    /**
+     *  https://github.com/bendtherules/react-fiber-traverse
+     */
+
+    export type FiberNode =
+      | FiberNodeForComponentClass
+      | FiberNodeForFunctionComponent
+      | FiberNodeForInstrinsicElement
+      | FiberNodeForTextNode
+
+    export interface FiberRootNode {
+      child: FiberNode
+      sibling: FiberNode | null
+
+      elementType: React.FunctionComponent
+      type: React.FunctionComponent
+
+      stateNode: {
+        current: FiberRootNode
+      }
+      return: FiberRootNode
+    }
+
+    export interface FiberNodeForFunctionComponent {
+      child: FiberNode | null
+      sibling: FiberNode | null
+
+      elementType: React.FunctionComponent
+      type: React.FunctionComponent
+
+      stateNode: null
+      return: FiberNode
+    }
+
+    export interface FiberNodeForComponentClass {
+      child: FiberNode | null
+      sibling: FiberNode | null
+
+      elementType: React.ComponentClass
+      type: React.ComponentClass
+
+      stateNode: React.Component
+      return: FiberNode
+    }
+
+    export interface FiberNodeForInstrinsicElement {
+      child: FiberNode | null
+      sibling: FiberNode | null
+
+      elementType: keyof React.JSX.IntrinsicElements
+      type: keyof React.JSX.IntrinsicElements
+
+      stateNode: HTMLElement
+      return: FiberNode
+    }
+
+    export interface FiberNodeForTextNode {
+      child: null
+      sibling: FiberNode | null
+
+      elementType: null
+      type: null
+
+      stateNode: Text
+      return: FiberNode
+    }
+  }
 }
 
 export {}

package/package.json

@@ -1,13 +1,20 @@
 {
   "name": "react-component-instance",
-  "version": "0.0.0",
-  "main": "./index.mjs",
+  "version": "0.0.2",
+  "description": "Get a React class component instance from its DOM Element",
+  "keywords": [
+    "react",
+    "class",
+    "component",
+    "instance"
+  ],
+  "main": "./src/index.mjs",
   "type": "module",
   "types": "./index.d.mts",
   "author": {
-    "name": "Jonathan Perry for Sequence Media Limited",
-    "email": "jonathanperry@sequencemedia.net",
-    "url": "https://sequencemedia.net"
+    "name": "Jonathan Perry for Modern Poacher Limited",
+    "email": "jonathanperry@modernpoacher.com",
+    "url": "https://modernpoacher.com"
   },
   "license": "ISC",
   "engines": {
@@ -15,19 +22,41 @@
   },
   "repository": {
     "type": "git",
-    "url": "git://github.com/sequencemedia/react-component-instance.git"
+    "url": "git://github.com/modernpoacher/react-component-instance.git"
   },
   "scripts": {
     "lint": "eslint",
-    "lint:fix": "npm run lint -- --fix"
+    "lint:fix": "npm run lint -- --fix",
+    "prepare": "husky",
+    "test": "NODE_ENV=test jest"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@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",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@types/debug": "^4.1.12",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.0.10",
+    "core-js": "^3.41.0",
     "eslint": "^9.22.0",
-    "globals": "^16.0.0"
+    "eslint-plugin-react": "^7.37.4",
+    "globals": "^16.0.0",
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^19.0.0"
+  },
+  "imports": {
+    "#react-component-instance": "./src/index.mjs",
+    "#react-component-instance/container": "./src/container/index.mjs"
   },
   "exports": {
-    ".": "./src/index.mjs"
+    ".": "./src/index.mjs",
+    "./container": "./src/container/index.mjs"
   }
 }

package/src/container/index.mjs

@@ -0,0 +1,44 @@
+/**
+ *  @typedef {ReactComponentInstanceTypes.FiberRootNode} FiberRootNode
+ */
+
+/**
+ *  @param {string} key
+ *  @returns {boolean}
+ */
+function isReactContainerKey (key) {
+  return key.startsWith('__reactContainer$')
+}
+
+/**
+ *  @param {HTMLElement} 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
+
+    if (fiberNode) {
+      const {
+        stateNode: {
+          current: {
+            child: {
+              stateNode
+            }
+          }
+        }
+      } = fiberNode
+
+      return stateNode
+    }
+  }
+
+  throw new Error('Component instance is not found')
+}

package/src/index.mjs

@@ -0,0 +1,101 @@
+/**
+ *  @typedef {ReactComponentInstanceTypes.FiberNode} FiberNode
+ */
+
+/**
+ *  @param {PropertyKey} key
+ *  @returns {boolean}
+ */
+function isReactFiberKey (key) {
+  return String(key).startsWith('__reactFiber$')
+}
+
+/**
+ *  @param {FiberNode} fiberNode
+ *  @returns {Generator<FiberNode, void, unknown>}
+ */
+function * traverseFiberNodeTree (fiberNode) {
+  let currentNode = fiberNode
+
+  while (true) {
+    yield currentNode
+
+    currentNode = currentNode.return
+  }
+}
+
+/**
+ *  @param {Element | null | undefined} element
+ *  @param {(() => React.JSX.Element) | typeof React.Component} Component
+ *  @returns {React.Component<any, any, any> | HTMLElement | Text | null}
+ */
+export function findReactComponentInstanceFor (element, Component) {
+  if (element instanceof HTMLElement) {
+    const key = (
+      Object.keys(element)
+        .find(isReactFiberKey)
+    )
+
+    if (key) {
+      const { // @ts-expect-error
+        [key]: fiberNode
+      } = element
+
+      if (fiberNode) {
+        for (const fiber of traverseFiberNodeTree(fiberNode)) {
+          const {
+            type
+          } = fiber
+
+          if (type === Component) {
+            const {
+              stateNode
+            } = fiber
+
+            return stateNode
+          }
+        }
+      }
+    }
+
+    throw new Error('Component instance is not found')
+  }
+
+  throw new Error('Element is not an Element')
+}
+
+/**
+ *  @param {Element | null} element
+ *  @returns {React.Component<any, any, any> | HTMLElement | Text | null}
+ */
+export default function getReactComponentInstanceFrom (element) {
+  if (element instanceof HTMLElement) {
+    const key = (
+      Object.keys(element)
+        .find(isReactFiberKey)
+    )
+
+    if (key) {
+      const { // @ts-expect-error
+        [key]: fiberNode
+      } = element
+
+      if (fiberNode) {
+        /**
+         *  `return` is the component which owns `element`
+         */
+        const {
+          return: {
+            stateNode
+          }
+        } = fiberNode
+
+        return stateNode
+      }
+    }
+
+    throw new Error('Component instance is not found')
+  }
+
+  throw new Error('Element is not an Element')
+}

package/tsconfig.json

@@ -5,7 +5,8 @@
     "allowJs": true,
     "checkJs": true,
     "noEmit": true,
-    "strict": true
+    "strict": true,
+    "jsx": "react"
   },
   "include": [
     "."

package/eslint.config.mjs

@@ -1,36 +0,0 @@
-import globals from 'globals'
-
-import {
-  configs as standard
-} from '@sequencemedia/eslint-config-standard'
-
-import {
-  configs as typescript
-} from '@sequencemedia/eslint-config-typescript'
-
-export default [
-  {
-    ...standard.recommended,
-    files: [
-      '**/*.{mjs,cjs,mts,cts}'
-    ],
-    languageOptions: {
-      ...standard.recommended.languageOptions,
-      globals: {
-        ...globals.node
-      }
-    }
-  },
-  {
-    ...typescript.recommended,
-    files: [
-      '**/*.{mts,cts}'
-    ],
-    languageOptions: {
-      ...typescript.recommended.languageOptions,
-      globals: {
-        ...globals.node
-      }
-    }
-  }
-]