vike-react 0.3.4 → 0.3.6

package/README.md

@@ -5,7 +5,7 @@
 
 # `vike-react`
 
-React integration for [Vike](https://vike.dev) (using the [V1 design](https://vike.dev/migration/v1-design)).
+React integration for [Vike](https://vike.dev).
 
 > For integrations with Vue and Solid, see the other [`vike-*` packages](https://vike.dev/vike-packages).
 

package/dist/components/ClientOnly.d.ts

@@ -0,0 +1,11 @@
+export { ClientOnly };
+import React, { useEffect } 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];
+}): React.JSX.Element;

package/dist/components/ClientOnly.js

@@ -0,0 +1,20 @@
+export { ClientOnly };
+import React, { Suspense, lazy, useEffect, useState } 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) };
+            })
+                .catch((error) => {
+                console.error('Component loading failed:', error);
+                return { default: () => React.createElement("p", null, "Error loading component.") };
+            }));
+            setComponent(Component);
+        };
+        loadComponent();
+    }, deps);
+    return React.createElement(Suspense, { fallback: fallback }, Component ? React.createElement(Component, null) : null);
+}

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

@@ -44,6 +44,17 @@ declare const _default: {
             };
             effect: ConfigEffect;
         };
+        stream: {
+            env: {
+                server: true;
+            };
+        };
+        VikeReactQueryWrapper: {
+            env: {
+                client: true;
+                server: true;
+            };
+        };
     };
 };
 export default _default;
@@ -81,6 +92,14 @@ declare global {
              *
              */
             ssr?: boolean;
+            /**
+             * Whether to stream the page's HTML. Requires Server-Side Rendering (`ssr: true`).
+             *
+             * @default false
+             *
+             */
+            stream?: boolean;
+            VikeReactQueryWrapper?: Component;
         }
     }
 }

package/dist/renderer/+config.js

@@ -52,6 +52,12 @@ export default {
         ssr: {
             env: { config: true },
             effect: toggleSsrRelatedConfig
+        },
+        stream: {
+            env: { server: true }
+        },
+        VikeReactQueryWrapper: {
+            env: { client: true, server: true }
         }
     }
 };

package/dist/renderer/getPageElement.js

@@ -2,18 +2,20 @@ export { getPageElement };
 import React from 'react';
 import { PageContextProvider } from './PageContextProvider.js';
 function getPageElement(pageContext) {
-    var _a;
+    var _a, _b;
     const Layout = (_a = pageContext.config.Layout) !== null && _a !== void 0 ? _a : 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 { Page, pageProps } = pageContext;
     const page = (React.createElement(React.StrictMode, null,
         React.createElement(PageContextProvider, { pageContext: pageContext },
-            React.createElement(Wrapper, null,
-                React.createElement(Layout, null, Page ? React.createElement(Page, { ...pageProps }) : null)))));
+            React.createElement(VikeReactQueryWrapper, { pageContext: pageContext },
+                React.createElement(Wrapper, null,
+                    React.createElement(Layout, null, Page ? React.createElement(Page, { ...pageProps }) : null))))));
     return page;
 }
 function PassThrough({ children }) {

package/dist/renderer/onRenderHtml.js

@@ -10,35 +10,40 @@ import React from 'react';
 checkVikeVersion();
 const onRenderHtml = async (pageContext) => {
     const lang = pageContext.config.lang || 'en';
-    const { favicon } = pageContext.config;
-    const faviconTag = !favicon ? '' : React.createElement("link", { rel: "icon", href: favicon });
+    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 ? '' : React.createElement("title", null, title);
-    const { description } = pageContext.config;
-    const descriptionTag = !description ? '' : React.createElement("meta", { name: "description", content: description });
+    const titleTag = !title ? '' : escapeInject `<title>${title}</title>`;
     const Head = pageContext.config.Head || (() => React.createElement(React.Fragment, null));
     const head = (React.createElement(React.StrictMode, null,
         React.createElement(PageContextProvider, { pageContext: pageContext },
             React.createElement(Head, null))));
-    const isSsrDisabled = !pageContext.Page;
-    const page = isSsrDisabled ? React.createElement(React.Fragment, null) : getPageElement(pageContext);
-    const htmlContent = (React.createElement(React.Fragment, null,
-        React.createElement("head", null,
-            React.createElement("meta", { charSet: "UTF-8" }),
-            faviconTag,
-            titleTag,
-            descriptionTag,
-            head),
-        React.createElement("body", null,
-            React.createElement("div", { id: "page-view" }, page))));
-    const streamOrString = isSsrDisabled
-        ? dangerouslySkipEscape(renderToString(htmlContent))
-        : await renderToStream(htmlContent, { userAgent: pageContext.userAgent });
+    const headHtml = dangerouslySkipEscape(renderToString(head));
+    let pageView;
+    if (!pageContext.Page) {
+        pageView = '';
+    }
+    else {
+        const page = getPageElement(pageContext);
+        pageView = !stream
+            ? dangerouslySkipEscape(renderToString(page))
+            : await renderToStream(page, { userAgent: pageContext.userAgent });
+    }
     const documentHtml = escapeInject `<!DOCTYPE html>
-  <html lang='${lang}'>
-    ${streamOrString}
-    <!-- built with https://github.com/vikejs/vike-react -->
-  </html>`;
+    <html lang='${lang}'>
+      <head>
+        <meta charset="UTF-8" />
+        ${faviconTag}
+        ${titleTag}
+        ${descriptionTag}
+        ${headHtml}
+      </head>
+      <body>
+        <div id="page-view">${pageView}</div>
+      </body>
+      <!-- built with https://github.com/vikejs/vike-react -->
+    </html>`;
     return documentHtml;
 };
 function checkVikeVersion() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "type": "module",
   "main": "./dist/renderer/+config.js",
   "types": "./dist/renderer/+config.d.ts",
@@ -8,29 +8,30 @@
     ".": "./dist/renderer/+config.js",
     "./renderer/onRenderHtml": "./dist/renderer/onRenderHtml.js",
     "./renderer/onRenderClient": "./dist/renderer/onRenderClient.js",
-    "./usePageContext": "./dist/components/usePageContext.js"
+    "./usePageContext": "./dist/components/usePageContext.js",
+    "./ClientOnly": "./dist/components/ClientOnly.js"
   },
   "scripts": {
     "dev": "tsc --watch",
     "build": "rm -rf dist/ && tsc",
-    "release": "release-me patch",
-    "release:commit": "release-me commit"
+    "release": "release-me --git-prefix vike-react --changelog-dir packages/vike-react/ patch",
+    "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.147",
+    "vike": "^0.4.149",
     "vite": "^4.3.8"
   },
   "devDependencies": {
-    "@brillout/release-me": "^0.1.9",
+    "@brillout/release-me": "^0.1.12",
     "@types/node": "^18.17.18",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2",
-    "vike": "^0.4.147"
+    "vike": "^0.4.149"
   },
   "dependencies": {
     "react-streaming": "^0.3.16"