vike-react 0.4.6 → 0.4.7

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 +1 -1
  2. package/dist/+config.d.ts +5 -0
  3. package/dist/+config.js +3 -1
  4. package/dist/index.js +1 -1
  5. package/dist/renderer/onRenderClient.js +4 -1
  6. package/dist/renderer/onRenderHtml.js +8 -1
  7. package/dist/types/Config.d.ts +24 -8
  8. package/dist/types/PageContext.d.ts +9 -1
  9. package/package.json +4 -3
package/README.md CHANGED
@@ -38,7 +38,7 @@ npm install vike-react
38
38
  2. Extend your existing Vike config files with `vike-react`:
39
39
 
40
40
  ```diff
41
- // /pages/+config.h.js
41
+ // /pages/+config.js
42
42
 
43
43
  +import vikeReact from 'vike-react/config'
44
44
  +
package/dist/+config.d.ts CHANGED
@@ -48,6 +48,11 @@ declare const _default: {
48
48
  server: true;
49
49
  };
50
50
  };
51
+ onAfterRenderClient: {
52
+ env: {
53
+ client: true;
54
+ };
55
+ };
51
56
  VikeReactQueryWrapper: {
52
57
  env: {
53
58
  client: true;
package/dist/+config.js CHANGED
@@ -3,7 +3,6 @@ import { ssrEffect } from './renderer/ssrEffect.js';
3
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'`
4
4
  import './types/index.js';
5
5
  export default {
6
- // @ts-ignore Remove this ts-ignore once Vike's new version is released.
7
6
  name: 'vike-react',
8
7
  // https://vike.dev/onRenderHtml
9
8
  onRenderHtml: 'import:vike-react/renderer/onRenderHtml:onRenderHtml',
@@ -40,6 +39,9 @@ export default {
40
39
  stream: {
41
40
  env: { server: true }
42
41
  },
42
+ onAfterRenderClient: {
43
+ env: { client: true }
44
+ },
43
45
  VikeReactQueryWrapper: {
44
46
  env: { client: true, server: true }
45
47
  },
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'` (typically in your /pages/+config.h.js)");
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.js)");
3
3
  export { default } from './+config.js';
package/dist/renderer/onRenderClient.js CHANGED
@@ -6,7 +6,7 @@ import { getPageElement } from './getPageElement.js';
6
6
  let root;
7
7
  const onRenderClient = (pageContext) => {
8
8
  const page = getPageElement(pageContext);
9
- const container = document.getElementById('page-view');
9
+ const container = document.getElementById('react-root');
10
10
  if (container.innerHTML !== '' && pageContext.isHydration) {
11
11
  // First render (hydration)
12
12
  root = ReactDOM.hydrateRoot(container, page);
@@ -32,6 +32,9 @@ const onRenderClient = (pageContext) => {
32
32
  }
33
33
  root.render(page);
34
34
  }
35
+ pageContext.page = page;
36
+ pageContext.root = root;
37
+ pageContext.config.onAfterRenderClient?.(pageContext);
35
38
  };
36
39
  // https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically/260876#260876
37
40
  function setFavicon(faviconUrl) {
package/dist/renderer/onRenderHtml.js CHANGED
@@ -8,6 +8,7 @@ import { getPageElement } from './getPageElement.js';
8
8
  import { PageContextProvider } from '../hooks/usePageContext.js';
9
9
  import React from 'react';
10
10
  checkVikeVersion();
11
+ addEcosystemStamp();
11
12
  const onRenderHtml = async (pageContext) => {
12
13
  const title = getHeadSetting('title', pageContext);
13
14
  const favicon = getHeadSetting('favicon', pageContext);
@@ -38,7 +39,7 @@ const onRenderHtml = async (pageContext) => {
38
39
  ${faviconTag}
39
40
  </head>
40
41
  <body>
41
- <div id="page-view">${pageView}</div>
42
+ <div id="react-root">${pageView}</div>
42
43
  </body>
43
44
  </html>`;
44
45
  return documentHtml;
@@ -55,3 +56,9 @@ function checkVikeVersion() {
55
56
  }
56
57
  throw new Error('Update Vike to 0.4.147 or above');
57
58
  }
59
+ // Used by:
60
+ // - react-streaming (to improve error messages, see https://github.com/brillout/react-streaming/blob/70c168de1e97b9c4385a4c3002b5013f1e406341/src/utils/isVikeReactApp.ts#L4)
61
+ function addEcosystemStamp() {
62
+ const g = globalThis;
63
+ g._isVikeReactApp = true;
64
+ }
package/dist/types/Config.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { PageContextClient } from 'vike/types';
1
2
  declare global {
2
3
  namespace VikePackages {
3
4
  interface ConfigVikeReact {
@@ -5,10 +6,24 @@ declare global {
5
6
  Page?: () => React.ReactNode;
6
7
  /** React element rendered and appended into &lt;head>&lt;/head> */
7
8
  Head?: () => React.ReactNode;
8
- /** A component, usually common to several pages, that wraps the root component `Page` */
9
+ /**
10
+ * A component that defines the visual layout of the page common to several pages.
11
+ *
12
+ * Technically: the `<Layou>` component wraps the root component `<Page>`.
13
+ *
14
+ * https://vike.dev/Layout
15
+ */
9
16
  Layout?: (props: {
10
17
  children: React.ReactNode;
11
18
  }) => React.ReactNode;
19
+ /**
20
+ * A component wrapping the the root component `<Page>`.
21
+ *
22
+ * https://vike.dev/Wrapper
23
+ */
24
+ Wrapper?: (props: {
25
+ children: React.ReactNode;
26
+ }) => React.ReactNode;
12
27
  /** &lt;title>${title}&lt;/title> */
13
28
  title?: string;
14
29
  /** &lt;link rel="icon" href="${favicon}" /> */
@@ -20,12 +35,11 @@ declare global {
20
35
  */
21
36
  lang?: string;
22
37
  /**
23
- * If true, render mode is SSR or pre-rendering (aka SSG). In other words, the
24
- * page's HTML will be rendered at build-time or request-time.
25
- * If false, render mode is SPA. In other words, the page will only be
26
- * rendered in the browser.
38
+ * If `true`, the page is rendered twice: on the server-side (to HTML) and on the client-side (hydration).
27
39
  *
28
- * See https://vike.dev/render-modes
40
+ * If `false`, the page is rendered only once in the browser.
41
+ *
42
+ * https://vike.dev/ssr
29
43
  *
30
44
  * @default true
31
45
  *
@@ -38,9 +52,11 @@ declare global {
38
52
  *
39
53
  */
40
54
  stream?: boolean;
55
+ /**
56
+ * Client-side hook called after the page is rendered.
57
+ */
58
+ onAfterRenderClient?: (pageContext: PageContextClient) => void;
41
59
  VikeReactQueryWrapper?: React.ReactNode;
42
- Wrapper?: () => React.ReactNode;
43
60
  }
44
61
  }
45
62
  }
46
- export {};
package/dist/types/PageContext.d.ts CHANGED
@@ -1,9 +1,17 @@
1
+ import type React from 'react';
2
+ import type { JSX } from 'react';
3
+ import type ReactDOM from 'react-dom/client';
1
4
  declare global {
2
5
  namespace Vike {
3
6
  interface PageContext {
7
+ /** The root React component of the page */
4
8
  Page?: () => React.ReactNode;
9
+ /** The user agent string of the user's browser */
5
10
  userAgent?: string;
11
+ /** The root React element of the page */
12
+ page?: JSX.Element;
13
+ /** The React root DOM container */
14
+ root?: ReactDOM.Root;
6
15
  }
7
16
  }
8
17
  }
9
- export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vike-react",
3
- "version": "0.4.6",
3
+ "version": "0.4.7",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -27,6 +27,7 @@
27
27
  "vite": "^4.3.8 || ^5.0.10"
28
28
  },
29
29
  "devDependencies": {
30
+ "@biomejs/biome": "^1.6.4",
30
31
  "@brillout/release-me": "^0.1.14",
31
32
  "@types/node": "^20.11.17",
32
33
  "@types/react": "^18.2.55",
@@ -34,10 +35,10 @@
34
35
  "react": "^18.2.0",
35
36
  "react-dom": "^18.2.0",
36
37
  "typescript": "^5.3.3",
37
- "vike": "^0.4.161"
38
+ "vike": "^0.4.168"
38
39
  },
39
40
  "dependencies": {
40
- "react-streaming": "^0.3.22"
41
+ "react-streaming": "^0.3.25"
41
42
  },
42
43
  "typesVersions": {
43
44
  "*": {