vike-react 0.1.5 → 0.2.0

package/README.md

@@ -0,0 +1,12 @@
+<!-- WARNING: keep links absolute in this file so they work on NPM too -->
+
+[<img src="https://avatars.githubusercontent.com/u/86403530?s=200&v=4" align="right" width="64" height="64">](https://vite-plugin-ssr.com)
+[![npm version](https://img.shields.io/npm/v/vike-react)](https://www.npmjs.com/package/vike-react)
+
+# `vike-react`
+
+React integration for [Vike](https://github.com/brillout/vite-plugin-ssr/issues/736).
+
+> For integrations with Vue and Solid, see the other [`vike-*` packages](https://vite-plugin-ssr.com/vike-packages).
+
+See [examples/](https://github.com/vikejs/vike-react/tree/main/examples).

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

@@ -1,25 +1,4 @@
-import type { Config } from 'vite-plugin-ssr/types';
-import type { Component } from './types';
-export type ConfigEnhanced = Config & Partial<VikeReactConfig & {
-    Page: Component;
-}>;
-export type VikeReactConfig = {
-    /** React element renderer and appended into &lt;head>&lt;/head> */
-    Head: Component;
-    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}">
-     *
-     *  @default 'en'
-     *
-     */
-    lang: string;
-};
+import type { ConfigEffect } from 'vite-plugin-ssr/types';
 declare const _default: {
     onRenderHtml: "import:vike-react/renderer/onRenderHtml";
     onRenderClient: "import:vike-react/renderer/onRenderClient";
@@ -45,6 +24,45 @@ declare const _default: {
         lang: {
             env: "server-only";
         };
+        ssr: {
+            env: "config-only";
+            effect: ConfigEffect;
+        };
     };
 };
 export default _default;
+import type { Component } from './types';
+declare global {
+    namespace VikePackages {
+        interface ConfigVikeReact {
+            /** React element rendered and appended into &lt;head>&lt;/head> */
+            Head?: Component;
+            /** A component, usually common to several pages, that wraps the root component `Page` */
+            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}">
+             *
+             *  @default 'en'
+             *
+             */
+            lang?: string;
+            /**
+             * If true, render mode is SSR or pre-rendering (aka SSG). In other words, the
+             * page's HTML will be rendered at build-time or request-time.
+             * If false, render mode is SPA. In other words, the page will only be
+             * rendered in the browser.
+             *
+             * See https://vite-plugin-ssr.com/render-modes
+             *
+             * @default true
+             *
+             */
+            ssr?: boolean;
+        }
+    }
+}

package/dist/renderer/+config.js

@@ -1,3 +1,23 @@
+// Depending on the value of `config.meta.ssr`, set other config options' `env`
+// accordingly.
+// See https://vite-plugin-ssr.com/meta#modify-existing-configurations
+const toggleSsrRelatedConfig = ({ configDefinedAt, configValue }) => {
+    if (typeof configValue !== 'boolean') {
+        throw new Error(`${configDefinedAt} should be a boolean`);
+    }
+    return {
+        meta: {
+            // When the SSR flag is false, we want to render the page only in the
+            // browser. We achieve this by then making the `Page` implementation
+            // accessible only in the client's renderer.
+            Page: {
+                env: configValue
+                    ? 'server-and-client' // default
+                    : 'client-only'
+            }
+        }
+    };
+};
 export default {
     onRenderHtml: 'import:vike-react/renderer/onRenderHtml',
     onRenderClient: 'import:vike-react/renderer/onRenderClient',
@@ -22,6 +42,10 @@ export default {
         },
         lang: {
             env: 'server-only'
+        },
+        ssr: {
+            env: 'config-only',
+            effect: toggleSsrRelatedConfig
         }
     }
 };

package/dist/renderer/getPageElement.js

@@ -2,9 +2,13 @@ export { getPageElement };
 import React from 'react';
 import { PageContextProvider } from './PageContextProvider.js';
 function getPageElement(pageContext) {
-    var _a, _b;
+    var _a;
     const Layout = (_a = pageContext.config.Layout) !== null && _a !== void 0 ? _a : PassThrough;
-    const Wrapper = (_b = pageContext.config.Wrapper) !== null && _b !== void 0 ? _b : PassThrough;
+    const Wrapper = 
+    /* Should we implement this? Enabling users to defined a wrapper that is used across all layouts.
+    pageContext.config.Wrapper ??
+    */
+    PassThrough;
     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,5 @@ export { getTitle };
 import type { ConfigEntries } from 'vite-plugin-ssr/types';
 declare function getTitle(pageContext: {
     title?: unknown;
-    config: Record<string, unknown>;
     configEntries: ConfigEntries;
 }): null | string;

package/dist/renderer/onRenderClient.js

@@ -6,7 +6,7 @@ let root;
 async function onRenderClient(pageContext) {
     const page = getPageElement(pageContext);
     const container = document.getElementById('page-view');
-    if (pageContext.isHydration) {
+    if (container.innerHTML !== '' && pageContext.isHydration) {
         root = ReactDOM.hydrateRoot(container, page);
     }
     else {

package/dist/renderer/onRenderHtml.d.ts

@@ -1,5 +1,5 @@
 export default onRenderHtml;
 import type { PageContextServer } from './types';
 declare function onRenderHtml(pageContext: PageContextServer): Promise<{
-    documentHtml: import("vite-plugin-ssr/dist/types/node/runtime/html/renderHtml.js").TemplateWrapped;
+    documentHtml: import("vite-plugin-ssr/dist/esm/node/runtime/html/renderHtml.js").TemplateWrapped;
 }>;

package/dist/renderer/onRenderHtml.js

@@ -6,8 +6,11 @@ import { getPageElement } from './getPageElement.js';
 import { PageContextProvider } from './PageContextProvider.js';
 import React from 'react';
 async function onRenderHtml(pageContext) {
-    const page = getPageElement(pageContext);
-    const pageHtml = renderToString(page);
+    let pageHtml = '';
+    if (!!pageContext.Page) {
+        const page = getPageElement(pageContext);
+        pageHtml = renderToString(page);
+    }
     const title = getTitle(pageContext);
     const titleTag = !title ? '' : escapeInject `<title>${title}</title>`;
     const { description } = pageContext.config;

package/dist/renderer/types.d.ts

@@ -4,25 +4,15 @@ export type { PageContext };
 export type { PageProps };
 export type { Page };
 export type { Component };
-import type { PageContextBuiltIn, PageContextBuiltInClientWithClientRouting as PageContextBuiltInClient } from 'vite-plugin-ssr/types';
-import type { ConfigEnhanced } from './+config';
+import type { PageContextBuiltInServer, PageContextBuiltInClientWithClientRouting as PageContextBuiltInClient } from 'vite-plugin-ssr/types';
 import type { ReactElement } from 'react';
 type Component = (props: any) => ReactElement;
 type Page = (pageProps: PageProps) => ReactElement;
 type PageProps = Record<string, unknown>;
-type WrapperComponent = ({ children }: {
-    children: any;
-}) => ReactElement;
 export type PageContextCommon = {
     Page: Page;
     pageProps?: PageProps;
-    config: {
-        Layout?: WrapperComponent;
-        Wrapper?: WrapperComponent;
-    };
-};
-type PageContextServer = PageContextBuiltIn<Page> & PageContextCommon & {
-    config: Partial<ConfigEnhanced>;
 };
+type PageContextServer = PageContextBuiltInServer<Page> & PageContextCommon;
 type PageContextClient = PageContextBuiltInClient<Page> & PageContextCommon;
 type PageContext = PageContextClient | PageContextServer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/renderer/+config.js",
   "types": "./dist/renderer/+config.d.ts",
@@ -20,7 +20,7 @@
     "react": "18.x.x",
     "react-dom": "18.x.x",
     "vite": "^4.3.8",
-    "vite-plugin-ssr": "^0.4.130"
+    "vite-plugin-ssr": "^0.4.141"
   },
   "devDependencies": {
     "@brillout/release-me": "^0.1.3",
@@ -51,6 +51,6 @@
     "dist/",
     "types.d.ts"
   ],
-  "repository": "github:brillout/vike-react",
+  "repository": "github:vikejs/vike-react",
   "license": "MIT"
 }

package/types.d.ts

@@ -1,5 +0,0 @@
-export type {
-  PageContextBuiltIn,
-  PageContextBuiltInClientWithClientRouting as PageContextBuiltInClient
-} from 'vite-plugin-ssr/types'
-export type { ConfigEnhanced as Config } from './renderer/+config'