New option: prevent HTML transformation into self-closing tags

[patricksevat]

Hi there,

We have a web components UI component library which is used by the rest of the organization mainly in Angular 6 and 7. We use Docz for our documentation of the UI components.

In our organization we have noticed a lot of copy pasting between our docs and into Angular apps which leads to issues and a bit of frustation because Angular does not support self-closing tags <my-awesome-divider /> in HTML (also see this issue): angular/angular#673

When we write our documentation we use the verbose method <my-awesome-divider></my-awesome-divider>, but as far as I have investigated during the .mdx parsing process it gets converted to the shorthand method (which is valid in JSX) by Prettier (see docz/core/docz-utils/src/format.ts).

Prettier is pretty opiniated and has chosen to only support this shorthand method (see prettier/prettier#5641 and prettier/prettier#5246 ).

I'm not sure if Docz should apply Prettier at all, it is pretty (pun intended) intrusive.

If the community wants to stick with it I'm fine with that decision, but would like (to create) a feature to transform the output from Prettier back to the verbose method (if configured ofc).

Thoughts?

🥔 for long post

[patricksevat]

@pedronauck could you provide me with your thoughts on this? I've done some work on this, but I'm not sure if my approach is the right one.

Is this something you'd want to support at all in Docz?

If so, would you want to add the option to skip Prettier formatting or add an option to reformat Custom Elements?

So far I've created a small working version of reformatting here: dev...patricksevat:feat/void-custom-elements (TODO: add option to only reformat list of elements, better naming)