How do I properly format html with indention/whitespace?

[j4w8n]

Thank you for all of these ecosystem utilities! I'm new to them and can't figure out what I'm doing wrong here.

Input html

<form><label></label><fieldset><label></label><input><label></label><input></fieldset></form>

Expected output

<form>
  <label></label>
  <fieldset>
    <label></label>
    <input>
    <label></label>
    <input>
  </fieldset>
</form>

Trying this

const vfile = await rehype()
  .data('settings', { fragment: true })
  .use(rehypeFormat, { indentInitial: false })
  .process('<form><label></label><fieldset><label></label><input><label></label><input></fieldset></form>')

console.log(vfile.value)

Actual output

<form><label></label>
<fieldset><label></label><input><label></label><input></fieldset>
</form>

[wooorm]

Whitespace has meaning / is visible in certain cases in HTML. rehype-format can’t add/remove whitespace in all places.

[j4w8n]

Ok thanks!

[j4w8n]

Ok, so it is possible to represent what we want in hast; it's just really verbose. Then, once that's transformed to html, I get the result I'm looking for.

  const oghtml = 
`<form>
  <label></label>
  <fieldset>
    <label></label>
    <input>
    <label></label>
    <input>
  </fieldset>
</form>`

  /* Transform to hast. */
  const hast = fromHtml(oghtml, { fragment: true })
  console.log(JSON.stringify(hast, null, 2))

  /* And back to the desired html structure. */
  const html = toHtml(hast)
  console.log(html)

[wooorm]

Yes, this project works on hast. So it can generate that too. But it needs to know there’s some space/newline between things. If you put {type: 'text', value: '\n'} between things, it can indent nicely: https://github.com/rehypejs/rehype-format/blob/main/test/fixtures/aria/input.html