vike-react 0.3.6 → 0.3.8

package/dist/components/ClientOnly.d.ts

@@ -8,4 +8,4 @@ declare function ClientOnly<T>({ load, children, fallback, deps }: {
     children: (Component: React.ComponentType<T>) => ReactNode;
     fallback: ReactNode;
     deps?: Parameters<typeof useEffect>[1];
-}): React.JSX.Element;
+}): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;

package/dist/components/ClientOnly.js

@@ -1,12 +1,14 @@
 export { ClientOnly };
-import React, { Suspense, lazy, useEffect, useState } from 'react';
-function ClientOnly({ load, children, fallback, deps }) {
+import React, { lazy, useEffect, useState, startTransition } from 'react';
+function ClientOnly({ load, children, fallback, deps = [] }) {
     const [Component, setComponent] = useState(null);
     useEffect(() => {
         const loadComponent = () => {
             const Component = lazy(() => load()
                 .then((LoadedComponent) => {
-                return { default: () => children('default' in LoadedComponent ? LoadedComponent.default : LoadedComponent) };
+                return {
+                    default: () => children('default' in LoadedComponent ? LoadedComponent.default : LoadedComponent)
+                };
             })
                 .catch((error) => {
                 console.error('Component loading failed:', error);
@@ -14,7 +16,9 @@ function ClientOnly({ load, children, fallback, deps }) {
             }));
             setComponent(Component);
         };
-        loadComponent();
+        startTransition(() => {
+            loadComponent();
+        });
     }, deps);
-    return React.createElement(Suspense, { fallback: fallback }, Component ? React.createElement(Component, null) : null);
+    return Component ? React.createElement(Component, null) : fallback;
 }

package/dist/components/useData.d.ts

@@ -0,0 +1 @@
+export { useData } from '../renderer/PageContextProvider.js';

package/dist/components/useData.js

@@ -0,0 +1 @@
+export { useData } from '../renderer/PageContextProvider.js';

package/dist/renderer/+config.d.ts

@@ -58,7 +58,7 @@ declare const _default: {
     };
 };
 export default _default;
-import type { Component } from './types';
+import type { Component } from './types.d.ts';
 declare global {
     namespace VikePackages {
         interface ConfigVikeReact {

package/dist/renderer/+config.js

@@ -21,6 +21,8 @@ const toggleSsrRelatedConfig = ({ configDefinedAt, configValue }) => {
 export default {
     onRenderHtml: 'import:vike-react/renderer/onRenderHtml:onRenderHtml',
     onRenderClient: 'import:vike-react/renderer/onRenderClient:onRenderClient',
+    // TODO/next-major-release: remove pageProps (i.e. tell users to use data() instead of onBeforeRender() to fetch data)
+    // TODO/next-major-release: remove support for setting title over onBeforeRender()
     // A page can define an onBeforeRender() hook to be run on the server, which
     // can fetch data and return it as additional page context. Typically it will
     // return the page's root React component's props and additional data that can

package/dist/renderer/PageContextProvider.d.ts

@@ -1,5 +1,6 @@
 export { PageContextProvider };
 export { usePageContext };
+export { useData };
 import React from 'react';
 import type { PageContext } from 'vike/types';
 declare function PageContextProvider({ pageContext, children }: {
@@ -8,3 +9,4 @@ declare function PageContextProvider({ pageContext, children }: {
 }): React.JSX.Element;
 /** Access the pageContext from any React component */
 declare function usePageContext(): PageContext;
+declare function useData<Data>(): Data;

package/dist/renderer/PageContextProvider.js

@@ -1,5 +1,6 @@
 export { PageContextProvider };
 export { usePageContext };
+export { useData };
 import React, { useContext } from 'react';
 import { getGlobalObject } from './utils/getGlobalObject.js';
 const { Context } = getGlobalObject('PageContextProvider.ts', {
@@ -17,3 +18,7 @@ function usePageContext() {
         throw new Error('<PageContextProvider> is needed for being able to use usePageContext()');
     return pageContext;
 }
+function useData() {
+    const { data } = usePageContext();
+    return data;
+}

package/dist/renderer/getPageElement.js

@@ -2,14 +2,14 @@ export { getPageElement };
 import React from 'react';
 import { PageContextProvider } from './PageContextProvider.js';
 function getPageElement(pageContext) {
-    var _a, _b;
-    const Layout = (_a = pageContext.config.Layout) !== null && _a !== void 0 ? _a : PassThrough;
+    const Layout = pageContext.config.Layout ?? PassThrough;
     const Wrapper = 
     /* Should we implement this? Enabling users to defined a wrapper that is used across all layouts.
     pageContext.config.Wrapper ??
     */
     PassThrough;
-    const VikeReactQueryWrapper = (_b = pageContext.config.VikeReactQueryWrapper) !== null && _b !== void 0 ? _b : PassThrough;
+    const VikeReactQueryWrapper = pageContext.config.VikeReactQueryWrapper ?? PassThrough;
+    // TODO/next-major-release: remove pageProps (i.e. tell users to use data() instead of onBeforeRender() to fetch data)
     const { Page, pageProps } = pageContext;
     const page = (React.createElement(React.StrictMode, null,
         React.createElement(PageContextProvider, { pageContext: pageContext },

package/dist/renderer/getTitle.d.ts

@@ -2,6 +2,6 @@ export { getTitle };
 import type { PageContext } from 'vike/types';
 /**
  * Get the page's title if defined, either from the additional data fetched by
- * the page's onBeforeRender() hook or from the config.
+ * the page's data() and onBeforeRender() hooks or from the config.
  */
 declare function getTitle(pageContext: PageContext): null | string;

package/dist/renderer/getTitle.js

@@ -2,14 +2,19 @@ export { getTitle };
 import { isCallable } from './utils/isCallable.js';
 /**
  * Get the page's title if defined, either from the additional data fetched by
- * the page's onBeforeRender() hook or from the config.
+ * the page's data() and onBeforeRender() hooks or from the config.
  */
 function getTitle(pageContext) {
-    var _a;
+    // from data() hook
+    if (pageContext.data?.title !== undefined) {
+        return pageContext.data.title;
+    }
+    // TODO/next-major-release: remove support for setting title over onBeforeRender()
+    // from onBeforeRender() hook
     if (pageContext.title !== undefined) {
         return pageContext.title;
     }
-    const titleConfig = (_a = pageContext.configEntries.title) === null || _a === void 0 ? void 0 : _a[0];
+    const titleConfig = pageContext.configEntries.title?.[0];
     if (!titleConfig) {
         return null;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "type": "module",
   "main": "./dist/renderer/+config.js",
   "types": "./dist/renderer/+config.d.ts",
@@ -9,6 +9,7 @@
     "./renderer/onRenderHtml": "./dist/renderer/onRenderHtml.js",
     "./renderer/onRenderClient": "./dist/renderer/onRenderClient.js",
     "./usePageContext": "./dist/components/usePageContext.js",
+    "./useData": "./dist/components/useData.js",
     "./ClientOnly": "./dist/components/ClientOnly.js"
   },
   "scripts": {
@@ -20,21 +21,21 @@
   "peerDependencies": {
     "react": "18.x.x",
     "react-dom": "18.x.x",
-    "vike": "^0.4.149",
+    "vike": "^0.4.151",
     "vite": "^4.3.8"
   },
   "devDependencies": {
-    "@brillout/release-me": "^0.1.12",
-    "@types/node": "^18.17.18",
-    "@types/react": "^18.2.22",
-    "@types/react-dom": "^18.2.7",
+    "@brillout/release-me": "^0.1.13",
+    "@types/node": "^18.19.3",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^5.2.2",
-    "vike": "^0.4.149"
+    "typescript": "^5.3.3",
+    "vike": "^0.4.151"
   },
   "dependencies": {
-    "react-streaming": "^0.3.16"
+    "react-streaming": "^0.3.18"
   },
   "typesVersions": {
     "*": {
@@ -44,6 +45,9 @@
       "usePageContext": [
         "./dist/components/usePageContext.d.ts"
       ],
+      "useData": [
+        "./dist/components/useData.d.ts"
+      ],
       "renderer/onRenderHtml": [
         "./dist/renderer/onRenderHtml.d.ts"
       ],

package/dist/renderer/types.d.ts

@@ -1,15 +0,0 @@
-export type { Component };
-import type { ReactElement } from 'react';
-type Component = (props: any) => ReactElement;
-declare global {
-    namespace Vike {
-        interface PageContext {
-            Page?: Component;
-            /** Properties of the page's root React component. */
-            pageProps?: Record<string, unknown>;
-            /** &lt;title>${title}&lt;/title> - has precedence over the config */
-            title?: string;
-            userAgent?: string;
-        }
-    }
-}

package/dist/renderer/types.js

@@ -1 +0,0 @@
-export {};