Add ClientOnly

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;