BuilderIO / BuilderIO/hydration-overlay

Suggestion: Use Prettier to format the HTML

Open
#22 6 comments 2 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.