vike-react 0.4.4 → 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.
Files changed (6) hide show
  1. package/README.md +85 -1
  2. package/dist/+config.d.ts +2 -2
  3. package/dist/+config.js +1 -2
  4. package/dist/index.d.ts +1 -1
  5. package/dist/index.js +1 -1
  6. 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 [Vike](https://vike.dev).
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 config: {
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
- const config = {
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 { config } from './+config.js';
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
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 { config } from './+config.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.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.4",
32
- "@types/react": "^18.2.48",
33
- "@types/react-dom": "^18.2.18",
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.160"
37
+ "vike": "^0.4.161"
38
38
  },
39
39
  "dependencies": {
40
- "react-streaming": "^0.3.19"
40
+ "react-streaming": "^0.3.22"
41
41
  },
42
42
  "typesVersions": {
43
43
  "*": {