feat: deprecate ClientOnly and replace with clientOnly (same as solid-start)

examples/basic/pages/index/+Page.tsx

@@ -1,4 +1,12 @@
-import { ClientOnly } from "vike-solid/ClientOnly";
+import { clientOnly } from "vike-solid/ClientOnly";
+
+const ClientOnlyCounter = clientOnly(() => import("./Counter"));
+const ClientOnlyCounterSlow = clientOnly(async () => {
+  // Wasting time to show the fallback
+  await new Promise(resolve => setTimeout(resolve, 2000));
+
+  return import("./Counter");
+});
 
 export default function Page() {
   return (
@@ -8,22 +16,9 @@ export default function Page() {
       <ul>
         <li>Rendered to HTML.</li>
 
-        <ClientOnly load={() => import("./Counter")} fallback={<li>Waiting for client-side only component to load (quick)</li>}>
-          {(Counter) => <li>
-            Interactive 1. <Counter />
-          </li>}
-        </ClientOnly>
-
-        <ClientOnly load={async () => {
-          // Wasting time to show the fallback
-          await new Promise(resolve => setTimeout(resolve, 2000));
+        <li><ClientOnlyCounter fallback={<>Waiting for client-side only component to load (quick)</>} /></li>
 
-          return import("./Counter");
-        }} fallback={<li>Waiting for client-side only component to load (slow)</li>}>
-          {(Counter) => <li>
-            Interactive 2. <Counter />
-          </li>}
-        </ClientOnly>
+        <li><ClientOnlyCounterSlow fallback={<>Waiting for client-side only component to load (slow)</>} /></li>
       </ul>
     </>
   );

vike-solid/README.md

@@ -21,7 +21,7 @@ SolidJS integration for Vike, see [vike.dev/solid](https://vike.dev/solid).
 
 ## Scaffold new app
 
-Use [Bati](https://batijs.github.io/) to scaffold a Vike app using `vike-solid`.
+Use [Bati](https://batijs.dev/) to scaffold a Vike app using `vike-solid`.
 
 ## Add to existing app
 

vike-solid/components/ClientOnly.tsx

@@ -1,11 +1,26 @@
-import type { Component, JSX } from "solid-js";
-import { createEffect, createSignal, lazy, Suspense } from "solid-js";
-import { Dynamic } from "solid-js/web";
+import {
+  Component,
+  ComponentProps,
+  createEffect,
+  createMemo,
+  createSignal,
+  JSX,
+  lazy,
+  onMount,
+  sharedConfig,
+  splitProps,
+  Suspense,
+  untrack
+} from "solid-js";
+import { Dynamic, isServer } from "solid-js/web";
 
 function ClientOnlyError() {
   return <p>Error loading component.</p>
 }
 
+/**
+ * @deprecated Replaced by {@link clientOnly}
+ */
 export function ClientOnly<T>(props: {
   load: () => Promise<{ default: Component<T> } | Component<T>>
   children: (Component: Component<T>) => JSX.Element
@@ -33,3 +48,33 @@ export function ClientOnly<T>(props: {
 
   return <Suspense fallback={props.fallback}><Dynamic component={getComponent()} /></Suspense>;
 }
+
+
+// Copied from https://github.com/solidjs/solid-start/blob/2d75d5fedfd11f739b03ca34decf23865868ac09/packages/start/src/shared/clientOnly.tsx#L7
+/**
+ * Same as `clientOnly` from solid-start
+ * @see {@link https://docs.solidjs.com/solid-start/reference/client/client-only}
+ */
+export function clientOnly<T extends Component<any>>(
+  fn: () => Promise<{
+    default: T;
+  }>
+) {
+  if (isServer) return (props: ComponentProps<T> & { fallback?: JSX.Element }) => props.fallback;
+
+  const [comp, setComp] = createSignal<T>();
+  fn().then(m => setComp(() => m.default));
+  return (props: ComponentProps<T>) => {
+    let Comp: T | undefined;
+    let m: boolean;
+    const [, rest] = splitProps(props, ["fallback"]);
+    if ((Comp = comp()) && !sharedConfig.context) return Comp(rest);
+    const [mounted, setMounted] = createSignal(!sharedConfig.context);
+    onMount(() => setMounted(true));
+    return createMemo(
+      () => (
+        (Comp = comp()), (m = mounted()), untrack(() => (Comp && m ? Comp(rest) : props.fallback))
+      )
+    );
+  };
+}