Suggestion: Use Prettier to format the HTML

[arthurdenner]

At work, I've built a solution to display server-side errors on the client using the onRecoverableError callback from React 18.
I've extended that solution to display a diff on hydration errors based on this package, so thank you very much for sharing it.

A different approach I used was to format the HTML using prettier instead of beautify. I was getting a lot of false positives with beautify due to different things like HTML comments (<!--$-->), semicolons... So my diff was always huge. Using prettier, it's much smaller and there are only some false positives involving inline style attributes.

It might be good to explore this approach for the library itself. Here is a code snippet:

import prettier from 'prettier';
import parserHtml from 'prettier/parser-html';

const prettierHtmlOptions: prettier.Options = {
  parser: 'html',
  plugins: [parserHtml],
  tabWidth: 2,
};

prettier.format(value, prettierHtmlOptions);

[samijaber]

Yeah, could be a useful change to make! If you're feeling up for it, would love for you to make that contribution in a PR.

Otherwise, I will try to take a stab at it down the line when I have some time.

[lucaliebenberg]

@samijaber Hi, would this be a good first issue/beginner issue? Wouldn't attempting it and try to help out!

[samijaber]

@lucaliebenberg go for it!

[lucaliebenberg]

@samijaber thanks, I shall give it a go!

[lucaliebenberg]

@samijaber hi Sam, I have cloned the repo and branched off. I have swapped out the beuatify usages and have replaced it with the prettier implementation similar to what @arthurdenner previously said.

How am I able to open the PR, as it seems my git is denied

[samijaber]

not sure what issue you're facing, you should be able to use this view https://github.com/BuilderIO/hydration-overlay/compare

to take your fork's branch and make a PR against the main branch of this project.