ais-configure does not handle hyphenated properties correctly

[ghost]

Bug 🐞

What is the current behavior?

Using <ais-configure :click-analytics="true" /> leads to an error <ais-configure :clickAnalytics="true" /> works fine. Specifically, the search request to /1/indexes/*/queries[…] leads to a 400 response with the body {"message":"Unknown parameter: click-analytics","status":400}.

What is the expected behavior?

Both of the ais-configure variants work. Vue recommends to use hyphenated properties in HTML templates and translates them to camel case properties in the component.

There is an eslint rule that forbids camel case properties and also allows them to fix it automatically. Usually this just works, but in this case it breaks either way: one way eslint is not satisfied, the other way vue-instantsearch does not search correctly.

Does this happen only in specific situations?

As far as I can tell no.

What is the proposed solution?

Make the properties in the ais-configure component work like other vue properties, i.e. transform hypthenated property names to camel case property names.

What is the version you are using?

"algoliasearch": "^4.8.3"
"vue-instantsearch": "^3.4.3"
"search-insights": "^1.7.0"

[Haroenv]

Yes, that's correct, you can use <ais-configure :click-analytics.camel="true" /> if you want to continue using hyphen-case. Unfortunately there's no Vue API to retrieve all props in a camelCase way. We use $attrs, which will give all properties, without declaring them in advance, since that would be very adverse to bundle size and maintainability, but unfortunately it doesn't convert kebab-case to camelCase.

All our documentation mentions .camel to the props to make this clear, but if you have an idea where you were looking for this information and didn't find it, we can add it.

If you have an idea how to efficiently camelize on our hand, that would also be interesting!

[Haroenv]

The docs now uses .camel everywhere