vike-react 0.4.16 → 0.4.17-commit-7fe7b04

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/dist/components/ClientOnly.js +2 -0
  2. package/dist/helpers/clientOnly.d.ts +7 -0
  3. package/dist/helpers/clientOnly.js +32 -0
  4. package/dist/renderer/onRenderHtml.js +5 -4
  5. package/dist/types/Config.d.ts +21 -10
  6. package/package.json +6 -2
package/dist/components/ClientOnly.js CHANGED
@@ -1,6 +1,8 @@
1
1
  export { ClientOnly };
2
2
  import React, { lazy, useEffect, useState, startTransition } from 'react';
3
3
  function ClientOnly({ load, children, fallback, deps = [] }) {
4
+ // TODO/next-major-release: remove this file/export
5
+ console.warn('[vike-react][warning] <ClientOnly> is deprecated: use clientOnly() instead https://vike.dev/clientOnly');
4
6
  const [Component, setComponent] = useState(null);
5
7
  useEffect(() => {
6
8
  const loadComponent = () => {
package/dist/helpers/clientOnly.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export { clientOnly };
2
+ import { type ComponentProps, type ComponentType, type ReactNode } from 'react';
3
+ declare function clientOnly<T extends ComponentType<any>>(load: () => Promise<{
4
+ default: T;
5
+ } | T>): ComponentType<ComponentProps<T> & {
6
+ fallback?: ReactNode;
7
+ }>;
package/dist/helpers/clientOnly.js ADDED
@@ -0,0 +1,32 @@
1
+ export { clientOnly };
2
+ import React, { Suspense, forwardRef, lazy, useEffect, useState } from 'react';
3
+ function clientOnly(load) {
4
+ var _a;
5
+ // Client side: always bundled by Vite, import.meta.env.SSR === false
6
+ // Server side: may or may not be bundled by Vite, import.meta.env.SSR === true || import.meta.env === undefined
7
+ //@ts-expect-error
8
+ (_a = import.meta).env ?? (_a.env = { SSR: true });
9
+ if (import.meta.env.SSR) {
10
+ return (props) => React.createElement(React.Fragment, null, props.fallback);
11
+ }
12
+ else {
13
+ const Component = lazy(() => load()
14
+ .then((LoadedComponent) => ('default' in LoadedComponent ? LoadedComponent : { default: LoadedComponent }))
15
+ .catch((error) => {
16
+ console.error('Component loading failed:', error);
17
+ return { default: (() => React.createElement("p", null, "Error loading component.")) };
18
+ }));
19
+ return forwardRef((props, ref) => {
20
+ const [mounted, setMounted] = useState(false);
21
+ useEffect(() => {
22
+ setMounted(true);
23
+ }, []);
24
+ if (!mounted) {
25
+ return React.createElement(React.Fragment, null, props.fallback);
26
+ }
27
+ const { fallback, ...rest } = props;
28
+ return (React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null, props.fallback) },
29
+ React.createElement(Component, { ...rest, ref: ref })));
30
+ });
31
+ }
32
+ }
package/dist/renderer/onRenderHtml.js CHANGED
@@ -13,7 +13,7 @@ const onRenderHtml = async (pageContext) => {
13
13
  const title = getHeadSetting('title', pageContext);
14
14
  const favicon = getHeadSetting('favicon', pageContext);
15
15
  const lang = getHeadSetting('lang', pageContext) || 'en';
16
- const titleTag = !title ? '' : escapeInject `<title>${title}</title>`;
16
+ const titleTags = !title ? '' : escapeInject `<title>${title}</title><meta property="og:title" content="${title}" />`;
17
17
  const faviconTag = !favicon ? '' : escapeInject `<link rel="icon" href="${favicon}" />`;
18
18
  const Head = pageContext.config.Head || (() => React.createElement(React.Fragment, null));
19
19
  let head = (React.createElement(PageContextProvider, { pageContext: pageContext },
@@ -47,7 +47,7 @@ const onRenderHtml = async (pageContext) => {
47
47
  <html lang='${lang}'>
48
48
  <head>
49
49
  <meta charset="UTF-8" />
50
- ${titleTag}
50
+ ${titleTags}
51
51
  ${headHtml}
52
52
  ${faviconTag}
53
53
  </head>
@@ -72,8 +72,9 @@ function checkVikeVersion() {
72
72
  // We can leave it 0.4.173 until we entirely remove checkVikeVersion() (because starting vike@0.4.173 we use the new `require` setting).
73
73
  throw new Error('Update Vike to 0.4.173 or above');
74
74
  }
75
- // Used by:
76
- // - react-streaming (to improve error messages, see https://github.com/brillout/react-streaming/blob/70c168de1e97b9c4385a4c3002b5013f1e406341/src/utils/isVikeReactApp.ts#L4)
75
+ // For improving error messages of:
76
+ // - react-streaming https://github.com/brillout/react-streaming/blob/6a43dd20c27fb5d751dca41466b06ee3f4f35462/src/server/useStream.ts#L21
77
+ // - vike https://github.com/vikejs/vike/blob/96c0155380ffebd4976ab076b58e86d8eb2d603a/vike/node/runtime/html/stream/react-streaming.ts#L31
77
78
  function addEcosystemStamp() {
78
79
  const g = globalThis;
79
80
  g._isVikeReactApp =
package/dist/types/Config.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { ImportString, PageContextClient } from 'vike/types';
1
+ import type { ImportString, PageContextClient, PageContext } from 'vike/types';
2
2
  declare global {
3
3
  namespace Vike {
4
4
  interface Config {
@@ -20,16 +20,26 @@ declare global {
20
20
  * https://vike.dev/Wrapper
21
21
  */
22
22
  Wrapper?: Wrapper | ImportString;
23
- /** &lt;title>${title}&lt;/title> */
24
- title?: string;
25
- /** &lt;link rel="icon" href="${favicon}" /> */
26
- favicon?: string;
27
- /** &lt;html lang="${lang}">
28
- *
29
- * @default 'en'
30
- *
23
+ /**
24
+ * ```js
25
+ * <title>${title}</title>
26
+ * <meta property="og:title" content="${title}" />
27
+ * ```
28
+ */
29
+ title?: StringGetter;
30
+ /**
31
+ * ```js
32
+ * <link rel="icon" href="${favicon}" />
33
+ * ```
34
+ */
35
+ favicon?: StringGetter;
36
+ /**
37
+ * ```js
38
+ * <html lang="${lang}">
39
+ * ```
40
+ * @default 'en'
31
41
  */
32
- lang?: string;
42
+ lang?: StringGetter;
33
43
  /**
34
44
  * If `true`, the page is rendered twice: on the server-side (to HTML) and on the client-side (hydration).
35
45
  *
@@ -89,6 +99,7 @@ declare global {
89
99
  }
90
100
  }
91
101
  }
102
+ type StringGetter = string | ((pageContext: PageContext) => string);
92
103
  type Wrapper = (props: {
93
104
  children: React.ReactNode;
94
105
  }) => React.ReactNode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vike-react",
3
- "version": "0.4.16",
3
+ "version": "0.4.17-commit-7fe7b04",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -8,6 +8,7 @@
8
8
  "./useData": "./dist/hooks/useData.js",
9
9
  "./usePageContext": "./dist/hooks/usePageContext.js",
10
10
  "./ClientOnly": "./dist/components/ClientOnly.js",
11
+ "./clientOnly": "./dist/helpers/clientOnly.js",
11
12
  ".": "./dist/index.js",
12
13
  "./config": "./dist/+config.js",
13
14
  "./renderer/onRenderHtml": "./dist/renderer/onRenderHtml.js",
@@ -39,7 +40,7 @@
39
40
  "vike": "^0.4.178"
40
41
  },
41
42
  "dependencies": {
42
- "react-streaming": "^0.3.36"
43
+ "react-streaming": "^0.3.41"
43
44
  },
44
45
  "typesVersions": {
45
46
  "*": {
@@ -52,6 +53,9 @@
52
53
  "ClientOnly": [
53
54
  "./dist/components/ClientOnly.d.ts"
54
55
  ],
56
+ "clientOnly": [
57
+ "./dist/helpers/clientOnly.d.ts"
58
+ ],
55
59
  ".": [
56
60
  "./dist/index.d.ts"
57
61
  ],