Use `clientOnly` without isolating component in its own file

[MengLinMaker]

What is this request related to?

Request

📋 Suggested

https://docs.solidjs.com/solid-start/reference/client/client-only

📋 General description or bullet points

Provide a way of using clientOnly without creating a separate file.
Code wise, this could be more ergonomic.

Could also create a helper function to directly translate component function to client only component.

import { clientOnly } from "@solidjs/start"

function ClientOnlyComponent() {
  const location = window.document.location
  return <div>{location.href}</div>
}

type ResolveClientComponent = (value: {
  default: Component
}) => void

export default clientOnly(
  () =>
    new Promise((resolve: ResolveClientComponent) => {
      resolve({ default: ClientOnlyComponent })
    }),
)

🖥️ Reproduction of code samples in StackBlitz

StackBlitz doesn't support solid-start

[atilafassina]

I'll check if this can be accomplished this way and I'll check with the team if there's any repercussions I'm not able to predict right now.

As for the helper, this is probably a feature request to made on SolidStart. In this repository we just document the existing APIs and offer guides on how to use them.

[MengLinMaker]

I have a working wrapper which looks something like this:

import { clientOnly } from '@solidjs/start'
import { Component } from 'solid-js'

// Client side render wrapper
type ResolveClientComponent<T> = (value: {
  default: Component<T>
}) => void

export const useClient = <T,>(App: Component<T>) => {
  return clientOnly(() => {
    return new Promise((resolve: ResolveClientComponent<T>) => {
      resolve({ default: App })
    })
  })
}

[brenelz]

I think we probably need to figure out a code solution to this before being able to document it. I think using this would be recommended

https://github.com/lxsmnsyc/solid-use/blob/main/docs/client-only.md