[DevTools] Rename NativeElement to HostInstance in the Bridge

[sebmarkbage]

Stacked on #30490.

This is in the same spirit but to clarify the difference between what is React Native vs part of any generic Host. We used to use "Native" to mean three different concepts. Now "Native" just means React Native.

E.g. from the frontend's perspective the Host can be Highlighted/Inspected. However, that in turn can then be implemented as either direct DOM manipulation or commands to React Native. So frontend -> backend is "Host" but backend -> React Native is "Native" while backend -> DOM is "Web".

Rename NativeElementsPanel to BuiltinElementsPanel. This isn't a React Native panel but one part of the surrounding DevTools. We refer to Host more as the thing running React itself. I.e. where the backend lives. The runtime you're inspecting. The DevTools itself needs a third term. So I went with "Builtin".

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-compiler-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 29, 2024 6:42pm

[hoxyq]

I find it a bit confusing, because Host is essentially React DevTools backend, and this is HostInstance, which is not about React DevTools backend, but element instance.

Maybe something like InstanceForHost or ElementInstanceForHost?

[sebmarkbage]

Well I think of Host is the environment that the backend is running inside. E.g. the DOM. Not the backend itself.

It's also what we call this elsewhere in Fiber. It gets shortened into the name Instance inside the "Host Config" but the long name we refer it by is Host Instance. We could potentially rename it to HostInstance even in the Configs and then it would have the same name everywhere.

This name already shows up even in the DevTools interface too e.g. through the injected findFiberByHostInstance.

Also, not all Elements in the React DevTools refer to anything that has a Host Instance. Only a subset of DevTools Elements are represented by a Host Instance. HostText/HostComponent/HostSingleton/HostHoistable.

I have a follow up draft PR where I'm introducing an Instance to back stuff for the DevTools specifically which I'm calling a DevtoolsInstance which is more 1:1 with the Elements tab instances.

Although I think we should probably rename Element to Component in the Elements tab because in React an Element is what you return from JSX but a Component instance is the stateful thing you get as a result of rendering an Element.

[sebmarkbage]

Unrelated but ReactComponentInfo started out as an idea of being more like an instance of a Server Component but it's not actually a stateful thing and I wonder if it shouldn't just be modeled as a ReactElement. It already has mostly the same fields. It should have props too. ReactElement is missing env but technically it should have it:

react/packages/react-client/src/ReactFlightClient.js

Lines 699 to 703 in ec98d36

	// Interestingly we don't actually have the environment name of where
	// this JSX was created if it doesn't have an owner but if it does
	// it must be the same environment as the owner. We could send it separately
	// but it seems a bit unnecessary for this edge case.
	env = owner.env;

In this case DevTools would have to deal with React Elements too which makes the Element naming even more confusing.