Add ClientOnly

[lxsmnsyc]

Summary

Finally took the initiative. This one is the missing piece to SSR components, as it has some common use cases (e.g. rendering a component with web-only dependency). solid-start has one but I'm just hoping that core is the best place to put this so that other SSR frameworks (like Astro) can also use this. The fact that this is one of the most requested solution in solid-start and possibly other SSR applications should be enough to motivate this to be in the core.

How did you test this change?

The code is pretty basic, based on my 2-year old snippet: https://discord.com/channels/722131463138705510/722167424186843267/1022433627000291348

I just added some hydration checks + server code should be optimized to just return undefined directly

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9d92908

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[lxsmnsyc]

iirc this is the way to check if the app is currently hydrating. This check is needed so that UI correction can be applied, otherwise we can just render the children directly (since the app is just in CSR)

[coveralls]

Pull Request Test Coverage Report for Build 4519382013

• 0 of 20 (0.0%) changed or added relevant lines in 2 files are covered.
• 11 unchanged lines in 2 files lost coverage.
• Overall coverage decreased (-0.9%) to 87.368%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/solid/src/render/flow.ts	0	9	0.0%
packages/solid/src/render/component.ts	0	11	0.0%

Files with Coverage Reduction	New Missed Lines	%
packages/solid/web/src/index.ts	5	82.89%
packages/solid/src/reactive/signal.ts	6	89.62%

Totals
Change from base Build 4260487064:	-0.9%
Covered Lines:	1305
Relevant Lines:	1422

---

💛 - Coveralls

[emdede]

Is there a case where you'd want to use a self-closing <ClientOnly />?

[lxsmnsyc]

Maybe 🤷 🤣

[ryansolid]

My only concern with this and why I did this with dynamic imports/compiler macro in SolidStart is if this will be sufficient for bundlers to drop the code. We told people to do this and they were having issues still since they used libraries that touched global APIs (like window, document) so this alone wasn't enough. At which point I was less into this approach on its own.

I'm still trying to figure out if we can work this into Bling. But it is very framework specific when accounting for hydration.

[lxsmnsyc]

yeah I could probably do a lazy-like HOC. This wrapping component still has its place IMO

[thetarnav]

Combining <ClientOnly> with lazy should be enough to drop the code, right? As a component, it can be easily composed.

const MyLazyComponent = lazy(() => import("..."))

<ClientOnly>
  <Suspense>
    <MyLazyComponent />
  </Suspense>
</ClientOnly>

[lxsmnsyc]

@thetarnav yes it should be. I provided clientOnly just in case it wasn't enough and as stated by Ryan, users might mistake on using ClientOnly first before the lazy version