Add ClientOnly

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<T extends Component<any>>(
+  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;
+}

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<JSX.Element>;
 }
+
+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);
+}

packages/solid/src/server/rendering.ts

@@ -280,6 +280,10 @@ export function ErrorBoundary(props: {
   return { t: `<!e${id}>${resolveSSRNode(res)}<!/e${id}>` };
 }
 
+export function ClientOnly(props: { children?: JSX.Element }): JSX.Element {
+  return undefined;
+}
+
 // Suspense Context
 export interface Resource<T> {
   (): T | undefined;
@@ -609,3 +613,9 @@ export function Suspense(props: { fallback?: string; children: string }) {
   ctx.writeResource(id, "$$f");
   return props.fallback;
 }
+
+export function clientOnly<T extends Component<any>>(
+  fn: () => Promise<{ default: T }>
+): T {
+  return (() => undefined) as unknown as T;
+}