fix: Layout shift before mounted should trigger relayouts

[shuding]

This PR fixes #18 and #8. There're other reports such as https://twitter.com/sebastienlorber/status/1610230370531688451, and potentially https://twitter.com/nicopellerin_io/status/1608230343907082245.

The cause for this issue is mostly related to web fonts. A common scenario is when the page.js script loads slower than the font, this happens in order:

1. <h1> and inlined <script> executed, rebalanced → ✅
2. Font loaded (layout shift!), that make each character slightly wider so it wraps → ⚠️
3. page.js loaded and React hydrated, registered Resize Observer and rebalanced the title → ✅

But if 2) and 3) swaps, it’s not a problem.

The solution here is simply register the Resize Observer ASAP, before other potential layout shifts. That is, putting it inside the inlined script tag too.

But this solution makes the script tag larger which is bad when you have many titles. Hence in this PR I added a <Provider> API, which inserts the global <script> tag before anything else. All <Balancer> components inside can know that and skip inserting that part. It's a good optimization and totally optional and non-breaking.

Note that it can still happen without web font. Any CSS or JS caused layout shift for that title happened before hydration might cause an issue like #18.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-wrap-balancer	✅ Ready (Inspect)	Visit Preview	Jan 5, 2023 at 1:22PM (UTC)