Display attributes of a component in the sidebar

[rigor789]

What problem does this feature solve?

Right now there is no way to see all the attributes passed to a component. In some cases it could be useful to see the values of $attrs in the sidebar, especially for functional components.

Additionally it would be nice to have an option to show the attributes in the component tree - this may get messy in some cases, so this would need to be opt-in via settings.

Reason for this feature request: Once #732 is merged we are one step closer to bringing VueDevtools into the NativeScript-Vue toolchain. In the upcoming 2.0 release of NativeScript-Vue we wrapped all elements into functional components, to be able to see them in VueDevtools, these elements can have attrivutes and it would help debug if we could see the values.

Example:

<ActionBar class="action-bar" title="Hello world"/>

(which is a component where we don't want to create props for every property) currently renders like so

it would be nice to see title: "Hello world" and class: "action-bar" in the component inspector

If this is something that would be considered, I'm willing to submit a PR with the changes.

What does the proposed API look like?

N/A

[sqal]

especially for functional components

but functional components are not displayed in components tab 😕

[rigor789]

@sqal #719 :)