Support kebab-case property names and value-less boolean props

What problem does this feature solve?

NativeScript Vue should make it easy for Vue developers to create native apps. However, when some basic features like this don't work the same way, it makes alternating between Vue and NativeScript-Vue harder. Maybe there's a reason why it doesn't work here? I googled and searched the issues, but couldn't find it. It would be nice to have a searchable answer to the question.

The strange thing is that component names do support kebab-casing, like using <grid-layout instead of <GridLayout works

PS. The link to the forums (https://discourse.nativescript.org/) seems to not work right now, so I couldn't ask there. Also, the Telerik #vue channel in slack-link (https://developer.telerik.com/wp-login.php?action=slack-invitation) leaves me clueless as to what to do on that page.

What does the proposed API look like?

Instead of only allowing the following:

<page :actionBarHidden=true>
    <!-- -->
</page>

Also allow:

<page :action-bar-hidden=true>
    <!-- -->
</page>

And also the following two options:

<page action-bar-hidden>
    <!-- -->
</page>

And / or:

<page actionBarHidden>
    <!-- -->
</page>

The url for the Community Slack is here: https://www.nativescript.org/slack-invitation-form - Not sure where you found the old one - but it is no longer used!

These variants should be working:

<page :actionBarHidden="true" />
<page actionBarHidden />

The other two do not work because the attribute/property names are case-sensitive in NativeScript, and converting them automatically would introduce complexity - action-bar-hidden could be interpreted as actionbarhidden, ActionBarHidden, actionBarHidden.

Another example would be iosEstimatedRowHeight for ListView - in this case ios is lowercase, but in many places (3rd party plugins) iOS could be used instead - there's no clear way to use the right one.

I'll keep this in mind though, and perhaps we can improve this in the future.

Thanks for the quick explanation. On my iPhone, I've tried this playground with the second variant that should work and it still shows the action bar: https://play.nativescript.org/?template=play-vue&id=e4F5lL&v=2

BTW, I found the links when creating a new issue through here: https://new-issue.nativescript-vue.org/?repo=nativescript-vue/nativescript-vue

Just came here to check status on a previous (related) issue (https://github.com/nativescript-vue/nativescript-vue/issues/665) and see an answer here, perfect! 😁

@rigor789 Why can't it be done in a deterministic way? We know components attributes from core or plugins documentation so it won't be difficult to hyphenize them.

I always use eslint with the attribute-hyphenation custom rule: https://eslint.vuejs.org/rules/attribute-hyphenation.html#vue-attribute-hyphenation. With VSCode, the eslint plugin is able to auto-hyphenize attributes in camelCase and it is very simple: every uppercase character is lowered and preceded by an hypen.

So, if I take your example:

• actionBarHidden → action-bar-hidden
• iosEstimatedRowHeight → ios-estimated-row-height
• iOSEstimatedRowHeight → i-o-s-estimated-row-height

The last one is not very pretty but it is not in camelCase either, no one can know (except with context) if iOS is a single word or not.

So, in the other way, it should be the same: every character following an hyphen should be in uppercase and each hyphen must be removed.

The point of having attributes hyphenation is to be able to have consistent style for attributes. Actually, it's working fine only for custom components props.

Thanks for your feedback on this :)