vike-react 0.6.16 → 0.6.18

package/dist/components/ClientOnly.d.ts

@@ -1,11 +1,14 @@
 export { ClientOnly };
-import React, { useEffect } from 'react';
+import React from 'react';
 import type { ReactNode } from 'react';
-declare function ClientOnly<T>({ load, children, fallback, deps, }: {
-    load: () => Promise<{
-        default: React.ComponentType<T>;
-    } | React.ComponentType<T>>;
-    children: (Component: React.ComponentType<T>) => ReactNode;
-    fallback: ReactNode;
-    deps?: Parameters<typeof useEffect>[1];
-}): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+/**
+ * Render children only on the client-side.
+ *
+ * Children are completely removed and never loaded on the server.
+ *
+ * https://vike.dev/ClientOnly
+ */
+declare function ClientOnly({ children, fallback }: {
+    children: ReactNode;
+    fallback?: ReactNode;
+}): React.JSX.Element;

package/dist/components/ClientOnly.js

@@ -1,26 +1,20 @@
 export { ClientOnly };
-import React, { lazy, useEffect, useState, startTransition } from 'react';
-function ClientOnly({ load, children, fallback, deps = [], }) {
-    // TO-DO/next-major: remove this file/export
-    console.warn('[vike-react][warning] <ClientOnly> is deprecated: use clientOnly() instead https://vike.dev/clientOnly');
-    const [Component, setComponent] = useState(null);
-    useEffect(() => {
-        const loadComponent = () => {
-            const Component = lazy(() => load()
-                .then((LoadedComponent) => {
-                return {
-                    default: () => children('default' in LoadedComponent ? LoadedComponent.default : LoadedComponent),
-                };
-            })
-                .catch((error) => {
-                console.error('Component loading failed:', error);
-                return { default: () => React.createElement("p", null, "Error loading component.") };
-            }));
-            setComponent(Component);
-        };
-        startTransition(() => {
-            loadComponent();
-        });
-    }, deps);
-    return Component ? React.createElement(Component, null) : fallback;
+import React from 'react';
+import { usePageContext } from '../hooks/usePageContext.js';
+import { useHydrated } from '../hooks/useHydrated.js';
+import { assert } from '../utils/assert.js';
+/**
+ * Render children only on the client-side.
+ *
+ * Children are completely removed and never loaded on the server.
+ *
+ * https://vike.dev/ClientOnly
+ */
+function ClientOnly({ children, fallback }) {
+    const pageContext = usePageContext();
+    // Assert tree-shaking: children should be statically removed on the server-side
+    if (!pageContext.isClientSide)
+        assert(children === undefined);
+    const hydrated = useHydrated();
+    return React.createElement(React.Fragment, null, hydrated ? children : fallback);
 }

package/dist/config.d.ts

@@ -11,6 +11,51 @@ declare const config: {
     passToClient: string[];
     clientRouting: true;
     hydrationCanBeAborted: true;
+    staticReplace: ({
+        env: "server";
+        filter: string;
+        type: "call";
+        match: {
+            function: string[];
+            args: {
+                0: string;
+            };
+        };
+        remove: {
+            arg: number;
+            prop: string;
+            argsFrom?: undefined;
+        };
+        replace?: undefined;
+    } | {
+        env: "server";
+        filter: string;
+        type: "call";
+        match: {
+            function: string;
+            args: {
+                0: string;
+            };
+        };
+        remove: {
+            argsFrom: number;
+            arg?: undefined;
+            prop?: undefined;
+        };
+        replace?: undefined;
+    } | {
+        env: "server";
+        filter: string;
+        type: "call";
+        match: {
+            function: string;
+            args?: undefined;
+        };
+        replace: {
+            with: boolean;
+        };
+        remove?: undefined;
+    })[];
     meta: {
         Head: {
             env: {

package/dist/config.js

@@ -5,7 +5,7 @@ const config = {
     // @eject-remove start
     name: 'vike-react',
     require: {
-        vike: '>=0.4.242',
+        vike: '>=0.4.250',
     },
     Loading: 'import:vike-react/__internal/integration/Loading:default',
     // https://vike.dev/onRenderHtml
@@ -21,6 +21,42 @@ const config = {
     // https://vike.dev/clientRouting
     clientRouting: true,
     hydrationCanBeAborted: true,
+    // Remove <ClientOnly> children on server
+    staticReplace: [
+        {
+            env: 'server',
+            filter: 'vike-react/ClientOnly',
+            type: 'call',
+            match: {
+                function: [
+                    'import:react/jsx-runtime:jsx',
+                    'import:react/jsx-runtime:jsxs',
+                    'import:react/jsx-dev-runtime:jsxDEV',
+                ],
+                args: { 0: 'import:vike-react/ClientOnly:ClientOnly' },
+            },
+            remove: { arg: 1, prop: 'children' },
+        },
+        {
+            env: 'server',
+            filter: 'vike-react/ClientOnly',
+            type: 'call',
+            match: {
+                function: 'import:react:createElement',
+                args: { 0: 'import:vike-react/ClientOnly:ClientOnly' },
+            },
+            remove: { argsFrom: 2 },
+        },
+        {
+            env: 'server',
+            filter: 'vike-react/useHydrated',
+            type: 'call',
+            match: {
+                function: 'import:vike-react/useHydrated:useHydrated',
+            },
+            replace: { with: false },
+        },
+    ],
     // https://vike.dev/meta
     meta: {
         Head: {

package/dist/helpers/clientOnly.js

@@ -1,3 +1,5 @@
+// TODO/soon: add deprecation warning in favor of <ClientOnly>
+// TO-DO/breaking-change: remove it
 export { clientOnly };
 import React, { Suspense, forwardRef, lazy, useEffect, useState, } from 'react';
 /**

package/dist/hooks/useConfig/useConfig-server.js

@@ -18,6 +18,7 @@ function useConfig() {
         return (config) => setPageContextConfigViaHook(config, pageContext);
     // Component
     pageContext = usePageContext();
+    assert(!pageContext.isClientSide);
     const stream = useStreamOptional();
     return (config) => {
         if (!pageContext._headAlreadySet) {
@@ -26,7 +27,7 @@ function useConfig() {
         else {
             assert(stream);
             // <head> already sent to the browser => send DOM-manipulating scripts during HTML streaming
-            apply(config, stream);
+            apply(config, stream, pageContext);
         }
     };
 }
@@ -55,10 +56,12 @@ function setPageContextConfigViaHook(config, pageContext) {
         }
     });
 }
-function apply(config, stream) {
+function apply(config, stream, pageContext) {
     const { title } = config;
     if (title) {
-        const htmlSnippet = `<script>document.title = ${JSON.stringify(title)}</script>`;
+        // No need to escape the injected HTML — see https://github.com/vikejs/vike/blob/36201ddad5f5b527b244b24d548014ec86c204e4/packages/vike/src/server/runtime/renderPageServer/csp.ts#L45
+        const nonceAttr = pageContext.cspNonce ? ` nonce="${pageContext.cspNonce}"` : '';
+        const htmlSnippet = `<script${nonceAttr}>document.title = ${JSON.stringify(title)}</script>`;
         stream.injectToStream(htmlSnippet);
     }
 }

package/dist/hooks/useHydrated.d.ts

@@ -0,0 +1,19 @@
+export { useHydrated };
+/**
+ * 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(): boolean;

package/dist/hooks/useHydrated.js

@@ -0,0 +1,26 @@
+export { useHydrated };
+import { useSyncExternalStore } from 'react';
+// Copied from https://github.com/sergiodxa/remix-utils/blob/33e6b04a08ef5f9b65e89c0a280c12b83762ef66/src/react/use-hydrated.ts
+/**
+ * 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() {
+    return useSyncExternalStore(subscribeDummy, () => true, () => false);
+}
+function subscribeDummy() {
+    return () => { };
+}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "vike-react",
-  "version": "0.6.16",
+  "version": "0.6.18",
   "repository": "https://github.com/vikejs/vike-react",
   "type": "module",
   "exports": {
     "./usePageContext": "./dist/hooks/usePageContext.js",
     "./useData": "./dist/hooks/useData.js",
+    "./useHydrated": "./dist/hooks/useHydrated.js",
     "./useConfig": {
       "browser": "./dist/hooks/useConfig/useConfig-client.js",
       "default": "./dist/hooks/useConfig/useConfig-server.js"
@@ -32,7 +33,7 @@
   "peerDependencies": {
     "react": ">=19",
     "react-dom": ">=19",
-    "vike": ">=0.4.242"
+    "vike": ">=0.4.250"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
@@ -44,7 +45,7 @@
     "react-dom": "^19.2.1",
     "rimraf": "^5.0.5",
     "typescript": "^5.9.2",
-    "vike": "^0.4.249",
+    "vike": "^0.4.250",
     "vite": "^7.3.0"
   },
   "typesVersions": {
@@ -55,6 +56,9 @@
       "usePageContext": [
         "./dist/hooks/usePageContext.d.ts"
       ],
+      "useHydrated": [
+        "./dist/hooks/useHydrated.d.ts"
+      ],
       "useConfig": [
         "./dist/hooks/useConfig/useConfig-server.d.ts"
       ],