npm - vike-react - Versions diffs - 0.3.8 → 0.4.0 - Mend

vike-react 0.3.8 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/README.md +2 -3
package/dist/renderer/+config.d.ts +9 -8
package/dist/renderer/+config.js +10 -15
package/dist/renderer/PageContextProvider.js +12 -8
package/dist/renderer/getHeadSetting.d.ts +3 -0
package/dist/renderer/getHeadSetting.js +22 -0
package/dist/renderer/getPageElement.js +3 -8
package/dist/renderer/onRenderClient.d.ts +2 -2
package/dist/renderer/onRenderClient.js +31 -11
package/dist/renderer/onRenderHtml.js +8 -10
package/dist/renderer/utils/assert.d.ts +1 -0
package/dist/renderer/utils/assert.js +5 -0
package/package.json +8 -7
package/dist/renderer/getTitle.d.ts +0 -7
package/dist/renderer/getTitle.js +0 -37

package/README.md CHANGED Viewed

@@ -7,6 +7,5 @@
 React integration for [Vike](https://vike.dev).
-> For integrations with Vue and Solid, see the other [`vike-*` packages](https://vike.dev/vike-packages).
-See [examples/](https://github.com/vikejs/vike-react/tree/main/examples).
+- [Examples](https://github.com/vikejs/vike-react/tree/main/examples)
+- [Changelog](https://github.com/vikejs/vike-react/blob/main/packages/vike-react/CHANGELOG.md)

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

@@ -2,7 +2,6 @@ import type { ConfigEffect } from 'vike/types';
 declare const _default: {
     onRenderHtml: "import:vike-react/renderer/onRenderHtml:onRenderHtml";
     onRenderClient: "import:vike-react/renderer/onRenderClient:onRenderClient";
-    passToClient: string[];
     clientRouting: true;
     hydrationCanBeAborted: true;
     meta: {
@@ -23,19 +22,16 @@ declare const _default: {
                 client: true;
             };
         };
-        description: {
-            env: {
-                server: true;
-            };
-        };
         favicon: {
             env: {
                 server: true;
+                client: true;
             };
         };
         lang: {
             env: {
                 server: true;
+                client: true;
             };
         };
         ssr: {
@@ -55,6 +51,12 @@ declare const _default: {
                 server: true;
             };
         };
+        Wrapper: {
+            env: {
+                client: true;
+                server: true;
+            };
+        };
     };
 };
 export default _default;
@@ -70,8 +72,6 @@ declare global {
             Layout?: Component;
             /** &lt;title>${title}&lt;/title> */
             title?: string;
-            /** &lt;meta name="description" content="${description}" /> */
-            description?: string;
             /** &lt;link rel="icon" href="${favicon}" /> */
             favicon?: string;
             /** &lt;html lang="${lang}">
@@ -100,6 +100,7 @@ declare global {
              */
             stream?: boolean;
             VikeReactQueryWrapper?: Component;
+            Wrapper?: Component;
         }
     }
 }

package/dist/renderer/+config.js CHANGED Viewed

@@ -1,6 +1,6 @@
 // Depending on the value of `config.meta.ssr`, set other config options' `env`
 // accordingly.
-// See https://vike.dev/meta#modify-existing-configurations
+// See https://vike.dev/meta#:~:text=Modifying%20the%20environment%20of%20existing%20hooks
 const toggleSsrRelatedConfig = ({ configDefinedAt, configValue }) => {
     if (typeof configValue !== 'boolean') {
         throw new Error(`${configDefinedAt} should be a boolean`);
@@ -19,19 +19,14 @@ const toggleSsrRelatedConfig = ({ configDefinedAt, configValue }) => {
     };
 };
 export default {
+    // https://vike.dev/onRenderHtml
     onRenderHtml: 'import:vike-react/renderer/onRenderHtml:onRenderHtml',
+    // https://vike.dev/onRenderClient
     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'],
+    // https://vike.dev/clientRouting
     clientRouting: true,
     hydrationCanBeAborted: true,
+    // https://vike.dev/meta
     meta: {
         Head: {
             env: { server: true }
@@ -42,14 +37,11 @@ export default {
         title: {
             env: { server: true, client: true }
         },
-        description: {
-            env: { server: true }
-        },
         favicon: {
-            env: { server: true }
+            env: { server: true, client: true }
         },
         lang: {
-            env: { server: true }
+            env: { server: true, client: true }
         },
         ssr: {
             env: { config: true },
@@ -60,6 +52,9 @@ export default {
         },
         VikeReactQueryWrapper: {
             env: { client: true, server: true }
+        },
+        Wrapper: {
+            env: { client: true, server: true }
         }
     }
 };

package/dist/renderer/PageContextProvider.js CHANGED Viewed

@@ -3,19 +3,23 @@ export { usePageContext };
 export { useData };
 import React, { useContext } from 'react';
 import { getGlobalObject } from './utils/getGlobalObject.js';
-const { Context } = getGlobalObject('PageContextProvider.ts', {
-    Context: React.createContext(undefined)
+import { assert } from './utils/assert.js';
+const globalObject = getGlobalObject('PageContextProvider.ts', {
+    reactContext: React.createContext(undefined)
 });
 function PageContextProvider({ pageContext, children }) {
-    if (!pageContext)
-        throw new Error('Argument pageContext missing');
-    return React.createElement(Context.Provider, { value: pageContext }, children);
+    assert(pageContext);
+    const { reactContext } = globalObject;
+    return React.createElement(reactContext.Provider, { value: pageContext }, children);
 }
 /** Access the pageContext from any React component */
 function usePageContext() {
-    const pageContext = useContext(Context);
-    if (!pageContext)
-        throw new Error('<PageContextProvider> is needed for being able to use usePageContext()');
+    const { reactContext } = globalObject;
+    const pageContext = useContext(reactContext);
+    /* React throws an error upon wrong hook usage, so I guess a nice error message isn't needed? And I guess we can therefore assume and assert pageContext to have been provided? Let's see if users report back an assert() failure.
+    if (!pageContext) throw new Error('<PageContextProvider> is needed for being able to use usePageContext()')
+    */
+    assert(pageContext);
     return pageContext;
 }
 function useData() {

package/dist/renderer/getHeadSetting.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { getHeadSetting };
+import type { PageContext } from 'vike/types';
+declare function getHeadSetting(headSetting: 'title' | 'favicon' | 'lang', pageContext: PageContext): undefined | null | string;

package/dist/renderer/getHeadSetting.js ADDED Viewed

@@ -0,0 +1,22 @@
+export { getHeadSetting };
+import { isCallable } from './utils/isCallable.js';
+function getHeadSetting(headSetting, pageContext) {
+    const config = pageContext.configEntries[headSetting]?.[0];
+    if (!config)
+        return undefined;
+    const val = config.configValue;
+    if (typeof val === 'string')
+        return val;
+    if (!val)
+        return null;
+    if (isCallable(val)) {
+        const valStr = val(pageContext);
+        if (typeof valStr !== 'string') {
+            throw new Error(config.configDefinedAt + ' should return a string');
+        }
+        return valStr;
+    }
+    else {
+        throw new Error(config.configDefinedAt + ' should be a string or a function returning a string');
+    }
+}

package/dist/renderer/getPageElement.js CHANGED Viewed

@@ -3,19 +3,14 @@ import React from 'react';
 import { PageContextProvider } from './PageContextProvider.js';
 function getPageElement(pageContext) {
     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 Wrapper = pageContext.config.Wrapper ?? 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 } = pageContext;
     const page = (React.createElement(React.StrictMode, null,
         React.createElement(PageContextProvider, { pageContext: pageContext },
             React.createElement(VikeReactQueryWrapper, { pageContext: pageContext },
                 React.createElement(Wrapper, null,
-                    React.createElement(Layout, null, Page ? React.createElement(Page, { ...pageProps }) : null))))));
+                    React.createElement(Layout, null, Page ? React.createElement(Page, null) : null))))));
     return page;
 }
 function PassThrough({ children }) {

package/dist/renderer/onRenderClient.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 export { onRenderClient };
-import type { OnRenderClientAsync } from 'vike/types';
-declare const onRenderClient: OnRenderClientAsync;
+import type { OnRenderClientSync } from 'vike/types';
+declare const onRenderClient: OnRenderClientSync;

package/dist/renderer/onRenderClient.js CHANGED Viewed

@@ -1,30 +1,50 @@
 // https://vike.dev/onRenderClient
 export { onRenderClient };
 import ReactDOM from 'react-dom/client';
-import { getTitle } from './getTitle.js';
+import { getHeadSetting } from './getHeadSetting.js';
 import { getPageElement } from './getPageElement.js';
 let root;
-const onRenderClient = async (pageContext) => {
+const onRenderClient = (pageContext) => {
     const page = getPageElement(pageContext);
     const container = document.getElementById('page-view');
     if (container.innerHTML !== '' && pageContext.isHydration) {
-        // Hydration
+        // First render (hydration)
         root = ReactDOM.hydrateRoot(container, page);
     }
     else {
         if (!root) {
-            // First rendering
+            // First render (not hydration)
             root = ReactDOM.createRoot(container);
         }
         else {
-            // Client routing
-            // See https://vike.dev/server-routing-vs-client-routing
-            // Get the page's `title` config value, which may be different from the
-            // previous page. It can even be null, in which case we should unset the
-            // document title.
-            const title = getTitle(pageContext);
-            document.title = title || '';
+            // Client-side navigation
+            const title = getHeadSetting('title', pageContext) || '';
+            const lang = getHeadSetting('lang', pageContext) || 'en';
+            const favicon = getHeadSetting('favicon', pageContext);
+            // We skip if the value is undefined because we shouldn't remove values set in HTML (by the Head setting).
+            //  - This also means that previous values will leak: upon client-side navigation, the title set by the previous page won't be removed if the next page doesn't override it. But that's okay because usually pages always have a favicon and title, which means that previous values are always overriden. Also, as a workaround, the user can set the value to `null` to ensure that previous values are overriden.
+            if (title !== undefined)
+                document.title = title;
+            if (lang !== undefined)
+                document.documentElement.lang = lang;
+            if (favicon !== undefined)
+                setFavicon(favicon);
         }
         root.render(page);
     }
 };
+// https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically/260876#260876
+function setFavicon(faviconUrl) {
+    let link = document.querySelector("link[rel~='icon']");
+    if (!faviconUrl) {
+        if (link)
+            document.head.removeChild(link);
+        return;
+    }
+    if (!link) {
+        link = document.createElement('link');
+        link.rel = 'icon';
+        document.head.appendChild(link);
+    }
+    link.href = faviconUrl;
+}

package/dist/renderer/onRenderHtml.js CHANGED Viewed

@@ -3,18 +3,17 @@ export { onRenderHtml };
 import { renderToString } from 'react-dom/server';
 import { renderToStream } from 'react-streaming/server';
 import { escapeInject, dangerouslySkipEscape, version } from 'vike/server';
-import { getTitle } from './getTitle.js';
+import { getHeadSetting } from './getHeadSetting.js';
 import { getPageElement } from './getPageElement.js';
 import { PageContextProvider } from './PageContextProvider.js';
 import React from 'react';
 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 title = getHeadSetting('title', pageContext);
+    const favicon = getHeadSetting('favicon', pageContext);
+    const lang = getHeadSetting('lang', pageContext) || 'en';
     const titleTag = !title ? '' : escapeInject `<title>${title}</title>`;
+    const faviconTag = !favicon ? '' : escapeInject `<link rel="icon" href="${favicon}" />`;
     const Head = pageContext.config.Head || (() => React.createElement(React.Fragment, null));
     const head = (React.createElement(React.StrictMode, null,
         React.createElement(PageContextProvider, { pageContext: pageContext },
@@ -26,7 +25,7 @@ const onRenderHtml = async (pageContext) => {
     }
     else {
         const page = getPageElement(pageContext);
-        pageView = !stream
+        pageView = !pageContext.config.stream
             ? dangerouslySkipEscape(renderToString(page))
             : await renderToStream(page, { userAgent: pageContext.userAgent });
     }
@@ -34,10 +33,9 @@ const onRenderHtml = async (pageContext) => {
     <html lang='${lang}'>
       <head>
         <meta charset="UTF-8" />
-        ${faviconTag}
         ${titleTag}
-        ${descriptionTag}
         ${headHtml}
+        ${faviconTag}
       </head>
       <body>
         <div id="page-view">${pageView}</div>
@@ -56,5 +54,5 @@ function checkVikeVersion() {
         if (versionParts[2] >= 147)
             return;
     }
-    throw new Error('Update Vike to its latest version (or vike@0.4.147 and any version above)');
+    throw new Error('Update Vike to 0.4.147 or above');
 }

package/dist/renderer/utils/assert.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function assert(condition: unknown): asserts condition;

package/dist/renderer/utils/assert.js ADDED Viewed

@@ -0,0 +1,5 @@
+export function assert(condition) {
+    if (condition)
+        return;
+    throw new Error('You stumbled upon a vike-react bug. Go to https://github.com/vikejs/vike-react/issues/new and copy-paste this error. A maintainer will fix the bug (usually under 24 hours).');
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "type": "module",
   "main": "./dist/renderer/+config.js",
   "types": "./dist/renderer/+config.d.ts",
@@ -16,26 +16,27 @@
     "dev": "tsc --watch",
     "build": "rm -rf dist/ && tsc",
     "release": "release-me --git-prefix vike-react --changelog-dir packages/vike-react/ patch",
+    "release:minor": "release-me --git-prefix vike-react --changelog-dir packages/vike-react/ minor",
     "release:commit": "release-me --git-prefix vike-react --changelog-dir packages/vike-react/ commit"
   },
   "peerDependencies": {
     "react": "18.x.x",
     "react-dom": "18.x.x",
     "vike": "^0.4.151",
-    "vite": "^4.3.8"
+    "vite": "^4.3.8 || ^5.0.10"
   },
   "devDependencies": {
-    "@brillout/release-me": "^0.1.13",
-    "@types/node": "^18.19.3",
-    "@types/react": "^18.2.45",
+    "@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.3.3",
-    "vike": "^0.4.151"
+    "vike": "^0.4.159"
   },
   "dependencies": {
-    "react-streaming": "^0.3.18"
+    "react-streaming": "^0.3.19"
   },
   "typesVersions": {
     "*": {

package/dist/renderer/getTitle.d.ts DELETED Viewed

@@ -1,7 +0,0 @@
-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 data() and onBeforeRender() hooks or from the config.
- */
-declare function getTitle(pageContext: PageContext): null | string;

package/dist/renderer/getTitle.js DELETED Viewed

@@ -1,37 +0,0 @@
-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 data() and onBeforeRender() hooks or from the config.
- */
-function getTitle(pageContext) {
-    // 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 = pageContext.configEntries.title?.[0];
-    if (!titleConfig) {
-        return null;
-    }
-    const title = titleConfig.configValue;
-    if (typeof title === 'string') {
-        return title;
-    }
-    if (!title) {
-        return null;
-    }
-    const { configDefinedAt } = titleConfig;
-    if (isCallable(title)) {
-        const val = title(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');
-}