inspect component name with hover dom

inspectComponent.ts

import React from 'react'
import { injectGlobal } from 'emotion'


React.__origin_createElement = React.createElement

React.createElement = ((type, props, ...children) => {
  const createElement = React.__origin_createElement
  if (type === null || type === undefined || typeof type === 'string') {
    return createElement(type, props, ...children)
  }

  let displayName = null

  // The displayName property is not guaranteed to be a string.
  // It's only safe to use for our purposes if it's a string.
  // github.com/facebook/react-devtools/issues/803
  if (typeof type.displayName === 'string') {
    displayName = type.displayName
  } else if (typeof type.name === 'string' && type.name !== '') {
    displayName = type.name
  }

  if (displayName) {
    return createElement(
      type,
      {
        'data-display-name': displayName,
        ...(props ?? {}),
      },
      ...children,
    )
  }

  return createElement(type, props, ...children)
}) as typeof React.__origin_createElement



injectGlobal(`
  *[data-display-name]:hover {
    outline: 1px solid #7ef4d9;

    &:before {
      content: attr(data-display-name);
      position: absolute;
      display: block;
      color: #666;
      background: #fff;
      border: 1px solid #666;
      z-index: 10;
    }
  }
`)

typing.d.ts

import { createElement } from 'react'

declare namespace React {
  function __origin_createElement(...params: Parameters<typeof createElement>):
    ReturnType<typeof createElement>;
}