feat: ClientOnly component

vike-solid/components/ClientOnly.tsx

@@ -0,0 +1,36 @@
+import type { Component, JSX } from "solid-js";
+import { createEffect, createSignal, lazy, Suspense } from "solid-js";
+import { Dynamic } from "solid-js/web";
+
+function ClientOnlyError() {
+  return <p>Error loading component.</p>
+}
+
+export function ClientOnly<T>(props: {
+  load: () => Promise<{ default: Component<T> } | Component<T>>
+  children: (Component: Component<T>) => JSX.Element
+  fallback: JSX.Element
+  deps?: Parameters<typeof createSignal>[1]
+}) {
+  const [getComponent, setComponent] = createSignal<Component<unknown> | undefined>(undefined);
+
+  createEffect(() => {
+    const loadComponent = () => {
+      const Component = lazy(() =>
+        props.load()
+          .then((LoadedComponent) => {
+            return { default: () => props.children("default" in LoadedComponent ? LoadedComponent.default : LoadedComponent) };
+          })
+          .catch((error) => {
+            console.error("Component loading failed:", error);
+            return { default: ClientOnlyError };
+          })
+      );
+      setComponent(() => Component);
+    };
+
+    loadComponent();
+  });
+
+  return <Suspense fallback={props.fallback}><Dynamic component={getComponent()} /></Suspense>;
+}

vike-solid/package.json

@@ -2,13 +2,6 @@
   "name": "vike-solid",
   "version": "0.2.5",
   "type": "module",
-  "exports": {
-    ".": "./dist/+config.js",
-    "./vite": "./dist/vite-plugin-vike-solid.js",
-    "./usePageContext": "./dist/usePageContext.js",
-    "./renderer/onRenderHtml": "./dist/+onRenderHtml.js",
-    "./renderer/onRenderClient": "./dist/+onRenderClient.js"
-  },
   "scripts": {
     "dev": "rollup -c rollup.config.js --watch",
     "build": "tsc --noEmit && rollup -c rollup.config.js",
@@ -39,6 +32,14 @@
     "vite": "^4.5.0",
     "vike": "^0.4.147"
   },
+  "exports": {
+    ".": "./dist/+config.js",
+    "./vite": "./dist/vite-plugin-vike-solid.js",
+    "./usePageContext": "./dist/usePageContext.js",
+    "./ClientOnly": "./dist/ClientOnly.js",
+    "./renderer/onRenderHtml": "./dist/+onRenderHtml.js",
+    "./renderer/onRenderClient": "./dist/+onRenderClient.js"
+  },
   "typesVersions": {
     "*": {
       ".": [
@@ -52,6 +53,9 @@
       ],
       "usePageContext": [
         "dist/components/usePageContext.d.ts"
+      ],
+      "ClientOnly": [
+        "dist/components/ClientOnly.d.ts"
       ]
     }
   },

vike-solid/rollup.config.js

@@ -8,6 +8,7 @@ export default [
       "./renderer/+onRenderHtml.tsx",
       "./renderer/+config.ts",
       "./components/usePageContext.tsx",
+      "./components/ClientOnly.tsx",
       "./cli/index.ts",
     ],
     ssr: true,
@@ -26,6 +27,7 @@ export default [
     input: [
       "./renderer/+config.ts",
       "./components/usePageContext.tsx",
+      "./components/ClientOnly.tsx",
       "./vite-plugin-vike-solid.ts",
     ],
     output: [{ dir: "dist", format: "es", sanitizeFileName: false }],