vike-react 0.4.8 → 0.4.10

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 (8) hide show
  1. package/README.md +4 -94
  2. package/dist/+config.d.ts +11 -0
  3. package/dist/+config.js +6 -0
  4. package/dist/renderer/getPageElement.js +7 -5
  5. package/dist/renderer/onRenderClient.js +12 -3
  6. package/dist/renderer/onRenderHtml.js +6 -4
  7. package/dist/types/Config.d.ts +18 -0
  8. package/package.json +7 -6
package/README.md CHANGED
@@ -1,95 +1,5 @@
1
- <!-- WARNING: keep links absolute in this file so they work on NPM too -->
1
+ Source code of `vike-react`.
2
2
 
3
- [<img src="https://vike.dev/vike-readme.svg" align="right" height="90">](https://vike.dev)
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, see [vike.dev/react](https://vike.dev/react).
9
-
10
- - [Documentation](https://vike.dev)
11
- - [Examples](https://github.com/vikejs/vike-react/tree/main/examples)
12
- - [Changelog](https://github.com/vikejs/vike-react/blob/main/packages/vike-react/CHANGELOG.md)
13
-
14
- ## Introduction
15
-
16
- [UI framework Vike extensions](https://vike.dev/extensions) like `vike-react`:
17
- * implement Vike Core [hooks](https://vike.dev/hooks) (e.g. [`onRenderHtml()`](https://vike.dev/onRenderHtml)) on your
18
- behalf,
19
- * set Vike Core [settings](https://vike.dev/settings) on your behalf,
20
- * introduce new hooks for you to implement if needed,
21
- * introduce new settings for you to set if needed,
22
- * introduce new components and component hooks.
23
-
24
- ## Scaffold new app
25
-
26
- Use [Bati](https://batijs.github.io/) to scaffold a Vike app using `vike-react`.
27
-
28
- ## Add to existing app
29
-
30
- To add `vike-react` to an existing Vike app:
31
-
32
- 1. Install the `vike-react` npm package in your project:
33
-
34
- ```bash
35
- npm install vike-react
36
- ```
37
-
38
- 2. Extend your existing Vike config files with `vike-react`:
39
-
40
- ```diff
41
- // /pages/+config.js
42
-
43
- +import vikeReact from 'vike-react/config'
44
- +
45
- export default {
46
- // Existing Vike Core settings
47
- // ...
48
- +
49
- + // New setting introduced by vike-react:
50
- + title: 'My Vike + React App',
51
- +
52
- + extends: vikeReact
53
- }
54
- ```
55
-
56
- ## Hooks
57
-
58
- `vike-react` implements the [`onRenderHtml()`](https://vike.dev/onRenderHtml) and
59
- [`onRenderClient()`](https://vike.dev/onRenderClient) hooks on your behalf, which are essentially the glue code between
60
- Vike and React.
61
-
62
- ## Settings
63
-
64
- `vike-react` sets the following Vike Core settings on your behalf:
65
-
66
- * [`clientRouting=true`](https://vike.dev/clientRouting): Enable [Client Routing](https://vike.dev/client-routing).
67
- * [`hydrationCanBeAborted=true`](https://vike.dev/hydrationCanBeAborted): React allows the
68
- [hydration](https://vike.dev/hydration) to be aborted.
69
-
70
- `vike-react` introduces the following new settings:
71
-
72
- * [`Head`](https://vike.dev/head): **Component** Component to be rendered inside the `<head>` tag.
73
- * [`title`](https://vike.dev/head): **string** `<title>...</title>` tag.
74
- * [`favicon`](https://vike.dev/head): **string** `<link rel="icon" href="..." />` attribute.
75
- * [`lang`](https://vike.dev/lang): **string** `<html lang="...">` attribute.
76
- * [`ssr`](https://vike.dev/ssr): **boolean** Enable/disable Server-Side Rendering
77
- ([SSR](https://vike.dev/render-modes)).
78
- * [`stream`](https://vike.dev/stream): **boolean** Enable/disable [HTML streaming](https://vike.dev/streaming).
79
- * [`Layout`](https://vike.dev/Layout): **Component** Wrapper for your [Page component](https://vike.dev/Page).
80
- * [`Wrapper`](https://vike.dev/Wrapper): **Component** Another wrapper for your Page component.
81
-
82
- ## Component hooks
83
-
84
- `vike-react` introduces the following new component hooks:
85
-
86
- * [`useData()`](https://vike.dev/useData): Access the data that is returned by a [`data()` hook](https://vike.dev/data)
87
- from any component.
88
- * [`usePageContext()`](https://vike.dev/usePageContext): Access the [`pageContext` object](https://vike.dev/pageContext)
89
- from any component.
90
-
91
- ## Components
92
-
93
- `vike-react` introduces the following new components:
94
-
95
- * [`ClientOnly`](https://vike.dev/ClientOnly): Wrapper to render and load a component only on the client-side.
3
+ See also:
4
+ - Docs at [`vike.dev`](https://vike.dev) and [`vike.dev/vike-react`](https://vike.dev/vike-react)
5
+ - [CHANGELOG.md](https://github.com/vikejs/vike-react/blob/main/packages/vike-react/CHANGELOG.md)
package/dist/+config.d.ts CHANGED
@@ -53,6 +53,11 @@ declare const _default: {
53
53
  server: true;
54
54
  };
55
55
  };
56
+ onBeforeRenderClient: {
57
+ env: {
58
+ client: true;
59
+ };
60
+ };
56
61
  onAfterRenderClient: {
57
62
  env: {
58
63
  client: true;
@@ -75,6 +80,12 @@ declare const _default: {
75
80
  config: true;
76
81
  };
77
82
  };
83
+ reactStrictMode: {
84
+ env: {
85
+ client: true;
86
+ server: true;
87
+ };
88
+ };
78
89
  };
79
90
  };
80
91
  export default _default;
package/dist/+config.js CHANGED
@@ -42,6 +42,9 @@ export default {
42
42
  _streamIsRequied: {
43
43
  env: { server: true }
44
44
  },
45
+ onBeforeRenderClient: {
46
+ env: { client: true }
47
+ },
45
48
  onAfterRenderClient: {
46
49
  env: { client: true }
47
50
  },
@@ -54,6 +57,9 @@ export default {
54
57
  // Vike already defines the setting 'name', but we redundantly define it here for older Vike versions (otherwise older Vike versions will complain that 'name` is an unknown config).
55
58
  name: {
56
59
  env: { config: true }
60
+ },
61
+ reactStrictMode: {
62
+ env: { client: true, server: true }
57
63
  }
58
64
  }
59
65
  };
package/dist/renderer/getPageElement.js CHANGED
@@ -6,11 +6,13 @@ function getPageElement(pageContext) {
6
6
  const Wrapper = pageContext.config.Wrapper ?? PassThrough;
7
7
  const VikeReactQueryWrapper = pageContext.config.VikeReactQueryWrapper ?? PassThrough;
8
8
  const { Page } = pageContext;
9
- const page = (React.createElement(React.StrictMode, null,
10
- React.createElement(PageContextProvider, { pageContext: pageContext },
11
- React.createElement(VikeReactQueryWrapper, { pageContext: pageContext },
12
- React.createElement(Wrapper, null,
13
- React.createElement(Layout, null, Page ? React.createElement(Page, null) : null))))));
9
+ let page = (React.createElement(PageContextProvider, { pageContext: pageContext },
10
+ React.createElement(VikeReactQueryWrapper, { pageContext: pageContext },
11
+ React.createElement(Wrapper, null,
12
+ React.createElement(Layout, null, Page ? React.createElement(Page, null) : null)))));
13
+ if (pageContext.config.reactStrictMode !== false) {
14
+ page = React.createElement(React.StrictMode, null, page);
15
+ }
14
16
  return page;
15
17
  }
16
18
  function PassThrough({ children }) {
package/dist/renderer/onRenderClient.js CHANGED
@@ -5,14 +5,21 @@ import { getHeadSetting } from './getHeadSetting.js';
5
5
  import { getPageElement } from './getPageElement.js';
6
6
  let root;
7
7
  const onRenderClient = (pageContext) => {
8
+ // Use case:
9
+ // - Store hydration https://github.com/vikejs/vike-react/issues/110
10
+ pageContext.config.onBeforeRenderClient?.(pageContext);
8
11
  const page = getPageElement(pageContext);
9
12
  // TODO: implement this? So that, upon errors, onRenderClient() throws an error and Vike can render the error. As of April 2024 it isn't released yet.
10
13
  // - https://react-dev-git-fork-rickhanlonii-rh-root-options-fbopensource.vercel.app/reference/react-dom/client/createRoot#show-a-dialog-for-uncaught-errors
11
14
  // - https://react-dev-git-fork-rickhanlonii-rh-root-options-fbopensource.vercel.app/reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors
12
15
  const onUncaughtError = (_error, _errorInfo) => { };
13
- const container = document.getElementById('react-root');
14
- if (container.innerHTML !== '' && pageContext.isHydration) {
15
- // First render (hydration)
16
+ const container = document.getElementById('root');
17
+ if (
18
+ // Whether the page was rendered to HTML. (I.e. whether the user set the [`ssr`](https://vike.dev/ssr) setting to `false`.)
19
+ container.innerHTML !== '' &&
20
+ // Whether the page was already rendered to HTML. (I.e. whether this is the first client-side rendering.)
21
+ pageContext.isHydration) {
22
+ // Hydration
16
23
  root = ReactDOM.hydrateRoot(container, page, {
17
24
  // @ts-expect-error
18
25
  onUncaughtError
@@ -44,6 +51,8 @@ const onRenderClient = (pageContext) => {
44
51
  }
45
52
  pageContext.page = page;
46
53
  pageContext.root = root;
54
+ // Use case:
55
+ // - Testing tool https://github.com/vikejs/vike-react/issues/95
47
56
  pageContext.config.onAfterRenderClient?.(pageContext);
48
57
  };
49
58
  // https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically/260876#260876
package/dist/renderer/onRenderHtml.js CHANGED
@@ -16,9 +16,11 @@ const onRenderHtml = async (pageContext) => {
16
16
  const titleTag = !title ? '' : escapeInject `<title>${title}</title>`;
17
17
  const faviconTag = !favicon ? '' : escapeInject `<link rel="icon" href="${favicon}" />`;
18
18
  const Head = pageContext.config.Head || (() => React.createElement(React.Fragment, null));
19
- const head = (React.createElement(React.StrictMode, null,
20
- React.createElement(PageContextProvider, { pageContext: pageContext },
21
- React.createElement(Head, null))));
19
+ let head = (React.createElement(PageContextProvider, { pageContext: pageContext },
20
+ React.createElement(Head, null)));
21
+ if (pageContext.config.reactStrictMode !== false) {
22
+ head = React.createElement(React.StrictMode, null, head);
23
+ }
22
24
  const headHtml = dangerouslySkipEscape(renderToString(head));
23
25
  let pageView;
24
26
  if (!pageContext.Page) {
@@ -46,7 +48,7 @@ const onRenderHtml = async (pageContext) => {
46
48
  ${faviconTag}
47
49
  </head>
48
50
  <body>
49
- <div id="react-root">${pageView}</div>
51
+ <div id="root">${pageView}</div>
50
52
  </body>
51
53
  </html>`;
52
54
  return documentHtml;
package/dist/types/Config.d.ts CHANGED
@@ -50,10 +50,28 @@ declare global {
50
50
  *
51
51
  * @default false
52
52
  *
53
+ * https://vike.dev/stream
54
+ *
53
55
  */
54
56
  stream?: boolean;
57
+ /**
58
+ * Whether to use `<StrictMode>`.
59
+ *
60
+ * https://vike.dev/reactStrictMode
61
+ *
62
+ * @default true
63
+ */
64
+ reactStrictMode?: boolean;
65
+ /**
66
+ * Client-side hook called before the page is rendered.
67
+ *
68
+ * https://vike.dev/onBeforeRenderClient
69
+ */
70
+ onBeforeRenderClient?: (pageContext: PageContextClient) => void;
55
71
  /**
56
72
  * Client-side hook called after the page is rendered.
73
+ *
74
+ * https://vike.dev/onAfterRenderClient
57
75
  */
58
76
  onAfterRenderClient?: (pageContext: PageContextClient) => void;
59
77
  VikeReactQueryWrapper?: React.ReactNode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vike-react",
3
- "version": "0.4.8",
3
+ "version": "0.4.10",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -15,10 +15,10 @@
15
15
  },
16
16
  "scripts": {
17
17
  "dev": "tsc --watch",
18
- "build": "rm -rf dist/ && tsc",
19
- "release": "release-me --git-tag-prefix vike-react patch",
20
- "release:minor": "release-me --git-tag-prefix vike-react minor",
21
- "release:commit": "release-me --git-tag-prefix vike-react commit"
18
+ "build": "rimraf dist/ && tsc",
19
+ "release": "release-me patch",
20
+ "release:minor": "release-me minor",
21
+ "release:commit": "release-me commit"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "react": "18.x.x",
@@ -28,12 +28,13 @@
28
28
  },
29
29
  "devDependencies": {
30
30
  "@biomejs/biome": "^1.6.4",
31
- "@brillout/release-me": "^0.2.1",
31
+ "@brillout/release-me": "^0.3.4",
32
32
  "@types/node": "^20.11.17",
33
33
  "@types/react": "^18.2.55",
34
34
  "@types/react-dom": "^18.2.19",
35
35
  "react": "^18.2.0",
36
36
  "react-dom": "^18.2.0",
37
+ "rimraf": "^5.0.5",
37
38
  "typescript": "^5.3.3",
38
39
  "vike": "^0.4.168"
39
40
  },