Looks like site with examples is broken

[natemoo-re]

Looks like site with examples is broken

[natemoo-re]

🎉 examples.microsite.page is live! I'm going to leave this issue open until #94 is merged into main, but the examples are working and setup with Vercel's CI.

[natemoo-re]

@eyelidlessness Thanks! I actually got these examples mostly working tonight... Need to fix a few things on the deployment side but that should be fairly quick to do tomorrow.

[eyelidlessness]

@natemoo-re Awesome!!

I will say and I hope I’m not being too intrusive, this is why I put so much effort into testing before trying to dig into fixes. I’ve been super worried about breaking stuff but a good or even growing test suite could help alert me before I’ve done something unsuspecting. I know you know this but I’m mentioning it here because I want to double down on my intention to contribute and to be sure I’m not breaking some other poor soul’s site

[natemoo-re]

@eyelidlessness not being intrusive at all! The help is so appreciated! I'm hoping to wrap up the testing piece by the weekend so we can move a little faster without the fear of breaking everything.

[natemoo-re]

I pushed a number of changes in #94 to fix the examples—the examples themselves seem to be broken at the moment, but I'm investigating that. But the build process is all fixed and will live on https://examples.microsite.page soon!

[natemoo-re]

I have been meaning to look into doing full document mount with noop components! I think that would be the next technique to explore, which would hopefully add back full support for context Providers.

The Fragment thing actually turned out to be a quick fix, with some help from the Preact team!

[eyelidlessness]

@natemoo-re I’ve looked into this but if you’re gonna get to it before me, I have a few observations:

• None of the sites build without lerna hoist; side note I’ll look at PNPM or otherwise recommend a Yarn solution after all because yarn with workspaces configuration definitely doesn’t muck this up.

• That said the hoist behavior is generally not good to rely on and shared dependencies may be better off optional/peer.

• The Tailwind example is missing a PostCSS dependency and fails no matter what.

I wanted to look into this deeper today but I was still trying to land my first site build. I’ll look as soon as I can but wanted to share what I’ve seen.

[eyelidlessness]

Oof I forgot to mention the most important local debugging thing: lerna too often fails with a success exit, and swallows error logs. I tack on a --stream flag on every lerna command to ensure I see everything. Otherwise building the examples locally (for example) fails with no error

[eyelidlessness]

@natemoo-re oh that would be so great! For what it’s worth I’m a breath away from putting a little teaser up on my site and I’m gonna shout out this project for helping me get it built. I’m really hoping I can get it there tomorrow.

[akellbl4]

@natemoo-re thank you! I love the idea of the project because I've been carrying the same idea for a few years :)
I haven't started to dig into the problem deeper because haven't found any contribution recommendations. I would like to help but don't know how it works for this project :)
It could be great to have any kind of manual for new folk who want help.

[eyelidlessness]

@natemoo-re nice to see them back up!

I hate to be the bearer of bad news, but the partial hydration example seems to have the same affliction I experienced yesterday: flaky hydration. ☹️

I’m not sure what was the culprit for me but I experienced it moving from my spike project into my main site. The solve for me was to literally copy over my lockfile and reinstall. But this does mean there’s some dependency with unexpected breaking changes.

[natemoo-re]

@eyelidlessness Yep, I saw that. The culprit seems to be some tweaks to hydration logic in [email protected] and up. I pinned Microsite's version of preact to exactly [email protected] in v1.1.0-next.5, so make your lockfiles are fresh.

Also reached out on the Preact Slack for some help to see if it's a regression or Microsite needs to update some logic.

To be fair, Microsite's hydration logic uses an interesting technique to support mounting components with Fragment roots, which I imagine is fairly uncommon.

[eyelidlessness]

Yeah I definitely imagine Microsite being subject to more unexpected breaking changes than you’d normally expect. I’m glad you identified the problem!

Interestingly what I saw on my site is slightly different:

• hydrating on idle consistently caused the component to mount as expected and then immediately unmount (which I see at least on mobile for either hydration case on your example)

• hydrating on visible caused hydration to sometimes not occur at all/immediately unmount, sometimes occur adjacent to the server rendered node, and sometimes function normally

I strongly suspect there’s some timing factor involved here. But I was in build mode so I didn’t get hung up on it once I brute forced a fix

[eyelidlessness]

To be fair, Microsite's hydration logic uses an interesting technique to support mounting components with Fragment roots, which I imagine is fairly uncommon.

Before I found Microsite and was considering other solutions or even just rolling my own, I was thinking about going with a full document mount but substituting static components with a noop with shouldComponentUpdate always returning false. I have no idea if it would work but if it did it might be more reliable than fragment mounts (which I super appreciate because they don’t break styles the way other hydration marker approaches do).

Another harebrained scheme I considered was rendering all hydrated components as custom elements (and even just using that as the distinction between static/interactive), which also might be a possible mount point.

Not trying to monkeywrench what’s already working if the current approach is easy to fix with the Preact update but thought this would be a good place to drop those thoughts in case they’re helpful.

[eyelidlessness]

which would hopefully add back full support for context Providers

I’m assuming this is because there’s multiple mount points? I’ve also thought this might be solvable with one full page noop and Portals, but every time I go read the docs I get hung up on the DOM nonsense and bail.

[natemoo-re]

Right, multiple mount points means there are multiple instances of Preact running. Each hydration point is its own app. While Providers technically work, they don't stay in sync across Preact instances for obvious reasons.

[thapecroth]

Hi, I tried to use it with the current version and it's working. Will, there be an example for current version?