Allow `_custom` to be used on functions, or allow functions to be expanded and enumerate their properties.

[ascott18]

What problem does this feature solve?

I have a library/framework I've built that has some properties defined on functions. It would be wonderful if I could use the _custom hook on functions to alter how these are displayed in the devtools in the same way that it can be used on objects.

Alternatively, simply making functions expandable to enumerate their properties in the devtools would also fill this need. However, allowing for _custom here would allow this to be opt-in by libraries, which would probably reduce user confusion and allow for other extensibility like actions

The real world scenario here is a library that makes wrappers around fetch where those wrappers are functions that also have ref properties on them to indicate state like loading, result, success, errorMessage, etc.

What does the proposed API look like?

_custom is not ignored on objects where typeof obj === 'function'. Alternatively, the devtools could be made to simply allow expanding a function to enumerate that function's properties.

For example, in this component, I'd like the resulting view in the devtools to be essentially the same for both the myObj and myFunction:

import { ref } from 'vue'

export default {
  setup() {
    /***** Object: _custom works great ********/
    const answer = ref(42);
    const myObj = {
      answer
    }
    Object.defineProperty(myObj, '_custom', {
      enumerable: true,
      get() { return {
        value: {
          answerCustom: answer,
        },
        actions: [
          {
            icon: 'add',
            tooltip: 'Increment',
            action: () => answer.value++
          },
        ]
      }}
    })

    /***** Function: _custom does not work ********/
    var answer2 = ref(42);
    function myFunction() {
      console.log("value is " + answer2.value);
    }
    myFunction.answer2 = answer2;
    Object.defineProperty(myFunction, '_custom', {
      enumerable: true,
      get() { return {
        value: {
          answerCustom: answer2,
        },
        actions: [
          {
            icon: 'add',
            tooltip: 'Increment',
            action: () => answer2.value++
          },
          {
            icon: 'call',
            tooltip: 'Call',
            action: () => myFunction()
          },
        ]
      }}
    })

    return {
      myObj,
      myFunction
    }
  },
}

As you can see, _custom is ignored on the function: