vike-react 0.4.9 → 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.
package/README.md
CHANGED
|
@@ -1,95 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
Source code of `vike-react`.
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
[
|
|
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)
|
|
@@ -13,7 +13,7 @@ const onRenderClient = (pageContext) => {
|
|
|
13
13
|
// - https://react-dev-git-fork-rickhanlonii-rh-root-options-fbopensource.vercel.app/reference/react-dom/client/createRoot#show-a-dialog-for-uncaught-errors
|
|
14
14
|
// - https://react-dev-git-fork-rickhanlonii-rh-root-options-fbopensource.vercel.app/reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors
|
|
15
15
|
const onUncaughtError = (_error, _errorInfo) => { };
|
|
16
|
-
const container = document.getElementById('
|
|
16
|
+
const container = document.getElementById('root');
|
|
17
17
|
if (
|
|
18
18
|
// Whether the page was rendered to HTML. (I.e. whether the user set the [`ssr`](https://vike.dev/ssr) setting to `false`.)
|
|
19
19
|
container.innerHTML !== '' &&
|
package/dist/types/Config.d.ts
CHANGED
|
@@ -50,20 +50,28 @@ declare global {
|
|
|
50
50
|
*
|
|
51
51
|
* @default false
|
|
52
52
|
*
|
|
53
|
+
* https://vike.dev/stream
|
|
54
|
+
*
|
|
53
55
|
*/
|
|
54
56
|
stream?: boolean;
|
|
55
57
|
/**
|
|
56
|
-
* Whether to use `<
|
|
58
|
+
* Whether to use `<StrictMode>`.
|
|
59
|
+
*
|
|
60
|
+
* https://vike.dev/reactStrictMode
|
|
57
61
|
*
|
|
58
62
|
* @default true
|
|
59
63
|
*/
|
|
60
64
|
reactStrictMode?: boolean;
|
|
61
65
|
/**
|
|
62
66
|
* Client-side hook called before the page is rendered.
|
|
67
|
+
*
|
|
68
|
+
* https://vike.dev/onBeforeRenderClient
|
|
63
69
|
*/
|
|
64
70
|
onBeforeRenderClient?: (pageContext: PageContextClient) => void;
|
|
65
71
|
/**
|
|
66
72
|
* Client-side hook called after the page is rendered.
|
|
73
|
+
*
|
|
74
|
+
* https://vike.dev/onAfterRenderClient
|
|
67
75
|
*/
|
|
68
76
|
onAfterRenderClient?: (pageContext: PageContextClient) => void;
|
|
69
77
|
VikeReactQueryWrapper?: React.ReactNode;
|