vike-react 0.3.7 → 0.3.9

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

@@ -36,6 +36,7 @@ declare const _default: {
         lang: {
             env: {
                 server: true;
+                client: true;
             };
         };
         ssr: {
@@ -58,7 +59,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,13 +21,15 @@ 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
     // be used by the renderers.
     // It is a cumulative config option, so a web app using vike-react can extend
     // this list.
-    passToClient: ['pageProps', 'title'],
+    passToClient: ['pageProps', 'title', 'lang'],
     clientRouting: true,
     hydrationCanBeAborted: true,
     meta: {
@@ -47,7 +49,7 @@ export default {
             env: { server: true }
         },
         lang: {
-            env: { server: true }
+            env: { server: true, client: true }
         },
         ssr: {
             env: { config: true },

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/getLang.d.ts

@@ -0,0 +1,7 @@
+export { getLang };
+import type { PageContext } from 'vike/types';
+/**
+ * Get the page's lang if defined, either from the config, the additional data fetched by
+ * the page's data() and onBeforeRender() hooks or from other hooks.
+ */
+declare function getLang(pageContext: PageContext): null | string;

package/dist/renderer/getLang.js

@@ -0,0 +1,32 @@
+export { getLang };
+import { isCallable } from './utils/isCallable.js';
+/**
+ * Get the page's lang if defined, either from the config, the additional data fetched by
+ * the page's data() and onBeforeRender() hooks or from other hooks.
+ */
+function getLang(pageContext) {
+    // from onBeforeRoute() hook & other hooks, e.g. onPrerenderStart() hook
+    if (pageContext.lang !== undefined) {
+        return pageContext.lang;
+    }
+    const langConfig = pageContext.configEntries.lang?.[0];
+    if (!langConfig) {
+        return null;
+    }
+    const lang = langConfig.configValue;
+    if (typeof lang === 'string') {
+        return lang;
+    }
+    if (!lang) {
+        return null;
+    }
+    const { configDefinedAt } = langConfig;
+    if (isCallable(lang)) {
+        const val = lang(pageContext);
+        if (typeof val !== 'string') {
+            throw new Error(configDefinedAt + ' should return a string');
+        }
+        return val;
+    }
+    throw new Error(configDefinedAt + ' should be a string or a function returning a string');
+}

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/dist/renderer/onRenderClient.js

@@ -3,6 +3,7 @@ export { onRenderClient };
 import ReactDOM from 'react-dom/client';
 import { getTitle } from './getTitle.js';
 import { getPageElement } from './getPageElement.js';
+import { getLang } from './getLang.js';
 let root;
 const onRenderClient = async (pageContext) => {
     const page = getPageElement(pageContext);
@@ -23,7 +24,9 @@ const onRenderClient = async (pageContext) => {
             // previous page. It can even be null, in which case we should unset the
             // document title.
             const title = getTitle(pageContext);
+            const lang = getLang(pageContext) || 'en';
             document.title = title || '';
+            document.documentElement.lang = lang;
         }
         root.render(page);
     }

package/dist/renderer/onRenderHtml.js

@@ -7,14 +7,15 @@ import { getTitle } from './getTitle.js';
 import { getPageElement } from './getPageElement.js';
 import { PageContextProvider } from './PageContextProvider.js';
 import React from 'react';
+import { getLang } from './getLang.js';
 checkVikeVersion();
 const onRenderHtml = async (pageContext) => {
-    const lang = pageContext.config.lang || 'en';
     const { stream, favicon, description } = pageContext.config;
     const faviconTag = !favicon ? '' : escapeInject `<link rel="icon" href="${favicon}" />`;
     const descriptionTag = !description ? '' : escapeInject `<meta name="description" content="${description}" />`;
     const title = getTitle(pageContext);
     const titleTag = !title ? '' : escapeInject `<title>${title}</title>`;
+    const lang = getLang(pageContext) || 'en';
     const Head = pageContext.config.Head || (() => React.createElement(React.Fragment, null));
     const head = (React.createElement(React.StrictMode, null,
         React.createElement(PageContextProvider, { pageContext: pageContext },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "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",
-    "vite": "^4.3.8"
+    "vike": "^0.4.151",
+    "vite": "^4.3.8 || ^5.0.10"
   },
   "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.14",
+    "@types/node": "^20.11.4",
+    "@types/react": "^18.2.48",
+    "@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.156"
   },
   "dependencies": {
-    "react-streaming": "^0.3.16"
+    "react-streaming": "^0.3.19"
   },
   "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 {};