BuilderIO / BuilderIO/hydration-overlay
Suggestion: Use Prettier to format the HTML
- Dominant language
- CSS
- Stars
- 531
- Forks
- 18
- PR merge metrics
- No merged PRs in 30d
Description
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:
```ts
import prettier from 'prettier';
import parserHtml from 'prettier/parser-html';
const prettierHtmlOptions: prettier.Options = {
parser: 'html',
plugins: [parserHtml],
tabWidth: 2,
};
prettier.format(value, prettierHtmlOptions);
```
Contributor guide
Research direction
Start by reviewing the library's current HTML formatting and diff path, then compare its beautify output with the provided Prettier HTML configuration. Check how the formatted result is used for hydration errors surfaced through React 18's onRecoverableError callback. Done means the library produces smaller, reliable hydration diffs without the reported false positives.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100