vike-react 0.4.3 → 0.4.5
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 +85 -1
- package/dist/+config.d.ts +2 -2
- package/dist/+config.js +1 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -5,7 +5,91 @@
|
|
|
5
5
|
|
|
6
6
|
# `vike-react`
|
|
7
7
|
|
|
8
|
-
React integration for [
|
|
8
|
+
React integration for Vike, see [vike.dev/react](https://vike.dev/react).
|
|
9
9
|
|
|
10
|
+
- [Documentation](https://vike.dev)
|
|
10
11
|
- [Examples](https://github.com/vikejs/vike-react/tree/main/examples)
|
|
11
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.h.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.
|
package/dist/+config.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
export { config };
|
|
2
1
|
import { ssrEffect } from './renderer/ssrEffect.js';
|
|
3
2
|
import './types/index.js';
|
|
4
|
-
declare const
|
|
3
|
+
declare const _default: {
|
|
5
4
|
onRenderHtml: "import:vike-react/renderer/onRenderHtml:onRenderHtml";
|
|
6
5
|
onRenderClient: "import:vike-react/renderer/onRenderClient:onRenderClient";
|
|
7
6
|
passToClient: string[];
|
|
@@ -62,3 +61,4 @@ declare const config: {
|
|
|
62
61
|
};
|
|
63
62
|
};
|
|
64
63
|
};
|
|
64
|
+
export default _default;
|
package/dist/+config.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
export { config };
|
|
2
1
|
import { isNotFalse } from './utils/isNotFalse.js';
|
|
3
2
|
import { ssrEffect } from './renderer/ssrEffect.js';
|
|
4
3
|
// This is required to make TypeScript load the global interfaces such as Vike.PageContext so that they're always loaded: we can assume that the user always imports this file over `import vikeReact from 'vike-react/config'`
|
|
5
4
|
import './types/index.js';
|
|
6
|
-
|
|
5
|
+
export default {
|
|
7
6
|
// https://vike.dev/onRenderHtml
|
|
8
7
|
onRenderHtml: 'import:vike-react/renderer/onRenderHtml:onRenderHtml',
|
|
9
8
|
// https://vike.dev/onRenderClient
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { default } from './+config.js';
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
// TODO/next-major-release: remove this file/export
|
|
2
|
-
console.warn("[vike-react][warning][deprecation] Replace `import vikeReact from 'vike-react'` with `import vikeReact from 'vike-react/config'");
|
|
3
|
-
export {
|
|
2
|
+
console.warn("[vike-react][warning][deprecation] Replace `import vikeReact from 'vike-react'` with `import vikeReact from 'vike-react/config'` (typically in your /pages/+config.h.js)");
|
|
3
|
+
export { default } from './+config.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vike-react",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -28,16 +28,16 @@
|
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@brillout/release-me": "^0.1.14",
|
|
31
|
-
"@types/node": "^20.11.
|
|
32
|
-
"@types/react": "^18.2.
|
|
33
|
-
"@types/react-dom": "^18.2.
|
|
31
|
+
"@types/node": "^20.11.17",
|
|
32
|
+
"@types/react": "^18.2.55",
|
|
33
|
+
"@types/react-dom": "^18.2.19",
|
|
34
34
|
"react": "^18.2.0",
|
|
35
35
|
"react-dom": "^18.2.0",
|
|
36
36
|
"typescript": "^5.3.3",
|
|
37
|
-
"vike": "^0.4.
|
|
37
|
+
"vike": "^0.4.161"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"react-streaming": "^0.3.
|
|
40
|
+
"react-streaming": "^0.3.22"
|
|
41
41
|
},
|
|
42
42
|
"typesVersions": {
|
|
43
43
|
"*": {
|