feature/use-defineComponent-function-name-in-__DEV__

[bjarkihall]

Continuing from discussions about stateful functions as components (#1645), I thought if it wouldn't help devtools and debugging experience to extract the name from the function when in __DEV__ mode.
Using the file name makes sense in SFCs but in js/jsx/ts/tsx files you can define multiple small component.
Users can define name option property on object components but this tries to extract the name from a function provided instead.
It works when defining components like constants:

const Counter = () => {
  const counter = ref(0)
  const increment = ()=>counter.value++
  return () => <button onClick={increment}>Counter: {counter.value}</button>
}
export default defineComponent(Counter)

or functions:

export default defineComponent(function Counter() {
  const counter = ref(0)
  const increment = ()=>counter.value++
  return () => <button onClick={increment}>Counter: {counter.value}</button>
})

but this won't give any name (which is expected):

export default defineComponent(() => {
  const counter = ref(0)
  const increment = ()=>counter.value++
  return () => <button onClick={increment}>Counter: {counter.value}</button>
})

nor this (can possibly be picked up by the dev bundler though):

export const Counter = defineComponent(() => {
  const counter = ref(0)
  const increment = ()=>counter.value++
  return () => <button onClick={increment}>Counter: {counter.value}</button>
})

The alternative would be to look into Component.setup.name in the formatComponentName function, but I'm not sure about when the name is supposed to be set in that case.

[yyx990803]

I was thinking about this when reading that thread! However I think it should be supported in both dev and prod, since name can lead to behavior differences for recursive components (components referencing themselves in templates).

[bjarkihall]

Sure thing, I didn't want to affect the production performance since this had the "close to no-op" comment. :)
I updated the PR.