Fragment components don't show in tree

[codemonkeynorth]

React Tools will show them in its tree, but react-scan does not

demo: https://m95j2x.csb.app/ code: https://codesandbox.io/p/sandbox/m95j2x?file=%2Fsrc%2FFragmentComponent.tsx%3A16%2C80

import Foo from "./Foo";

type FragmentComponentProps = {
  count: number;
};
const FragmentComponent = ({ count }: FragmentComponentProps) => {
  const foo = ["Fragment", "Component", "Example"];

  const renderedFoo = foo.map((f, i) => {
    return <Foo key={"foo_" + i} value={foo[i]}></Foo>;
  });

  return <>{renderedFoo}</>;
};

FragmentComponent.displayName = "[FragmentComponent]"; // doesn't show in tree unless we wrap in <div> instead of <>

export default FragmentComponent;

thanks J

[RobPruzan]

Thanks for the report.

For anyone with similar issues, the bug is because we incorrectly derive the component tree. If a component does not render "host components", aka components with lowercase names, then it will not be in the tree.

The correct way to derive the tree will be reading from the root fiber down (we do some silly hacks that derive the fiber tree from the dom itself).

I spent some time fixing this, but hasn't touched the branch in a bit. Will try to revist soon