vike-react 0.0.0 → 0.1.1

package/dist/components/usePageContext.d.ts

@@ -0,0 +1 @@
+export { usePageContext } from '../renderer/PageContextProvider';

package/dist/components/usePageContext.js

@@ -0,0 +1 @@
+export { usePageContext } from '../renderer/PageContextProvider';

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

@@ -0,0 +1,50 @@
+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;
+};
+declare const _default: {
+    onRenderHtmlPath: string;
+    onRenderClientPath: string;
+    passToClient: string[];
+    clientRouting: true;
+    hydrationCanBeAborted: true;
+    meta: {
+        Head: {
+            env: "server-only";
+        };
+        Layout: {
+            env: "server-and-client";
+        };
+        title: {
+            env: "server-and-client";
+        };
+        description: {
+            env: "server-only";
+        };
+        favicon: {
+            env: "server-only";
+        };
+        lang: {
+            env: "server-only";
+        };
+    };
+};
+export default _default;

package/dist/renderer/+config.js

@@ -0,0 +1,27 @@
+export default {
+    onRenderHtmlPath: 'vike-react/renderer/onRenderHtml',
+    onRenderClientPath: 'vike-react/renderer/onRenderClient',
+    passToClient: ['pageProps', 'title'],
+    clientRouting: true,
+    hydrationCanBeAborted: true,
+    meta: {
+        Head: {
+            env: 'server-only'
+        },
+        Layout: {
+            env: 'server-and-client'
+        },
+        title: {
+            env: 'server-and-client'
+        },
+        description: {
+            env: 'server-only'
+        },
+        favicon: {
+            env: 'server-only'
+        },
+        lang: {
+            env: 'server-only'
+        }
+    }
+};

package/dist/renderer/PageContextProvider.d.ts

@@ -0,0 +1,10 @@
+export { PageContextProvider };
+export { usePageContext };
+import React from 'react';
+import { PageContext } from './types';
+declare function PageContextProvider({ pageContext, children }: {
+    pageContext: PageContext;
+    children: React.ReactNode;
+}): JSX.Element;
+/** Access the pageContext from any React component */
+declare function usePageContext(): PageContext;

package/dist/renderer/PageContextProvider.js

@@ -0,0 +1,19 @@
+export { PageContextProvider };
+export { usePageContext };
+import React, { useContext } from 'react';
+import { getGlobalObject } from './utils/getGlobalObject.js';
+const { Context } = getGlobalObject('PageContextProvider.ts', {
+    Context: React.createContext(undefined)
+});
+function PageContextProvider({ pageContext, children }) {
+    if (!pageContext)
+        throw new Error('Argument pageContext missing');
+    return React.createElement(Context.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()');
+    return pageContext;
+}

package/dist/renderer/getPageElement.d.ts

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

package/dist/renderer/getPageElement.js

@@ -0,0 +1,18 @@
+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 Wrapper = (_b = pageContext.config.Wrapper) !== 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,
+                    React.createElement(Page, { ...pageProps }))))));
+    return page;
+}
+function PassThrough({ children }) {
+    return React.createElement(React.Fragment, null, children);
+}

package/dist/renderer/getTitle.d.ts

@@ -0,0 +1,7 @@
+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/getTitle.js

@@ -0,0 +1,33 @@
+export { getTitle };
+import { isCallable } from './utils/isCallable.js';
+function getTitle(pageContext) {
+    var _a;
+    if (pageContext.title) {
+        if (typeof pageContext.title !== 'string') {
+            throw new Error('pageContext.title should be a string');
+        }
+        return pageContext.title;
+    }
+    else {
+        const titleConfig = (_a = pageContext.configEntries.title) === null || _a === void 0 ? void 0 : _a[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');
+    }
+}

package/dist/renderer/onRenderClient.d.ts

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

package/dist/renderer/onRenderClient.js

@@ -0,0 +1,22 @@
+export default onRenderClient;
+import ReactDOM from 'react-dom/client';
+import { getTitle } from './getTitle.js';
+import { getPageElement } from './getPageElement.js';
+let root;
+async function onRenderClient(pageContext) {
+    const page = getPageElement(pageContext);
+    const container = document.getElementById('page-view');
+    if (pageContext.isHydration) {
+        root = ReactDOM.hydrateRoot(container, page);
+    }
+    else {
+        if (!root) {
+            root = ReactDOM.createRoot(container);
+        }
+        root.render(page);
+    }
+    const title = getTitle(pageContext);
+    if (title !== null) {
+        document.title = title;
+    }
+}

package/dist/renderer/onRenderHtml.d.ts

@@ -0,0 +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;
+}>;

package/dist/renderer/onRenderHtml.js

@@ -0,0 +1,39 @@
+export default onRenderHtml;
+import { renderToString } from 'react-dom/server';
+import { escapeInject, dangerouslySkipEscape } from 'vite-plugin-ssr/server';
+import { getTitle } from './getTitle.js';
+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);
+    const title = getTitle(pageContext);
+    const titleTag = !title ? '' : escapeInject `<title>${title}</title>`;
+    const { description } = pageContext.config;
+    const descriptionTag = !description ? '' : escapeInject `<meta name="description" content="${description}" />`;
+    const { favicon } = pageContext.config;
+    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 },
+            React.createElement(Head, null))));
+    const headHtml = renderToString(head);
+    const lang = pageContext.config.lang || 'en';
+    const documentHtml = escapeInject `<!DOCTYPE html>
+    <html lang='${lang}'>
+      <head>
+        <meta charset="UTF-8" />
+        ${faviconTag}
+        ${titleTag}
+        ${descriptionTag}
+        ${dangerouslySkipEscape(headHtml)}
+      </head>
+      <body>
+        <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
+      </body>
+    </html>`;
+    return {
+        documentHtml
+    };
+}

package/dist/renderer/types.d.ts

@@ -0,0 +1,28 @@
+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;

package/dist/renderer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/renderer/utils/getGlobalObject.d.ts

@@ -0,0 +1,4 @@
+export declare function getGlobalObject<T extends Record<string, unknown> = never>(key: `${string}.ts`, defaultValue: T): T;
+declare global {
+    var __vite_plugin_ssr: undefined | Record<string, Record<string, unknown>>;
+}

package/dist/renderer/utils/getGlobalObject.js

@@ -0,0 +1,7 @@
+export function getGlobalObject(
+// We use the filename as key; each `getGlobalObject()` call should live in a unique filename.
+key, defaultValue) {
+    const allGlobalObjects = (globalThis.__vite_plugin_ssr = globalThis.__vite_plugin_ssr || {});
+    const globalObject = (allGlobalObjects[key] = allGlobalObjects[key] || defaultValue);
+    return globalObject;
+}

package/dist/renderer/utils/isCallable.d.ts

@@ -0,0 +1 @@
+export declare function isCallable<T extends (...args: unknown[]) => unknown>(thing: T | unknown): thing is T;

package/dist/renderer/utils/isCallable.js

@@ -0,0 +1,3 @@
+export function isCallable(thing) {
+    return thing instanceof Function || typeof thing === 'function';
+}

package/package.json

@@ -1,4 +1,56 @@
 {
   "name": "vike-react",
-  "version": "0.0.0"
+  "version": "0.1.1",
+  "type": "module",
+  "main": "./dist/renderer/+config.js",
+  "types": "./dist/renderer/_config.d.ts",
+  "exports": {
+    ".": "./dist/renderer/+config.js",
+    "./renderer/onRenderHtml": "./dist/renderer/onRenderHtml.js",
+    "./renderer/onRenderClient": "./dist/renderer/onRenderClient.js",
+    "./usePageContext": "./dist/components/usePageContext.js"
+  },
+  "dependencies": {},
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "rm -rf dist/ && tsc",
+    "release": "release-me patch"
+  },
+  "peerDependencies": {
+    "react": "18.x.x",
+    "react-dom": "18.x.x",
+    "vite": "^4.3.8",
+    "vite-plugin-ssr": "^0.4.127"
+  },
+  "devDependencies": {
+    "@brillout/release-me": "^0.1.3",
+    "@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"
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/renderer/+config.d.ts"
+      ],
+      "usePageContext": [
+        "./dist/components/usePageContext.d.ts"
+      ],
+      "renderer/onRenderHtml": [
+        "./dist/renderer/onRenderHtml.d.ts"
+      ],
+      "renderer/onRenderClient": [
+        "./dist/renderer/onRenderClient.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist/",
+    "types.d.ts"
+  ],
+  "repository": "github:brillout/vike-react",
+  "license": "MIT"
 }

package/types.d.ts

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

package/readme.md

@@ -1,3 +0,0 @@
-This is work in progress, stay tuned...
-
-If I didn't publish anything in a while and you want this package, then reach out and I'll give it away.