vike-solid 0.7.14 → 0.7.16

package/dist/+config.d.ts

@@ -29,7 +29,22 @@ declare const _default: {
     onRenderClient: "import:vike-solid/__internal/integration/onRenderClient:onRenderClient";
     clientRouting: true;
     hydrationCanBeAborted: true;
-    passToClient: string[];
+    passToClient: "_configFromHook"[];
+    staticReplace: {
+        env: "server";
+        filter: string;
+        type: "call";
+        match: {
+            function: string;
+            args: {
+                0: string;
+            };
+        };
+        remove: {
+            arg: number;
+            prop: string;
+        };
+    }[];
     meta: {
         Head: {
             env: {

package/dist/+config.js

@@ -22,7 +22,7 @@ function ssrEffect({
 var _config = {
   name: "vike-solid",
   require: {
-    vike: ">=0.4.195"
+    vike: ">=0.4.250"
   },
   vite: {
     ssr: {
@@ -39,6 +39,21 @@ var _config = {
   clientRouting: true,
   hydrationCanBeAborted: true,
   passToClient: ["_configFromHook"],
+  staticReplace: [{
+    env: "server",
+    filter: "vike-solid/ClientOnly",
+    type: "call",
+    match: {
+      function: "import:solid-js/web:createComponent",
+      args: {
+        0: "import:vike-solid/ClientOnly:ClientOnly"
+      }
+    },
+    remove: {
+      arg: 1,
+      prop: "children"
+    }
+  }],
   // https://vike.dev/meta
   meta: {
     Head: {

package/dist/components/ClientOnly.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'solid-js';
+
+/**
+ * Render children only on the client-side.
+ *
+ * Children are completely removed and never loaded on the server.
+ *
+ * https://vike.dev/ClientOnly
+ */
+declare function ClientOnly(props: {
+    children?: JSX.Element;
+    fallback?: JSX.Element;
+}): JSX.Element;
+
+export { ClientOnly };

package/dist/components/ClientOnly.js

@@ -0,0 +1,40 @@
+import { createComponent } from 'solid-js/web';
+import { Show, children } from 'solid-js';
+import { useHydrated } from '../hooks/useHydrated.js';
+import { usePageContext } from '../hooks/usePageContext.js';
+
+function assert(condition) {
+  if (condition) return;
+  throw new Error("You stumbled upon a vike-solid bug, reach out on GitHub.");
+}
+
+/**
+ * Render children only on the client-side.
+ *
+ * Children are completely removed and never loaded on the server.
+ *
+ * https://vike.dev/ClientOnly
+ */
+function ClientOnly(props) {
+  const pageContext = usePageContext();
+
+  // Assert tree-shaking: children should be statically removed on the server-side
+  if (!pageContext.isClientSide) {
+    // eslint-disable-next-line solid/reactivity
+    assert(props.children === undefined);
+  }
+  const hydrated = useHydrated();
+  return createComponent(Show, {
+    get when() {
+      return hydrated();
+    },
+    get fallback() {
+      return props.fallback;
+    },
+    get children() {
+      return children(() => props.children)();
+    }
+  });
+}
+
+export { ClientOnly };

package/dist/helpers/clientOnly.js

@@ -1,6 +1,10 @@
 import { createSignal, splitProps, sharedConfig, onMount, createMemo, untrack } from 'solid-js';
 import { isServer } from 'solid-js/web';
 
+// TODO/soon: add deprecation warning in favor of <ClientOnly>
+// TO-DO/breaking-change: remove it
+
+
 // Copied from https://github.com/solidjs/solid-start/blob/2d75d5fedfd11f739b03ca34decf23865868ac09/packages/start/src/shared/clientOnly.tsx#L7
 /**
  * Load and render a component only on the client-side.

package/dist/hooks/useHydrated.d.ts

@@ -0,0 +1,22 @@
+import { Accessor } from 'solid-js';
+
+/**
+ * Whether the page has already been hydrated.
+ *
+ * On the server, it always returns `false`. On the client, it returns `false` on first render and `true` after hydration completes.
+ *
+ * https://vike.dev/useHydrated
+ *
+ * Example: Disable a button that needs JavaScript to work.
+ * ```tsx
+ * const hydrated = useHydrated();
+ * return (
+ *   <button type="button" disabled={!hydrated()} onClick={doSomething}>
+ *     Click me
+ *   </button>
+ * );
+ * ```
+ */
+declare function useHydrated(): Accessor<boolean>;
+
+export { useHydrated };

package/dist/hooks/useHydrated.js

@@ -0,0 +1,33 @@
+import { createSignal, onMount } from 'solid-js';
+import { usePageContext } from './usePageContext.js';
+import 'solid-js/web';
+
+/**
+ * Whether the page has already been hydrated.
+ *
+ * On the server, it always returns `false`. On the client, it returns `false` on first render and `true` after hydration completes.
+ *
+ * https://vike.dev/useHydrated
+ *
+ * Example: Disable a button that needs JavaScript to work.
+ * ```tsx
+ * const hydrated = useHydrated();
+ * return (
+ *   <button type="button" disabled={!hydrated()} onClick={doSomething}>
+ *     Click me
+ *   </button>
+ * );
+ * ```
+ */
+function useHydrated() {
+  const pageContext = usePageContext();
+  const [hydrated, setHydrated] = createSignal(pageContext.isClientSide && !pageContext.isHydration);
+  if (pageContext.isClientSide && pageContext.isHydration) {
+    onMount(() => {
+      setHydrated(true);
+    });
+  }
+  return hydrated;
+}
+
+export { useHydrated };

package/dist/vite-plugin-vike-solid.js

@@ -11,8 +11,9 @@ function overrideConfig() {
     })
   };
 }
+// Return `PluginInterop` instead of `Plugin` to avoid type mismatch upon different Vite versions
 function vitePluginVikeSolid (options = {}) {
-  return [solidPlugin(mergeConfig({
+  const plugins = [solidPlugin(mergeConfig({
     ssr: true,
     typescript: {
       onlyRemoveTypeImports: true
@@ -21,6 +22,7 @@ function vitePluginVikeSolid (options = {}) {
       hydratable: true
     }
   }, options ?? {})), overrideConfig()];
+  return plugins;
 }
 
 export { vitePluginVikeSolid as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-solid",
-  "version": "0.7.14",
+  "version": "0.7.16",
   "type": "module",
   "dependencies": {
     "isbot-fast": "^1.2.0",
@@ -8,8 +8,7 @@
   },
   "peerDependencies": {
     "solid-js": "^1.8.7",
-    "vike": ">=0.4.195",
-    "vite": ">=5.0.0"
+    "vike": ">=0.4.250"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
@@ -26,13 +25,14 @@
     "solid-js": "^1.9.10",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "vike": "^0.4.249",
+    "vike": "^0.4.250",
     "vite": "^7.2.7"
   },
   "exports": {
     "./config": "./dist/+config.js",
     "./vite": "./dist/vite-plugin-vike-solid.js",
     "./usePageContext": "./dist/hooks/usePageContext.js",
+    "./useHydrated": "./dist/hooks/useHydrated.js",
     "./useData": "./dist/hooks/useData.js",
     "./useConfig": {
       "browser": "./dist/hooks/useConfig/useConfig-client.js",
@@ -47,6 +47,7 @@
       "default": "./dist/components/Head/Head-server.js"
     },
     "./clientOnly": "./dist/helpers/clientOnly.js",
+    "./ClientOnly": "./dist/components/ClientOnly.js",
     "./__internal/integration/onRenderHtml": "./dist/integration/onRenderHtml.js",
     "./__internal/integration/onRenderClient": "./dist/integration/onRenderClient.js",
     "./client": {
@@ -67,6 +68,9 @@
       "usePageContext": [
         "dist/hooks/usePageContext.d.ts"
       ],
+      "useHydrated": [
+        "dist/hooks/useHydrated.d.ts"
+      ],
       "useData": [
         "dist/hooks/useData.d.ts"
       ],
@@ -81,6 +85,9 @@
       ],
       "clientOnly": [
         "dist/helpers/clientOnly.d.ts"
+      ],
+      "ClientOnly": [
+        "dist/components/ClientOnly.d.ts"
       ]
     }
   },