react-component-name 0.0.0

package/README.md

@@ -0,0 +1,46 @@
+# react-component-name
+
+Get a React component name from its rendered element
+
+_These examples use **Testing Library** but you can also get the component name from any rendered element with `getComponentNameFromElement` or from its `Fiber` node with `getComponentNameFromFiber`_
+
+```javascript
+import {
+  getComponentNameFromRender,
+  getComponentNameFromContainerElement,
+  getComponentNameFromElement
+} from 'react-component-name'
+
+import {
+  render
+} from '@testing-library/react'
+
+function Component () {
+  return <div />
+}
+
+expect(getComponentNameFromRender(render(
+  <Component />
+)))
+  .toBe('div')
+
+const {
+  container
+} = render(
+  <Component />
+)
+
+expect(getComponentNameFromContainerElement(container))
+  .toBe('div')
+
+const {
+  container: {
+    firstElementChild: element
+  }
+} = render(
+  <Component />
+)
+
+expect(getComponentNameFromElement(element))
+  .toBe('div')
+```

package/index.d.mts

@@ -0,0 +1,109 @@
+import type React from 'react'
+
+declare global {
+  namespace ReactComponentNameTypes {
+    /**
+     *  React constants
+     */
+    export type RootWorkTag = 0 | 1
+
+    /**
+     *  React constants
+     */
+    export type WorkTag = (
+      0 |
+      1 |
+      2 |
+      3 |
+      4 |
+      5 |
+      6 |
+      7 |
+      8 |
+      9 |
+      10 |
+      11 |
+      12 |
+      13 |
+      14 |
+      15 |
+      16 |
+      17 |
+      18 |
+      19 |
+      20 |
+      21 |
+      22 |
+      23 |
+      24 |
+      25 |
+      26 |
+      27 |
+      28 |
+      29 |
+      30 |
+      31
+    )
+
+    /**
+     *  https://github.com/bendtherules/react-fiber-traverse
+     */
+    export type FiberNode =
+      | FiberNodeForClassComponent
+      | FiberNodeForFunctionComponent
+      | FiberNodeForInstrinsicElement
+      | FiberNodeForTextNode
+
+    interface FiberType {
+      child: FiberNode | null
+      sibling: FiberNode | null
+
+      tag: WorkTag
+      return?: FiberRootNode | FiberNode
+    }
+
+    export interface FiberRootNode extends FiberType {
+      child: FiberNode
+
+      elementType: React.FunctionComponent
+      type: React.FunctionComponent
+
+      stateNode: {
+        current: FiberRootNode
+      }
+      return?: FiberRootNode
+    }
+
+    export interface FiberNodeForFunctionComponent extends FiberType {
+      elementType: React.FunctionComponent
+      type: React.FunctionComponent
+
+      stateNode: null
+    }
+
+    export interface FiberNodeForClassComponent extends FiberType {
+      elementType: React.ComponentClass
+      type: React.ComponentClass
+
+      stateNode: React.Component
+    }
+
+    export interface FiberNodeForInstrinsicElement extends FiberType {
+      elementType: keyof React.JSX.IntrinsicElements
+      type: keyof React.JSX.IntrinsicElements
+
+      stateNode: HTMLElement
+    }
+
+    export interface FiberNodeForTextNode extends FiberType {
+      child: null
+
+      elementType: null
+      type: null
+
+      stateNode: Text
+    }
+  }
+}
+
+export {}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "react-component-name",
+  "version": "0.0.0",
+  "description": "Get a React component name from Fiber",
+  "keywords": [
+    "react",
+    "component",
+    "name"
+  ],
+  "main": "./src/index.mjs",
+  "type": "module",
+  "types": "./index.d.mts",
+  "author": {
+    "name": "Jonathan Perry for Modern Poacher Limited",
+    "email": "jonathanperry@modernpoacher.com",
+    "url": "https://modernpoacher.com"
+  },
+  "license": "ISC",
+  "engines": {
+    "node": ">=18.12.0 <=21.7.3 || >=22.2.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/modernpoacher/react-component-name.git"
+  },
+  "scripts": {
+    "lint": "eslint",
+    "lint:fix": "npm run lint -- --fix",
+    "test": "NODE_ENV=test jest"
+  },
+  "dependencies": {
+    "debug": "^4.4.0"
+  },
+  "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.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",
+    "@types/jest": "^29.5.14",
+    "@types/prop-types": "^15.7.14",
+    "@types/react": "^19.0.11",
+    "@types/testing-library__react": "^10.0.1",
+    "@typescript-eslint/parser": "^8.26.1",
+    "core-js": "^3.41.0",
+    "eslint": "^9.22.0",
+    "eslint-plugin-react": "^7.37.4",
+    "globals": "^16.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^19.0.0"
+  },
+  "imports": {
+    "#react-component-name": "./src/index.mjs"
+  },
+  "exports": {
+    ".": "./src/index.mjs"
+  }
+}

package/src/index.d.mts

@@ -0,0 +1,40 @@
+import type {
+  RenderResult as RenderType
+} from '@testing-library/react'
+
+type FiberNode = ReactComponentNameTypes.FiberNode
+
+export function getElementFromRender (render: RenderType): Element | null
+
+export function getContainerElementFromRender (render: RenderType): Element
+
+declare function getElementFromContainerElement (containerElement: Element): Element | null
+
+export function isReactFiberKey (key: PropertyKey): boolean
+
+export function isReactContainerFiberKey (key: PropertyKey) : boolean
+
+export function getReactFiberKey (element: Element): string | undefined
+
+export function getReactContainerFiberKey (containerElement: Element) : string | undefined
+
+export function getFiberFromRender (render: RenderType): FiberNode | null
+
+export function getFiberFromElement (element: Element) : FiberNode | null
+
+export function getContainerFiberFromContainerElement (containerElement: Element): FiberNode | null
+
+interface OuterType { displayName?: string | null }
+interface InnerType { displayName?: string | null; name?: string | null }
+
+declare function getComponentNameFromForwardRef (outerType: OuterType, innerType: InnerType): string | null
+
+export function getComponentNameFromFiberType (type: unknown): string | null
+
+export function getComponentNameFromFiber (fiberNode: FiberNode): string | null
+
+export function getComponentNameFromRender (render: RenderType | null): string | null
+
+export function getComponentNameFromElement (elemen: Element | null): string | null
+
+export function getComponentNameFromContainerElement (containerElement: Element | null): string | null

package/src/index.mjs

@@ -0,0 +1,426 @@
+// @ts-nocheck
+
+/**
+ *  @typedef {import('@testing-library/react').RenderResult} RenderType
+ *  @typedef {ReactComponentNameTypes.FiberNode} FiberNode
+ */
+
+import debug from 'debug'
+
+import {
+  REACT_PORTAL_TYPE,
+  REACT_FRAGMENT_TYPE,
+  REACT_STRICT_MODE_TYPE,
+  REACT_PROFILER_TYPE,
+  REACT_CONSUMER_TYPE,
+  REACT_CONTEXT_TYPE,
+  REACT_FORWARD_REF_TYPE,
+  REACT_SUSPENSE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
+  REACT_MEMO_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_CLIENT_REFERENCE
+} from './symbols.mjs'
+
+import {
+  FUNCTION_COMPONENT,
+  CLASS_COMPONENT,
+  HOST_ROOT,
+  HOST_PORTAL,
+  HOST_COMPONENT,
+  HOST_TEXT,
+  FRAGMENT,
+  MODE,
+  CONTEXT_CONSUMER,
+  CONTEXT_PROVIDER,
+  FORWARD_REF,
+  PROFILER,
+  SUSPENSE_COMPONENT,
+  MEMO_COMPONENT,
+  SIMPLE_MEMO_COMPONENT,
+  LAZY_COMPONENT,
+  DEYDRATED_FRAGMENT,
+  SUSPENSE_LIST_COMPONENT,
+  SCOPE_COMPONENT,
+  OFFSCREEN_COMPONENT,
+  CACHE_COMPONENT,
+  TRACING_MARKER_COMPONENT,
+  HOST_HOISTABLE,
+  HOST_SINGLETON,
+  THROW
+} from './work-tags.mjs'
+
+const log = debug('react-component-name')
+
+/**
+ *  @param {RenderType} render
+ *  @returns {Element | null}
+ */
+export function getElementFromRender (render) {
+  return (
+    getElementFromContainerElement(
+      getContainerElementFromRender(render)
+    )
+  )
+}
+
+/**
+ *  @param {RenderType} render
+ *  @returns {Element}
+ */
+export function getContainerElementFromRender (render) {
+  const {
+    container: containerElement
+  } = render
+
+  return containerElement
+}
+
+/**
+ *  @param {Element} containerElement
+ *  @returns {Element | null}
+ */
+function getElementFromContainerElement (containerElement) {
+  const {
+    firstElementChild: element = null
+  } = containerElement
+
+  return element
+}
+
+/**
+ *  @param {PropertyKey} key
+ *  @returns {boolean}
+ */
+export function isReactFiberKey (key) {
+  return String(key).startsWith('__reactFiber$')
+}
+
+/**
+ *  @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} containerElement
+ *  @returns {string | undefined}
+ */
+export function getReactContainerFiberKey (containerElement) {
+  return (
+    Object.keys(containerElement)
+      .find(isReactContainerFiberKey)
+  )
+}
+
+/**
+ *  @param {RenderType} render
+ *  @returns {FiberNode | null}
+ */
+export function getFiberFromRender (render) {
+  const element = getElementFromRender(render)
+
+  if (element) {
+    return (
+      getFiberFromElement(element)
+    )
+  }
+
+  return null
+}
+
+/**
+ *  @param {Element} element
+ *  @returns {FiberNode | null}
+ */
+export function getFiberFromElement (element) {
+  const key = getReactFiberKey(element)
+
+  if (key) {
+    const { // @ts-expect-error
+      [key]: fiber = null
+    } = element
+
+    return fiber
+  }
+
+  throw new Error('Fiber is not found')
+}
+
+/**
+ *  @param {Element} containerElement
+ *  @returns {FiberNode | null}
+ */
+export function getContainerFiberFromContainerElement (containerElement) {
+  const key = getReactContainerFiberKey(containerElement)
+
+  if (key) {
+    const { // @ts-expect-error
+      [key]: fiber = null
+    } = containerElement
+
+    return fiber
+  }
+
+  throw new Error('Fiber is not found')
+}
+
+/**
+ *  @param {{displayName?: string | null}} outerType
+ *  @param {{displayName?: string | null, name?: string | null}} innerType
+ *  @returns {string | null}
+ */
+function getComponentNameFromForwardRef (outerType, innerType) {
+  const outerName = outerType.displayName || null
+
+  if (outerName) return outerName
+
+  const innerName = innerType.displayName || innerType.name || null
+
+  if (innerName) return `ForwardRef(${innerName})`
+
+  return 'ForwardRef'
+}
+
+/**
+ *  @param {*} type
+ *  @returns {string | null}
+ */
+export function getComponentNameFromFiberType (type) {
+  if (type == null) return null
+
+  if (typeof type === 'function') {
+    return (
+      type.$$typeof === REACT_CLIENT_REFERENCE
+        ? null
+        : type.displayName || type.name || null
+    )
+  }
+
+  if (typeof type === 'string') return type
+
+  switch (type) {
+    case REACT_FRAGMENT_TYPE:
+      return 'Fragment'
+
+    case REACT_PORTAL_TYPE:
+      return 'Portal'
+
+    case REACT_PROFILER_TYPE:
+      return 'Profiler'
+
+    case REACT_STRICT_MODE_TYPE:
+      return 'StrictMode'
+
+    case REACT_SUSPENSE_TYPE:
+      return 'Suspense'
+
+    case REACT_SUSPENSE_LIST_TYPE:
+      return 'SuspenseList'
+  }
+
+  if (typeof type === 'object') {
+    switch (type.$$typeof) {
+      case REACT_CONTEXT_TYPE:
+        return (type.displayName || 'Context') + '.Provider'
+
+      case REACT_CONSUMER_TYPE:
+        return (type._context.displayName || 'Context') + '.Consumer'
+
+      case REACT_FORWARD_REF_TYPE:
+        return getComponentNameFromForwardRef(type, type.render)
+
+      case REACT_MEMO_TYPE:
+        return (
+          type.displayName || getComponentNameFromFiberType(type.type) || 'Memo'
+        )
+
+      case REACT_LAZY_TYPE:
+      {
+        const {
+          _payload: payload,
+          _init: init
+        } = type
+
+        try {
+          return getComponentNameFromFiberType(init(payload))
+        } catch (e) {
+          log(`Lazy Component error. Error was "${e}"`, e)
+        }
+      }
+    }
+  }
+
+  return null
+}
+
+/**
+ *  @param {FiberNode} fiberNode
+ *  @returns {string | null}
+ */
+export function getComponentNameFromFiber (fiberNode) {
+  const {
+    tag,
+    type
+  } = fiberNode
+
+  switch (tag) {
+    case CACHE_COMPONENT:
+      return 'Cache'
+
+    case CONTEXT_CONSUMER:
+      return (type._context.displayName || 'Context') + '.Consumer'
+
+    case CONTEXT_PROVIDER:
+      return (type.displayName || 'Context') + '.Provider'
+
+    case DEYDRATED_FRAGMENT:
+      return 'DehydratedFragment'
+
+    case FORWARD_REF:
+      return getComponentNameFromForwardRef(type, type.render, 'ForwardRef')
+
+    case FRAGMENT:
+      return 'Fragment'
+
+    case HOST_HOISTABLE:
+    case HOST_SINGLETON:
+    case HOST_COMPONENT:
+      return type
+
+    case HOST_PORTAL:
+      return 'Portal'
+
+    case HOST_ROOT:
+      return 'Root'
+
+    case HOST_TEXT:
+      return 'Text'
+
+    case LAZY_COMPONENT:
+      return getComponentNameFromFiberType(type)
+
+    case MODE:
+      return (
+        type === REACT_STRICT_MODE_TYPE
+          ? 'StrictMode'
+          : 'Mode'
+      )
+    case OFFSCREEN_COMPONENT:
+      return 'Offscreen'
+
+    case PROFILER:
+      return 'Profiler'
+
+    case SCOPE_COMPONENT:
+      return 'Scope'
+
+    case SUSPENSE_COMPONENT:
+      return 'Suspense'
+
+    case SUSPENSE_LIST_COMPONENT:
+      return 'SuspenseList'
+
+    case TRACING_MARKER_COMPONENT:
+      return 'TracingMarker'
+
+    case CLASS_COMPONENT:
+    case FUNCTION_COMPONENT:
+    case MEMO_COMPONENT:
+    case SIMPLE_MEMO_COMPONENT:
+      if (typeof type === 'function') return type.displayName || type.name || null
+      if (typeof type === 'string') return type
+      return null
+
+    case THROW:
+    {
+      const info = fiberNode._debugInfo || null
+
+      if (info != null) {
+        let i = info.length - 1
+
+        for (i; i >= 0; i--) {
+          const t = info[i]
+          const n = t.name
+
+          if (typeof n === 'string') return n
+        }
+      }
+
+      if (fiberNode.return !== null) return getComponentNameFromFiber(fiberNode.return)
+    }
+  }
+
+  return null
+}
+
+/**
+ *  @param {RenderType | null} render
+ *  @returns {string | null}
+ */
+export function getComponentNameFromRender (render) {
+  if (render) {
+    const fiberNode = getFiberFromRender(render)
+
+    if (fiberNode) {
+      return (
+        getComponentNameFromFiber(fiberNode)
+      )
+    }
+  }
+
+  return null
+}
+
+/**
+ *  @param {Element | null} element
+ *  @returns {string | null}
+ */
+export function getComponentNameFromElement (element) {
+  if (element instanceof HTMLElement) {
+    const fiberNode = getFiberFromElement(element)
+
+    if (fiberNode) {
+      return (
+        getComponentNameFromFiber(fiberNode)
+      )
+    }
+  }
+
+  return null
+}
+
+/**
+ *  @param {Element | null} containerElement
+ *  @returns {string | null}
+ */
+export function getComponentNameFromContainerElement (containerElement) {
+  if (containerElement instanceof HTMLElement) {
+    const element = getElementFromContainerElement(containerElement)
+
+    if (element instanceof HTMLElement) {
+      const fiberNode = getFiberFromElement(element)
+
+      if (fiberNode) {
+        return (
+          getComponentNameFromFiber(fiberNode)
+        )
+      }
+    }
+  }
+
+  return null
+}

package/src/root-work-tag.d.mts

@@ -0,0 +1,4 @@
+type RootWorkTag = ReactComponentNameTypes.RootWorkTag
+
+export declare const LEGACY_ROOT: RootWorkTag
+export declare const CONCURRENT_ROOT: RootWorkTag

package/src/root-work-tag.mjs

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of https://github.com/facebook/react
+ */
+
+export const LEGACY_ROOT = 0
+export const CONCURRENT_ROOT = 1

package/src/symbols.mjs

@@ -0,0 +1,12 @@
+export const REACT_PORTAL_TYPE = Symbol.for('react.portal')
+export const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment')
+export const REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode')
+export const REACT_PROFILER_TYPE = Symbol.for('react.profiler')
+export const REACT_CONSUMER_TYPE = Symbol.for('react.consumer')
+export const REACT_CONTEXT_TYPE = Symbol.for('react.context')
+export const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref')
+export const REACT_SUSPENSE_TYPE = Symbol.for('react.suspense')
+export const REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list')
+export const REACT_MEMO_TYPE = Symbol.for('react.memo')
+export const REACT_LAZY_TYPE = Symbol.for('react.lazy')
+export const REACT_CLIENT_REFERENCE = Symbol.for('react.client.reference')

package/src/work-tags.d.mts

@@ -0,0 +1,32 @@
+type WorkTag = ReactComponentNameTypes.WorkTag
+
+export declare const FUNCTION_COMPONENT: WorkTag
+export declare const CLASS_COMPONENT: WorkTag
+export declare const HOST_ROOT: WorkTag
+export declare const HOST_PORTAL: WorkTag
+export declare const HOST_COMPONENT: WorkTag
+export declare const HOST_TEXT: WorkTag
+export declare const FRAGMENT: WorkTag
+export declare const MODE: WorkTag
+export declare const CONTEXT_CONSUMER: WorkTag
+export declare const CONTEXT_PROVIDER: WorkTag
+export declare const FORWARD_REF: WorkTag
+export declare const PROFILER: WorkTag
+export declare const SUSPENSE_COMPONENT: WorkTag
+export declare const MEMO_COMPONENT: WorkTag
+export declare const SIMPLE_MEMO_COMPONENT: WorkTag
+export declare const LAZY_COMPONENT: WorkTag
+export declare const INCOMPLETE_CLASS_COMPONENT: WorkTag
+export declare const DEYDRATED_FRAGMENT: WorkTag
+export declare const SUSPENSE_LIST_COMPONENT: WorkTag
+export declare const SCOPE_COMPONENT: WorkTag
+export declare const OFFSCREEN_COMPONENT: WorkTag
+export declare const LEGACY_HIDDEN_COMPONENT: WorkTag
+export declare const CACHE_COMPONENT: WorkTag
+export declare const TRACING_MARKER_COMPONENT: WorkTag
+export declare const HOST_HOISTABLE: WorkTag
+export declare const HOST_SINGLETON: WorkTag
+export declare const INCOMPLETE_FUNCTION_COMPONENT: WorkTag
+export declare const THROW: WorkTag
+export declare const VIEW_TRANSITION_COMPONENT: WorkTag
+export declare const ACTIVITY_COMPONENT: WorkTag

package/src/work-tags.mjs

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of https://github.com/facebook/react
+ */
+
+export const FUNCTION_COMPONENT = 0
+export const CLASS_COMPONENT = 1
+export const HOST_ROOT = 3
+export const HOST_PORTAL = 4
+export const HOST_COMPONENT = 5
+export const HOST_TEXT = 6
+export const FRAGMENT = 7
+export const MODE = 8
+export const CONTEXT_CONSUMER = 9
+export const CONTEXT_PROVIDER = 10
+export const FORWARD_REF = 11
+export const PROFILER = 12
+export const SUSPENSE_COMPONENT = 13
+export const MEMO_COMPONENT = 14
+export const SIMPLE_MEMO_COMPONENT = 15
+export const LAZY_COMPONENT = 16
+export const INCOMPLETE_CLASS_COMPONENT = 17
+export const DEYDRATED_FRAGMENT = 18
+export const SUSPENSE_LIST_COMPONENT = 19
+export const SCOPE_COMPONENT = 21
+export const OFFSCREEN_COMPONENT = 22
+export const LEGACY_HIDDEN_COMPONENT = 23
+export const CACHE_COMPONENT = 24
+export const TRACING_MARKER_COMPONENT = 25
+export const HOST_HOISTABLE = 26
+export const HOST_SINGLETON = 27
+export const INCOMPLETE_FUNCTION_COMPONENT = 28
+export const THROW = 29
+export const VIEW_TRANSITION_COMPONENT = 30
+export const ACTIVITY_COMPONENT = 31

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "module": "NodeNext",
+    "target": "ESNext",
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "strict": true,
+    "jsx": "react"
+  },
+  "include": [
+    "."
+  ]
+}