search

rehypejs / rehype-format

plugin to format HTML
https://unifiedjs.com
MIT License
28 stars 4 forks source link

Format attributes #5

Closed StarpTech closed 6 years ago

StarpTech commented 6 years ago

Hi, is there an easy way to ident attributes in the same way as with tags? I want to archive something like this but I didn't find a ad-hoc solution to change the way how attributes are rendered. Do I need an own renderer or can it be archived with existing tools? Thank you.

Input:

<my-component disabled name="dede" [(click)]="test" [property]="{ a: 122 }">
</my-component>

Output:

<my-component
  disabled
  name="dede"
  [(click)]="test"
  [property]="{ a: 122 }">
</my-component>
wooorm commented 6 years ago

That would be something for hast-util-to-html, somewhere around here, which is used by rehype-stringify. I don’t think it would be easy though, to infer how deep an element is nested and when to start breaking: I’m sure <my-component disabled></my-component> could be on one line?

Also, rehype is for HTML, and I’m pretty sure all the []s and ()s won’t work well!

StarpTech commented 6 years ago

Thanks for the fast response. I will take a look.

I’m sure could be on one line?

Yeah, based on the property count or max width.

Also, rehype is for HTML, and I’m pretty sure all the []s and ()s won’t work well!

With rehype-format it works.