From 2a7a6c7c121871109c6f87b0bc7bd035bb520586 Mon Sep 17 00:00:00 2001 From: Alexis Munsayac Date: Fri, 3 Mar 2023 20:13:10 +0800 Subject: [PATCH 1/2] Add `ClientOnly` --- packages/solid/src/render/flow.ts | 23 ++++++++++++++++++++++- packages/solid/src/server/rendering.ts | 4 ++++ 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/packages/solid/src/render/flow.ts b/packages/solid/src/render/flow.ts index f0f08d44d..fcfcd920f 100644 --- a/packages/solid/src/render/flow.ts +++ b/packages/solid/src/render/flow.ts @@ -7,7 +7,8 @@ import { Accessor, Setter, onCleanup, - MemoOptions + MemoOptions, + onMount } from "../reactive/signal.js"; import { mapArray, indexArray } from "../reactive/array.js"; import { sharedConfig } from "./hydration.js"; @@ -258,3 +259,23 @@ export function ErrorBoundary(props: { "_SOLID_DEV_" ? { name: "value" } : undefined ) as Accessor; } + +export function ClientOnly(props: { + children?: JSX.Element, +}): JSX.Element { + if (sharedConfig.context) { + const [flag, setFlag] = createSignal(false); + + onMount(() => { + setFlag(true); + }); + + return createMemo(() => { + if (flag()) { + return createMemo(() => props.children); + } + return undefined; + }); + } + return createMemo(() => props.children); +} \ No newline at end of file diff --git a/packages/solid/src/server/rendering.ts b/packages/solid/src/server/rendering.ts index 4ad19a7d9..1fd27300a 100644 --- a/packages/solid/src/server/rendering.ts +++ b/packages/solid/src/server/rendering.ts @@ -280,6 +280,10 @@ export function ErrorBoundary(props: { return { t: `${resolveSSRNode(res)}` }; } +export function ClientOnly(props: { children?: JSX.Element }): JSX.Element { + return undefined; +} + // Suspense Context export interface Resource { (): T | undefined; From 9d929087eb5fb59ddf54c1c07db6e4aa29daf8c1 Mon Sep 17 00:00:00 2001 From: Alexis Munsayac Date: Sat, 25 Mar 2023 21:05:33 +0800 Subject: [PATCH 2/2] Add `clientOnly` HOC --- packages/solid/src/render/component.ts | 26 +++++++++++++++++++++++++- packages/solid/src/server/rendering.ts | 6 ++++++ 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/packages/solid/src/render/component.ts b/packages/solid/src/render/component.ts index 0b68d3488..9525a860d 100644 --- a/packages/solid/src/render/component.ts +++ b/packages/solid/src/render/component.ts @@ -6,7 +6,8 @@ import { devComponent, $PROXY, $DEVCOMP, - EffectFunction + EffectFunction, + onMount } from "../reactive/signal.js"; import { sharedConfig, nextHydrateContext, setHydrateContext } from "./hydration.js"; import type { JSX } from "../jsx.js"; @@ -354,3 +355,26 @@ export function createUniqueId(): string { const ctx = sharedConfig.context; return ctx ? `${ctx.id}${ctx.count++}` : `cl-${counter++}`; } + +export function clientOnly>( + fn: () => Promise<{ default: T }> +): T { + const Lazy = lazy(fn); + return ((props: any) => { + if (sharedConfig.context) { + const [flag, setFlag] = createSignal(false); + + onMount(() => { + setFlag(true); + }); + + return createMemo(() => { + if (flag()) { + return createComponent(Lazy, props); + } + return undefined; + }); + } + return createComponent(Lazy, props); + }) as unknown as T; +} diff --git a/packages/solid/src/server/rendering.ts b/packages/solid/src/server/rendering.ts index 1fd27300a..acd94b930 100644 --- a/packages/solid/src/server/rendering.ts +++ b/packages/solid/src/server/rendering.ts @@ -613,3 +613,9 @@ export function Suspense(props: { fallback?: string; children: string }) { ctx.writeResource(id, "$$f"); return props.fallback; } + +export function clientOnly>( + fn: () => Promise<{ default: T }> +): T { + return (() => undefined) as unknown as T; +}