vike-react 0.1.6 → 0.2.0-commit-af9b3c5

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 (14) hide show
  1. package/README.md +13 -0
  2. package/dist/renderer/+config.d.ts +42 -20
  3. package/dist/renderer/+config.js +24 -0
  4. package/dist/renderer/PageContextProvider.d.ts +35 -2
  5. package/dist/renderer/getPageElement.d.ts +1 -1
  6. package/dist/renderer/getPageElement.js +6 -2
  7. package/dist/renderer/getTitle.d.ts +0 -1
  8. package/dist/renderer/onRenderClient.d.ts +1 -1
  9. package/dist/renderer/onRenderClient.js +2 -1
  10. package/dist/renderer/onRenderHtml.d.ts +3 -3
  11. package/dist/renderer/onRenderHtml.js +5 -2
  12. package/dist/renderer/types.d.ts +9 -25
  13. package/package.json +8 -6
  14. package/types.d.ts +0 -5
package/README.md ADDED
@@ -0,0 +1,13 @@
1
+ <!-- WARNING: keep links absolute in this file so they work on NPM too -->
2
+
3
+ [<img src="https://avatars.githubusercontent.com/u/86403530?s=200&v=4" align="right" width="64" height="64">](https://vite-plugin-ssr.com)
4
+ [![npm version](https://img.shields.io/npm/v/vike-react)](https://www.npmjs.com/package/vike-react)
5
+
6
+ # `vike-react`
7
+
8
+ React integration for [Vike](https://github.com/brillout/vite-plugin-ssr/issues/736) (using the
9
+ [V1 design](https://vite-plugin-ssr.com/migration/v1-design)).
10
+
11
+ > For integrations with Vue and Solid, see the other [`vike-*` packages](https://vite-plugin-ssr.com/vike-packages).
12
+
13
+ See [examples/](https://github.com/vikejs/vike-react/tree/main/examples).
package/dist/renderer/+config.d.ts CHANGED
@@ -1,23 +1,4 @@
1
- import type { Config as ConfigCore } from 'vite-plugin-ssr/types';
2
- import type { Component } from './types';
3
- export type Config = ConfigCore & {
4
- /** React element renderer and appended into &lt;head>&lt;/head> */
5
- Head?: Component;
6
- Layout?: Component;
7
- /** &lt;title>${title}&lt;/title> */
8
- title?: string;
9
- /** &lt;meta name="description" content="${description}" /> */
10
- description?: string;
11
- /** &lt;link rel="icon" href="${favicon}" /> */
12
- favicon?: string;
13
- /** &lt;html lang="${lang}">
14
- *
15
- * @default 'en'
16
- *
17
- */
18
- lang?: string;
19
- Page?: Component;
20
- };
1
+ import type { ConfigEffect } from 'vite-plugin-ssr/types';
21
2
  declare const _default: {
22
3
  onRenderHtml: "import:vike-react/renderer/onRenderHtml";
23
4
  onRenderClient: "import:vike-react/renderer/onRenderClient";
@@ -43,6 +24,47 @@ declare const _default: {
43
24
  lang: {
44
25
  env: "server-only";
45
26
  };
27
+ ssr: {
28
+ env: "config-only";
29
+ effect: ConfigEffect;
30
+ };
46
31
  };
47
32
  };
48
33
  export default _default;
34
+ import type { Component } from './types';
35
+ declare global {
36
+ namespace VikePackages {
37
+ interface ConfigVikeReact {
38
+ /** The page's root React component */
39
+ Page?: Component;
40
+ /** React element rendered and appended into &lt;head>&lt;/head> */
41
+ Head?: Component;
42
+ /** A component, usually common to several pages, that wraps the root component `Page` */
43
+ Layout?: Component;
44
+ /** &lt;title>${title}&lt;/title> */
45
+ title?: string;
46
+ /** &lt;meta name="description" content="${description}" /> */
47
+ description?: string;
48
+ /** &lt;link rel="icon" href="${favicon}" /> */
49
+ favicon?: string;
50
+ /** &lt;html lang="${lang}">
51
+ *
52
+ * @default 'en'
53
+ *
54
+ */
55
+ lang?: string;
56
+ /**
57
+ * If true, render mode is SSR or pre-rendering (aka SSG). In other words, the
58
+ * page's HTML will be rendered at build-time or request-time.
59
+ * If false, render mode is SPA. In other words, the page will only be
60
+ * rendered in the browser.
61
+ *
62
+ * See https://vite-plugin-ssr.com/render-modes
63
+ *
64
+ * @default true
65
+ *
66
+ */
67
+ ssr?: boolean;
68
+ }
69
+ }
70
+ }
package/dist/renderer/+config.js CHANGED
@@ -1,3 +1,23 @@
1
+ // Depending on the value of `config.meta.ssr`, set other config options' `env`
2
+ // accordingly.
3
+ // See https://vite-plugin-ssr.com/meta#modify-existing-configurations
4
+ const toggleSsrRelatedConfig = ({ configDefinedAt, configValue }) => {
5
+ if (typeof configValue !== 'boolean') {
6
+ throw new Error(`${configDefinedAt} should be a boolean`);
7
+ }
8
+ return {
9
+ meta: {
10
+ // When the SSR flag is false, we want to render the page only in the
11
+ // browser. We achieve this by then making the `Page` implementation
12
+ // accessible only in the client's renderer.
13
+ Page: {
14
+ env: configValue
15
+ ? 'server-and-client' // default
16
+ : 'client-only'
17
+ }
18
+ }
19
+ };
20
+ };
1
21
  export default {
2
22
  onRenderHtml: 'import:vike-react/renderer/onRenderHtml',
3
23
  onRenderClient: 'import:vike-react/renderer/onRenderClient',
@@ -22,6 +42,10 @@ export default {
22
42
  },
23
43
  lang: {
24
44
  env: 'server-only'
45
+ },
46
+ ssr: {
47
+ env: 'config-only',
48
+ effect: toggleSsrRelatedConfig
25
49
  }
26
50
  }
27
51
  };
package/dist/renderer/PageContextProvider.d.ts CHANGED
@@ -1,10 +1,43 @@
1
1
  export { PageContextProvider };
2
2
  export { usePageContext };
3
3
  import React from 'react';
4
- import { PageContext } from './types';
4
+ import type { PageContext } from 'vite-plugin-ssr/types';
5
5
  declare function PageContextProvider({ pageContext, children }: {
6
6
  pageContext: PageContext;
7
7
  children: React.ReactNode;
8
8
  }): JSX.Element;
9
9
  /** Access the pageContext from any React component */
10
- declare function usePageContext(): PageContext;
10
+ declare function usePageContext(): (Partial<{
11
+ Page: any;
12
+ routeParams: Record<string, string>;
13
+ config: import("vite-plugin-ssr/dist/esm/shared/page-configs/Config/PageContextConfig.js").PageContextConfig;
14
+ configEntries: import("vite-plugin-ssr/dist/esm/shared/getPageFiles/getExports.js").ConfigEntries;
15
+ exports: Record<string, unknown>;
16
+ exportsAll: import("vite-plugin-ssr/dist/esm/shared/getPageFiles/getExports.js").ExportsAll;
17
+ urlOriginal: string;
18
+ is404: boolean | null;
19
+ isClientSideNavigation: boolean;
20
+ abortReason?: unknown;
21
+ abortStatusCode?: undefined;
22
+ errorWhileRendering?: unknown;
23
+ url: string;
24
+ pageExports: Record<string, unknown>;
25
+ }> & Pick<{
26
+ Page: any;
27
+ routeParams: Record<string, string>;
28
+ config: import("vite-plugin-ssr/dist/esm/shared/page-configs/Config/PageContextConfig.js").PageContextConfig;
29
+ configEntries: import("vite-plugin-ssr/dist/esm/shared/getPageFiles/getExports.js").ConfigEntries;
30
+ exports: Record<string, unknown>;
31
+ exportsAll: import("vite-plugin-ssr/dist/esm/shared/getPageFiles/getExports.js").ExportsAll;
32
+ urlOriginal: string;
33
+ is404: boolean | null;
34
+ isClientSideNavigation: boolean;
35
+ abortReason?: unknown;
36
+ abortStatusCode?: undefined;
37
+ errorWhileRendering?: unknown;
38
+ url: string;
39
+ pageExports: Record<string, unknown>;
40
+ }, "Page" | "pageExports" | "config" | "configEntries" | "exports" | "exportsAll" | "abortReason"> & {
41
+ isHydration: boolean;
42
+ isBackwardNavigation: boolean | null;
43
+ } & 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 CHANGED
@@ -1,3 +1,3 @@
1
1
  export { getPageElement };
2
- import type { PageContext } from './types';
2
+ import type { PageContext } from 'vite-plugin-ssr/types';
3
3
  declare function getPageElement(pageContext: PageContext): JSX.Element;
package/dist/renderer/getPageElement.js CHANGED
@@ -2,9 +2,13 @@ export { getPageElement };
2
2
  import React from 'react';
3
3
  import { PageContextProvider } from './PageContextProvider.js';
4
4
  function getPageElement(pageContext) {
5
- var _a, _b;
5
+ var _a;
6
6
  const Layout = (_a = pageContext.config.Layout) !== null && _a !== void 0 ? _a : PassThrough;
7
- const Wrapper = (_b = pageContext.config.Wrapper) !== null && _b !== void 0 ? _b : PassThrough;
7
+ const Wrapper =
8
+ /* Should we implement this? Enabling users to defined a wrapper that is used across all layouts.
9
+ pageContext.config.Wrapper ??
10
+ */
11
+ PassThrough;
8
12
  const { Page, pageProps } = pageContext;
9
13
  const page = (React.createElement(React.StrictMode, null,
10
14
  React.createElement(PageContextProvider, { pageContext: pageContext },
package/dist/renderer/getTitle.d.ts CHANGED
@@ -2,6 +2,5 @@ export { getTitle };
2
2
  import type { ConfigEntries } from 'vite-plugin-ssr/types';
3
3
  declare function getTitle(pageContext: {
4
4
  title?: unknown;
5
- config: Record<string, unknown>;
6
5
  configEntries: ConfigEntries;
7
6
  }): null | string;
package/dist/renderer/onRenderClient.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export default onRenderClient;
2
- import type { PageContextClient } from './types';
2
+ import type { PageContextClient } from 'vite-plugin-ssr/types';
3
3
  declare function onRenderClient(pageContext: PageContextClient): Promise<void>;
package/dist/renderer/onRenderClient.js CHANGED
@@ -6,7 +6,8 @@ let root;
6
6
  async function onRenderClient(pageContext) {
7
7
  const page = getPageElement(pageContext);
8
8
  const container = document.getElementById('page-view');
9
- if (pageContext.isHydration) {
9
+ pageContext.isHydration;
10
+ if (container.innerHTML !== '' && pageContext.isHydration) {
10
11
  root = ReactDOM.hydrateRoot(container, page);
11
12
  }
12
13
  else {
package/dist/renderer/onRenderHtml.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export default onRenderHtml;
2
- import type { PageContextServer } from './types';
3
- declare function onRenderHtml(pageContext: PageContextServer): Promise<{
4
- documentHtml: import("vite-plugin-ssr/dist/types/node/runtime/html/renderHtml.js").TemplateWrapped;
2
+ import type { PageContext } from 'vite-plugin-ssr/types';
3
+ declare function onRenderHtml(pageContext: PageContext): Promise<{
4
+ documentHtml: import("vite-plugin-ssr/dist/esm/node/runtime/html/renderHtml.js").TemplateWrapped;
5
5
  }>;
package/dist/renderer/onRenderHtml.js CHANGED
@@ -6,8 +6,11 @@ import { getPageElement } from './getPageElement.js';
6
6
  import { PageContextProvider } from './PageContextProvider.js';
7
7
  import React from 'react';
8
8
  async function onRenderHtml(pageContext) {
9
- const page = getPageElement(pageContext);
10
- const pageHtml = renderToString(page);
9
+ let pageHtml = '';
10
+ if (!!pageContext.Page) {
11
+ const page = getPageElement(pageContext);
12
+ pageHtml = renderToString(page);
13
+ }
11
14
  const title = getTitle(pageContext);
12
15
  const titleTag = !title ? '' : escapeInject `<title>${title}</title>`;
13
16
  const { description } = pageContext.config;
package/dist/renderer/types.d.ts CHANGED
@@ -1,28 +1,12 @@
1
- export type { PageContextServer };
2
- export type { PageContextClient };
3
- export type { PageContext };
4
- export type { PageProps };
5
- export type { Page };
6
1
  export type { Component };
7
- import type { PageContextBuiltIn, PageContextBuiltInClientWithClientRouting as PageContextBuiltInClient } from 'vite-plugin-ssr/types';
8
- import type { Config } from './+config';
9
2
  import type { ReactElement } from 'react';
10
3
  type Component = (props: any) => ReactElement;
11
- type Page = (pageProps: PageProps) => ReactElement;
12
- type PageProps = Record<string, unknown>;
13
- type WrapperComponent = ({ children }: {
14
- children: any;
15
- }) => ReactElement;
16
- export type PageContextCommon = {
17
- Page: Page;
18
- pageProps?: PageProps;
19
- config: {
20
- Layout?: WrapperComponent;
21
- Wrapper?: WrapperComponent;
22
- };
23
- };
24
- type PageContextServer = PageContextBuiltIn<Page> & PageContextCommon & {
25
- config: Config;
26
- };
27
- type PageContextClient = PageContextBuiltInClient<Page> & PageContextCommon;
28
- type PageContext = PageContextClient | PageContextServer;
4
+ declare global {
5
+ namespace Vike {
6
+ interface PageContext {
7
+ /** The page's root React component */
8
+ Page?: Component;
9
+ pageProps: Record<string, unknown>;
10
+ }
11
+ }
12
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vike-react",
3
- "version": "0.1.6",
3
+ "version": "0.2.0-commit-af9b3c5",
4
4
  "type": "module",
5
5
  "main": "./dist/renderer/+config.js",
6
6
  "types": "./dist/renderer/+config.d.ts",
@@ -14,22 +14,24 @@
14
14
  "scripts": {
15
15
  "dev": "tsc --watch",
16
16
  "build": "rm -rf dist/ && tsc",
17
- "release": "release-me patch"
17
+ "release": "release-me patch",
18
+ "release:commit": "release-me commit"
18
19
  },
19
20
  "peerDependencies": {
20
21
  "react": "18.x.x",
21
22
  "react-dom": "18.x.x",
22
23
  "vite": "^4.3.8",
23
- "vite-plugin-ssr": "^0.4.132"
24
+ "vite-plugin-ssr": "^0.4.141"
24
25
  },
25
26
  "devDependencies": {
26
- "@brillout/release-me": "^0.1.3",
27
+ "@brillout/release-me": "^0.1.7",
27
28
  "@types/node": "^18.15.3",
28
29
  "@types/react": "^18.0.8",
29
30
  "@types/react-dom": "^18.0.3",
30
31
  "react": "^18.0.0",
31
32
  "react-dom": "^18.0.0",
32
- "typescript": "^5.0.2"
33
+ "typescript": "^5.0.2",
34
+ "vite-plugin-ssr": "0.4.141-commit-25ec8c9"
33
35
  },
34
36
  "typesVersions": {
35
37
  "*": {
@@ -51,6 +53,6 @@
51
53
  "dist/",
52
54
  "types.d.ts"
53
55
  ],
54
- "repository": "github:brillout/vike-react",
56
+ "repository": "github:vikejs/vike-react",
55
57
  "license": "MIT"
56
58
  }
package/types.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export type {
2
- PageContextBuiltIn,
3
- PageContextBuiltInClientWithClientRouting as PageContextBuiltInClient
4
- } from 'vite-plugin-ssr/types'
5
- export type { ConfigEnhanced as Config } from './renderer/+config'