vike-react 0.4.9 → 0.4.11

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 (9) hide show
  1. package/README.md +4 -94
  2. package/dist/hooks/usePageContext.d.ts +5 -1
  3. package/dist/hooks/usePageContext.js +5 -7
  4. package/dist/renderer/onRenderClient.js +1 -1
  5. package/dist/renderer/onRenderHtml.js +1 -1
  6. package/dist/types/Config.d.ts +9 -1
  7. package/package.json +2 -2
  8. package/dist/utils/assert.d.ts +0 -1
  9. package/dist/utils/assert.js +0 -5
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/hooks/usePageContext.d.ts CHANGED
@@ -6,5 +6,9 @@ declare function PageContextProvider({ pageContext, children }: {
6
6
  pageContext: PageContext;
7
7
  children: React.ReactNode;
8
8
  }): React.JSX.Element;
9
- /** Access the pageContext from any React component */
9
+ /**
10
+ * Access `pageContext` from any React component.
11
+ *
12
+ * https://vike.dev/usePageContext
13
+ */
10
14
  declare function usePageContext(): PageContext;
package/dist/hooks/usePageContext.js CHANGED
@@ -2,22 +2,20 @@ export { usePageContext };
2
2
  export { PageContextProvider };
3
3
  import React, { useContext } from 'react';
4
4
  import { getGlobalObject } from '../utils/getGlobalObject.js';
5
- import { assert } from '../utils/assert.js';
6
5
  const globalObject = getGlobalObject('PageContextProvider.ts', {
7
6
  reactContext: React.createContext(undefined)
8
7
  });
9
8
  function PageContextProvider({ pageContext, children }) {
10
- assert(pageContext);
11
9
  const { reactContext } = globalObject;
12
10
  return React.createElement(reactContext.Provider, { value: pageContext }, children);
13
11
  }
14
- /** Access the pageContext from any React component */
12
+ /**
13
+ * Access `pageContext` from any React component.
14
+ *
15
+ * https://vike.dev/usePageContext
16
+ */
15
17
  function usePageContext() {
16
18
  const { reactContext } = globalObject;
17
19
  const pageContext = useContext(reactContext);
18
- /* React throws an error upon wrong hook usage, so I guess a nice error message isn't needed? And I guess we can therefore assume and assert pageContext to have been provided? Let's see if users report back an assert() failure.
19
- if (!pageContext) throw new Error('<PageContextProvider> is needed for being able to use usePageContext()')
20
- */
21
- assert(pageContext);
22
20
  return pageContext;
23
21
  }
package/dist/renderer/onRenderClient.js CHANGED
@@ -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('react-root');
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/renderer/onRenderHtml.js CHANGED
@@ -48,7 +48,7 @@ const onRenderHtml = async (pageContext) => {
48
48
  ${faviconTag}
49
49
  </head>
50
50
  <body>
51
- <div id="react-root">${pageView}</div>
51
+ <div id="root">${pageView}</div>
52
52
  </body>
53
53
  </html>`;
54
54
  return documentHtml;
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 `<React.StrictMode>`, see https://react.dev/reference/react/StrictMode
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vike-react",
3
- "version": "0.4.9",
3
+ "version": "0.4.11",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -28,7 +28,7 @@
28
28
  },
29
29
  "devDependencies": {
30
30
  "@biomejs/biome": "^1.6.4",
31
- "@brillout/release-me": "^0.3.4",
31
+ "@brillout/release-me": "^0.3.8",
32
32
  "@types/node": "^20.11.17",
33
33
  "@types/react": "^18.2.55",
34
34
  "@types/react-dom": "^18.2.19",
package/dist/utils/assert.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare function assert(condition: unknown): asserts condition;
package/dist/utils/assert.js DELETED
@@ -1,5 +0,0 @@
1
- export function assert(condition) {
2
- if (condition)
3
- return;
4
- throw new Error('You stumbled upon a vike-react bug. Go to https://github.com/vikejs/vike-react/issues/new and copy-paste this error. A maintainer will fix the bug (usually under 24 hours).');
5
- }