vike-react 0.3.4 → 0.3.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.
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export { ClientOnly };
|
|
2
|
+
import React, { useEffect } from 'react';
|
|
3
|
+
import type { ReactNode } from 'react';
|
|
4
|
+
declare function ClientOnly<T>({ load, children, fallback, deps }: {
|
|
5
|
+
load: () => Promise<{
|
|
6
|
+
default: React.ComponentType<T>;
|
|
7
|
+
} | React.ComponentType<T>>;
|
|
8
|
+
children: (Component: React.ComponentType<T>) => ReactNode;
|
|
9
|
+
fallback: ReactNode;
|
|
10
|
+
deps?: Parameters<typeof useEffect>[1];
|
|
11
|
+
}): React.JSX.Element;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export { ClientOnly };
|
|
2
|
+
import React, { Suspense, lazy, useEffect, useState } from 'react';
|
|
3
|
+
function ClientOnly({ load, children, fallback, deps }) {
|
|
4
|
+
const [Component, setComponent] = useState(null);
|
|
5
|
+
useEffect(() => {
|
|
6
|
+
const loadComponent = () => {
|
|
7
|
+
const Component = lazy(() => load()
|
|
8
|
+
.then((LoadedComponent) => {
|
|
9
|
+
return { default: () => children('default' in LoadedComponent ? LoadedComponent.default : LoadedComponent) };
|
|
10
|
+
})
|
|
11
|
+
.catch((error) => {
|
|
12
|
+
console.error('Component loading failed:', error);
|
|
13
|
+
return { default: () => React.createElement("p", null, "Error loading component.") };
|
|
14
|
+
}));
|
|
15
|
+
setComponent(Component);
|
|
16
|
+
};
|
|
17
|
+
loadComponent();
|
|
18
|
+
}, deps);
|
|
19
|
+
return React.createElement(Suspense, { fallback: fallback }, Component ? React.createElement(Component, null) : null);
|
|
20
|
+
}
|
|
@@ -11,34 +11,33 @@ checkVikeVersion();
|
|
|
11
11
|
const onRenderHtml = async (pageContext) => {
|
|
12
12
|
const lang = pageContext.config.lang || 'en';
|
|
13
13
|
const { favicon } = pageContext.config;
|
|
14
|
-
const faviconTag = !favicon ? '' :
|
|
14
|
+
const faviconTag = !favicon ? '' : escapeInject `<link rel="icon" href="${favicon}" />`;
|
|
15
15
|
const title = getTitle(pageContext);
|
|
16
|
-
const titleTag = !title ? '' :
|
|
16
|
+
const titleTag = !title ? '' : escapeInject `<title>${title}</title>`;
|
|
17
17
|
const { description } = pageContext.config;
|
|
18
|
-
const descriptionTag = !description ? '' :
|
|
18
|
+
const descriptionTag = !description ? '' : escapeInject `<meta name="description" content="${description}" />`;
|
|
19
19
|
const Head = pageContext.config.Head || (() => React.createElement(React.Fragment, null));
|
|
20
20
|
const head = (React.createElement(React.StrictMode, null,
|
|
21
21
|
React.createElement(PageContextProvider, { pageContext: pageContext },
|
|
22
22
|
React.createElement(Head, null))));
|
|
23
|
+
const headHtml = dangerouslySkipEscape(renderToString(head));
|
|
23
24
|
const isSsrDisabled = !pageContext.Page;
|
|
24
25
|
const page = isSsrDisabled ? React.createElement(React.Fragment, null) : getPageElement(pageContext);
|
|
25
|
-
const
|
|
26
|
-
React.createElement("head", null,
|
|
27
|
-
React.createElement("meta", { charSet: "UTF-8" }),
|
|
28
|
-
faviconTag,
|
|
29
|
-
titleTag,
|
|
30
|
-
descriptionTag,
|
|
31
|
-
head),
|
|
32
|
-
React.createElement("body", null,
|
|
33
|
-
React.createElement("div", { id: "page-view" }, page))));
|
|
34
|
-
const streamOrString = isSsrDisabled
|
|
35
|
-
? dangerouslySkipEscape(renderToString(htmlContent))
|
|
36
|
-
: await renderToStream(htmlContent, { userAgent: pageContext.userAgent });
|
|
26
|
+
const streamOrString = isSsrDisabled ? dangerouslySkipEscape(renderToString(page)) : await renderToStream(page, { userAgent: pageContext.userAgent });
|
|
37
27
|
const documentHtml = escapeInject `<!DOCTYPE html>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
28
|
+
<html lang='${lang}'>
|
|
29
|
+
<head>
|
|
30
|
+
<meta charset="UTF-8" />
|
|
31
|
+
${faviconTag}
|
|
32
|
+
${titleTag}
|
|
33
|
+
${descriptionTag}
|
|
34
|
+
${headHtml}
|
|
35
|
+
</head>
|
|
36
|
+
<body>
|
|
37
|
+
<div id="page-view">${streamOrString}</div>
|
|
38
|
+
</body>
|
|
39
|
+
<!-- built with https://github.com/vikejs/vike-react -->
|
|
40
|
+
</html>`;
|
|
42
41
|
return documentHtml;
|
|
43
42
|
};
|
|
44
43
|
function checkVikeVersion() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vike-react",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/renderer/+config.js",
|
|
6
6
|
"types": "./dist/renderer/+config.d.ts",
|
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
".": "./dist/renderer/+config.js",
|
|
9
9
|
"./renderer/onRenderHtml": "./dist/renderer/onRenderHtml.js",
|
|
10
10
|
"./renderer/onRenderClient": "./dist/renderer/onRenderClient.js",
|
|
11
|
-
"./usePageContext": "./dist/components/usePageContext.js"
|
|
11
|
+
"./usePageContext": "./dist/components/usePageContext.js",
|
|
12
|
+
"./ClientOnly": "./dist/components/ClientOnly.js"
|
|
12
13
|
},
|
|
13
14
|
"scripts": {
|
|
14
15
|
"dev": "tsc --watch",
|