vike-react 0.1.5 → 0.2.0-commit-af9b3c5

package/README.md

@@ -0,0 +1,13 @@
+<!-- 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) (using the
+[V1 design](https://vite-plugin-ssr.com/migration/v1-design)).
+
+> 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,47 @@ 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 {
+            /** The page's root React component */
+            Page?: Component;
+            /** 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/PageContextProvider.d.ts

@@ -1,10 +1,43 @@
 export { PageContextProvider };
 export { usePageContext };
 import React from 'react';
-import { PageContext } from './types';
+import type { PageContext } from 'vite-plugin-ssr/types';
 declare function PageContextProvider({ pageContext, children }: {
     pageContext: PageContext;
     children: React.ReactNode;
 }): JSX.Element;
 /** Access the pageContext from any React component */
-declare function usePageContext(): PageContext;
+declare function usePageContext(): (Partial<{
+    Page: any;
+    routeParams: Record<string, string>;
+    config: import("vite-plugin-ssr/dist/esm/shared/page-configs/Config/PageContextConfig.js").PageContextConfig;
+    configEntries: import("vite-plugin-ssr/dist/esm/shared/getPageFiles/getExports.js").ConfigEntries;
+    exports: Record<string, unknown>;
+    exportsAll: import("vite-plugin-ssr/dist/esm/shared/getPageFiles/getExports.js").ExportsAll;
+    urlOriginal: string;
+    is404: boolean | null;
+    isClientSideNavigation: boolean;
+    abortReason?: unknown;
+    abortStatusCode?: undefined;
+    errorWhileRendering?: unknown;
+    url: string;
+    pageExports: Record<string, unknown>;
+}> & Pick<{
+    Page: any;
+    routeParams: Record<string, string>;
+    config: import("vite-plugin-ssr/dist/esm/shared/page-configs/Config/PageContextConfig.js").PageContextConfig;
+    configEntries: import("vite-plugin-ssr/dist/esm/shared/getPageFiles/getExports.js").ConfigEntries;
+    exports: Record<string, unknown>;
+    exportsAll: import("vite-plugin-ssr/dist/esm/shared/getPageFiles/getExports.js").ExportsAll;
+    urlOriginal: string;
+    is404: boolean | null;
+    isClientSideNavigation: boolean;
+    abortReason?: unknown;
+    abortStatusCode?: undefined;
+    errorWhileRendering?: unknown;
+    url: string;
+    pageExports: Record<string, unknown>;
+}, "Page" | "pageExports" | "config" | "configEntries" | "exports" | "exportsAll" | "abortReason"> & {
+    isHydration: boolean;
+    isBackwardNavigation: boolean | null;
+} & import("vite-plugin-ssr/dist/esm/shared/addUrlComputedProps.js").PageContextUrlComputedPropsClient & Vike.PageContext) | import("vite-plugin-ssr/dist/esm/shared/types.js").PageContextServer;

package/dist/renderer/getPageElement.d.ts

@@ -1,3 +1,3 @@
 export { getPageElement };
-import type { PageContext } from './types';
+import type { PageContext } from 'vite-plugin-ssr/types';
 declare function getPageElement(pageContext: PageContext): JSX.Element;

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

@@ -1,3 +1,3 @@
 export default onRenderClient;
-import type { PageContextClient } from './types';
+import type { PageContextClient } from 'vite-plugin-ssr/types';
 declare function onRenderClient(pageContext: PageContextClient): Promise<void>;

package/dist/renderer/onRenderClient.js

@@ -6,7 +6,8 @@ let root;
 async function onRenderClient(pageContext) {
     const page = getPageElement(pageContext);
     const container = document.getElementById('page-view');
-    if (pageContext.isHydration) {
+    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;
+import type { PageContext } from 'vite-plugin-ssr/types';
+declare function onRenderHtml(pageContext: PageContext): Promise<{
+    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

@@ -1,28 +1,12 @@
-export type { PageContextServer };
-export type { PageContextClient };
-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 { 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 PageContextClient = PageContextBuiltInClient<Page> & PageContextCommon;
-type PageContext = PageContextClient | PageContextServer;
+declare global {
+    namespace Vike {
+        interface PageContext {
+            /** The page's root React component */
+            Page?: Component;
+            pageProps: Record<string, unknown>;
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.1.5",
+  "version": "0.2.0-commit-af9b3c5",
   "type": "module",
   "main": "./dist/renderer/+config.js",
   "types": "./dist/renderer/+config.d.ts",
@@ -14,22 +14,24 @@
   "scripts": {
     "dev": "tsc --watch",
     "build": "rm -rf dist/ && tsc",
-    "release": "release-me patch"
+    "release": "release-me patch",
+    "release:commit": "release-me commit"
   },
   "peerDependencies": {
     "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",
+    "@brillout/release-me": "^0.1.7",
     "@types/node": "^18.15.3",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "typescript": "^5.0.2"
+    "typescript": "^5.0.2",
+    "vite-plugin-ssr": "0.4.141-commit-25ec8c9"
   },
   "typesVersions": {
     "*": {
@@ -51,6 +53,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'