Simplified component declaration

[anton-github]

Currently we have two types of data-attributes: data-dc-component-{namespace} and data-dc-{namespace}-{name}.
First one (let's call it "anchor" attribute) is only to connect nodes with previously registered classes and create new classes instances on those nodes.
The purpose of the second one is to connect attributes to a specific component. The {name} can be whatever you want, the examples are the built in attributes like data-dc-{namespace}-ref and data-dc-{namespace}-options.

So in order to simplify declaration we can do 2 things:

• Instead of using data-dc-{namespace}-options to pass some options to the component and automatically parse it as JSON we can use "anchor" attribute itself. So the declaration will change from this:

<div data-dc-component-collapsed
       data-dc-collapsed-options='{"speed": 500, "ease": "linear"}'>
</div>

to this:

<div data-dc-component-collapsed='{"speed": 500, "ease": "linear"}'>
</div>

• To remove the "component" word from data-dc-component-{namespace} so anchor attribute from the example above will look like this data-dc-collapsed

I like the first one because we will be able to easy declare small utility components like gtm triggers:

<div data-dc-component-gtm='{"category":"Selling", "action":"Promo", "label":"Discover a new perspective"}'>
</div>

The second one makes declaration even shorter but has drawback which is we will be limited in naming components because two types of attributes can intersect each other.
For example, I have component named "modal" and I want to create component named "modal-ref". If "modal-ref" will be placed inside "modal" it will be treated not only as a component but also as ref of the "modal" component as they will have the same declaration: data-dc-modal-ref.

Any thoughts?

[bububo]

I like the second option
<div data-dc-gtm='options'></div>

If you create a component with name data-dc-some-ref it is your choice. As I understand, all will still work. There will be just one redundant ref in the componentdata-dc-some.

[anton-github]

@bububo Whether or not it will still be working will totally depend on particular component which will get an unexpected ref. But essentially yes, I agree, it's not that critical.

[anton-github]

Declarations has been change and available in version 1.0.0
Release https://github.com/Delete-Agency/dc/releases/tag/v1.0.0