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[bot]]

⚠️ No Changeset found

Latest commit: 9d929087eb5fb59ddf54c1c07db6e4aa29daf8c1

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

[coveralls]

Pull Request Test Coverage Report for Build 4519382013

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

• For more information on this, see Tracking coverage changes with pull request builds.
• To avoid this issue with future PRs, see these Recommended CI Configurations.
• For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

• 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%
<!--	Total:	0	20

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%
<!--	Total:	11

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

---

💛 - Coveralls

[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