What does useConfiguration exactly do?

[jaulz]

I am trying to implement components based on your architecture and even after debugging I am not quite sure what exactly useConfiguration does. The configuration seems to merge the global configuration with the local props but what does attributes return? Based on https://github.com/variantjs/vue/blob/main/src/use/useConfiguration.ts#L19-L39 it also returns part of the props but I would have assume that it would really return the $attrs.

@alfonsobries it would be great if you could give me a quick explanation 😊

[alfonsobries]

@jaulz configuration returns everything that is defined on the props merged with the default settings and the user configuration

attributes returns everything that is not a prop and is in the user configuration

If you create your own component and let say you named it TMyComponent and then you add a configuration like

TMyComponent: { somethingThatIsInTheProps: 'bar', somethingThatIsNotInTheProps: 'foo' }

configuration will contain somethingThatIsInTheProps

and attributes somethingThatIsNotInTheProps

The attributes make sense in components like inputs and buttons since manually defining all the attributes they can have as props is not practical but by using the attributes I am still allowing the user to add as many attributes as they want (in the configuration) without needed to explicitly add a prop, for example, lets you want to mark all the buttons as type="button" , if you see the TButton source code you will notice that there is no such props as type

[alfonsobries]

In summary, the attributes are my solution for grabbing all the custom data that is not defined as a prop that the user pass to the component in the initial component configuration

[jaulz]

Ah, thanks a lot for the quick response! 😊 So binding $attrs viav-bind="{ ...$attrs, attributes }" is only necessary if the rendered component is not a top level component, right?

[alfonsobries]

@jaulz the user attributes (the ones added directly on the component) are not merged to the attributes (like it happens with the props) so depending on what you need you may want to merge them, you just need to know that $attrs is a property that is built-in with Vue and contains the user attributes and useConfiguration().attributes is a property that contains the attributes added in the configuration (without the ones in the $attrs property)

Notice that in some cases you don't need to merge them since vue automatically adds the attributes to the main container of the component. If you see components like the https://github.com/variantjs/vue/blob/main/src/components/TButton.vue I am not merging anything if the user adds any custom attribute it will override any other property defined on the configuration