vite-react-ssg 0.5.1 → 0.6.0
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.
- package/README.md +46 -36
- package/dist/client/single-page.cjs +82 -0
- package/dist/client/single-page.d.cts +11 -0
- package/dist/client/single-page.d.mts +11 -0
- package/dist/client/single-page.d.ts +11 -0
- package/dist/client/single-page.mjs +75 -0
- package/dist/index.cjs +18 -45
- package/dist/index.d.cts +6 -16
- package/dist/index.d.mts +6 -16
- package/dist/index.d.ts +6 -16
- package/dist/index.mjs +17 -44
- package/dist/node/cli.cjs +3 -16
- package/dist/node/cli.mjs +3 -16
- package/dist/node.cjs +180 -27707
- package/dist/node.d.cts +1 -1
- package/dist/node.d.mts +1 -1
- package/dist/node.d.ts +1 -1
- package/dist/node.mjs +193 -27707
- package/dist/shared/vite-react-ssg.8cdb31f1.mjs +40 -0
- package/dist/shared/vite-react-ssg.a009fbf1.mjs +34 -0
- package/dist/shared/vite-react-ssg.c639b3fe.cjs +48 -0
- package/dist/shared/{vite-react-ssg.91f86102.d.cts → vite-react-ssg.d734eb79.d.cts} +6 -8
- package/dist/shared/{vite-react-ssg.91f86102.d.mts → vite-react-ssg.d734eb79.d.mts} +6 -8
- package/dist/shared/{vite-react-ssg.91f86102.d.ts → vite-react-ssg.d734eb79.d.ts} +6 -8
- package/dist/shared/{vite-react-ssg.9d005d5e.mjs → vite-react-ssg.e6991406.cjs} +3 -11
- package/dist/shared/vite-react-ssg.faf3855a.d.cts +15 -0
- package/dist/shared/vite-react-ssg.faf3855a.d.mts +15 -0
- package/dist/shared/vite-react-ssg.faf3855a.d.ts +15 -0
- package/package.json +13 -1
- package/dist/shared/vite-react-ssg.4ca822c0.cjs +0 -54
package/README.md
CHANGED
|
@@ -9,6 +9,7 @@ See demo(also document): [docs](https://vite-react-ssg.netlify.app/)
|
|
|
9
9
|
# Table of contents
|
|
10
10
|
|
|
11
11
|
- [Usage](#usage)
|
|
12
|
+
- [Use CSR during development](#use-csr-during-development)
|
|
12
13
|
- [Extra route options](#extra-route-options)
|
|
13
14
|
- [`entry`](#entry)
|
|
14
15
|
- [`getStaticPaths`](#getstaticpaths)
|
|
@@ -22,7 +23,6 @@ See demo(also document): [docs](https://vite-react-ssg.netlify.app/)
|
|
|
22
23
|
- [Configuration](#configuration)
|
|
23
24
|
- [Custom Routes to Render](#custom-routes-to-render)
|
|
24
25
|
- [Https](#https)
|
|
25
|
-
- [Use CSR in development environment](#use-csr-in-development-environment)
|
|
26
26
|
- [Roadmap](#roadmap)
|
|
27
27
|
- [Credits](#credits)
|
|
28
28
|
|
|
@@ -100,6 +100,35 @@ export const routes: RouteRecord[] = [
|
|
|
100
100
|
]
|
|
101
101
|
```
|
|
102
102
|
|
|
103
|
+
### Use CSR during development
|
|
104
|
+
|
|
105
|
+
Vite React SSG provide SSR (Server-Side Rendering) during development to ensure consistency between development and production as much as possible.
|
|
106
|
+
|
|
107
|
+
But if you want to use CSR during development, just:
|
|
108
|
+
|
|
109
|
+
```diff
|
|
110
|
+
// package.json
|
|
111
|
+
{
|
|
112
|
+
"scripts": {
|
|
113
|
+
- "dev": "vite-react-ssg dev",
|
|
114
|
+
+ "dev": "vite",
|
|
115
|
+
"build": "vite-react-ssg build"
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### Single Page SSG
|
|
121
|
+
|
|
122
|
+
For SSG of an index page only (i.e. without `react-router-dom`); import `vite-react-ssg/single-page` instead.
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
// src/main.tsx
|
|
126
|
+
import { ViteReactSSG } from 'vite-react-ssg/single-page'
|
|
127
|
+
import App from './App.tsx'
|
|
128
|
+
|
|
129
|
+
export const createRoot = ViteReactSSG(<App />)
|
|
130
|
+
```
|
|
131
|
+
|
|
103
132
|
## Extra route options
|
|
104
133
|
|
|
105
134
|
The RouteObject of vite-react-ssg is based on react-router, and vite-react-ssg receives some additional properties.
|
|
@@ -117,7 +146,7 @@ to determine which paths will be pre-rendered by vite-react-ssg.
|
|
|
117
146
|
|
|
118
147
|
This function is only valid for dynamic route.
|
|
119
148
|
|
|
120
|
-
```
|
|
149
|
+
```tsx
|
|
121
150
|
const route = {
|
|
122
151
|
path: 'nest/:b',
|
|
123
152
|
Component: React.lazy(() => import('./pages/nest/[b]')),
|
|
@@ -267,6 +296,21 @@ export default defineConfig({
|
|
|
267
296
|
})
|
|
268
297
|
```
|
|
269
298
|
|
|
299
|
+
```ts
|
|
300
|
+
// main.ts
|
|
301
|
+
import { ViteReactSSG } from 'vite-react-ssg'
|
|
302
|
+
import { routes } from './App'
|
|
303
|
+
import './index.css'
|
|
304
|
+
|
|
305
|
+
export const createRoot = ViteReactSSG(
|
|
306
|
+
{
|
|
307
|
+
routes,
|
|
308
|
+
// pass your BASE_URL
|
|
309
|
+
basename: import.meta.env.BASE_URL,
|
|
310
|
+
},
|
|
311
|
+
)
|
|
312
|
+
```
|
|
313
|
+
|
|
270
314
|
Vite React SSG will give it to the react-router's `basename`.
|
|
271
315
|
|
|
272
316
|
See: [react-router's create-browser-router](https://reactrouter.com/en/main/routers/create-browser-router#basename)
|
|
@@ -488,40 +532,6 @@ export default defineConfig({
|
|
|
488
532
|
})
|
|
489
533
|
```
|
|
490
534
|
|
|
491
|
-
## Use CSR in development environment
|
|
492
|
-
|
|
493
|
-
If you want to use CSR during development, just:
|
|
494
|
-
|
|
495
|
-
```ts
|
|
496
|
-
// src/main.ts
|
|
497
|
-
import { ViteReactSSG } from 'vite-react-ssg'
|
|
498
|
-
import routes from './App.tsx'
|
|
499
|
-
|
|
500
|
-
export const createRoot = ViteReactSSG(
|
|
501
|
-
{ routes },
|
|
502
|
-
({ router, routes, isClient, initialState }) => {
|
|
503
|
-
// do something.
|
|
504
|
-
},
|
|
505
|
-
{
|
|
506
|
-
// Default value is `true`
|
|
507
|
-
ssrWhenDev: false
|
|
508
|
-
}
|
|
509
|
-
)
|
|
510
|
-
```
|
|
511
|
-
|
|
512
|
-
```diff
|
|
513
|
-
// package.json
|
|
514
|
-
{
|
|
515
|
-
"scripts": {
|
|
516
|
-
- "dev": "vite-react-ssg dev",
|
|
517
|
-
+ "dev": "vite",
|
|
518
|
-
"build": "vite-react-ssg build"
|
|
519
|
-
}
|
|
520
|
-
}
|
|
521
|
-
```
|
|
522
|
-
|
|
523
|
-
Then, you can start the application with CSR in the development environment.
|
|
524
|
-
|
|
525
535
|
## Roadmap
|
|
526
536
|
|
|
527
537
|
- [x] Preload assets
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const client = require('react-dom/client');
|
|
4
|
+
const reactHelmetAsync = require('react-helmet-async');
|
|
5
|
+
const React = require('react');
|
|
6
|
+
const ClientOnly = require('../shared/vite-react-ssg.c639b3fe.cjs');
|
|
7
|
+
const state = require('../shared/vite-react-ssg.e6991406.cjs');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
10
|
+
|
|
11
|
+
const React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
12
|
+
|
|
13
|
+
function ViteReactSSG(App, fn, options = {}) {
|
|
14
|
+
const {
|
|
15
|
+
transformState,
|
|
16
|
+
rootContainer = "#root",
|
|
17
|
+
ssrWhenDev,
|
|
18
|
+
getStyleCollector = null
|
|
19
|
+
} = options;
|
|
20
|
+
if (process.env.NODE_ENV === "development" && ssrWhenDev !== void 0)
|
|
21
|
+
console.warn("[vite-react-ssg] `ssrWhenDev` option is no longer needed. If you want to use csr, just replace `vite-react-ssg dev` with `vite`.");
|
|
22
|
+
const isClient = typeof window !== "undefined";
|
|
23
|
+
async function createRoot(client = false, routePath) {
|
|
24
|
+
const appRenderCallbacks = [];
|
|
25
|
+
const onSSRAppRendered = client ? () => {
|
|
26
|
+
} : (cb) => appRenderCallbacks.push(cb);
|
|
27
|
+
const triggerOnSSRAppRendered = () => {
|
|
28
|
+
return Promise.all(appRenderCallbacks.map((cb) => cb()));
|
|
29
|
+
};
|
|
30
|
+
const context = {
|
|
31
|
+
isClient,
|
|
32
|
+
onSSRAppRendered,
|
|
33
|
+
triggerOnSSRAppRendered,
|
|
34
|
+
initialState: {},
|
|
35
|
+
transformState,
|
|
36
|
+
routePath,
|
|
37
|
+
getStyleCollector,
|
|
38
|
+
routes: void 0,
|
|
39
|
+
routerOptions: void 0,
|
|
40
|
+
base: "/",
|
|
41
|
+
app: App
|
|
42
|
+
};
|
|
43
|
+
if (client) {
|
|
44
|
+
await ClientOnly.documentReady();
|
|
45
|
+
context.initialState = transformState?.(window.__INITIAL_STATE__ || {}) || state.deserializeState(window.__INITIAL_STATE__);
|
|
46
|
+
}
|
|
47
|
+
await fn?.(context);
|
|
48
|
+
const initialState = context.initialState;
|
|
49
|
+
return {
|
|
50
|
+
...context,
|
|
51
|
+
initialState
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
if (isClient) {
|
|
55
|
+
(async () => {
|
|
56
|
+
const container = typeof rootContainer === "string" ? document.querySelector(rootContainer) : rootContainer;
|
|
57
|
+
if (!container) {
|
|
58
|
+
if (typeof $jsdom === "undefined")
|
|
59
|
+
console.warn("[vite-react-ssg] Root container not found.");
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
await createRoot(true);
|
|
63
|
+
const app = /* @__PURE__ */ React__default.createElement(reactHelmetAsync.HelmetProvider, null, App);
|
|
64
|
+
const isSSR = document.querySelector("[data-server-rendered=true]") !== null;
|
|
65
|
+
if (!isSSR && process.env.NODE_ENV === "development") {
|
|
66
|
+
const root = client.createRoot(container);
|
|
67
|
+
React__default.startTransition(() => {
|
|
68
|
+
root.render(app);
|
|
69
|
+
});
|
|
70
|
+
} else {
|
|
71
|
+
React__default.startTransition(() => {
|
|
72
|
+
client.hydrateRoot(container, app);
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
})();
|
|
76
|
+
}
|
|
77
|
+
return createRoot;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
exports.ClientOnly = ClientOnly.ClientOnly;
|
|
81
|
+
exports.Head = ClientOnly.Head;
|
|
82
|
+
exports.ViteReactSSG = ViteReactSSG;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.d734eb79.cjs';
|
|
3
|
+
export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.d734eb79.cjs';
|
|
4
|
+
export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.faf3855a.cjs';
|
|
5
|
+
import 'critters';
|
|
6
|
+
import 'react-router-dom';
|
|
7
|
+
import 'react-helmet-async';
|
|
8
|
+
|
|
9
|
+
declare function ViteReactSSG(App: ReactNode, fn?: (context: ViteReactSSGContext<false>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<false>>;
|
|
10
|
+
|
|
11
|
+
export { ViteReactSSG, ViteReactSSGClientOptions, ViteReactSSGContext };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.d734eb79.mjs';
|
|
3
|
+
export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.d734eb79.mjs';
|
|
4
|
+
export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.faf3855a.mjs';
|
|
5
|
+
import 'critters';
|
|
6
|
+
import 'react-router-dom';
|
|
7
|
+
import 'react-helmet-async';
|
|
8
|
+
|
|
9
|
+
declare function ViteReactSSG(App: ReactNode, fn?: (context: ViteReactSSGContext<false>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<false>>;
|
|
10
|
+
|
|
11
|
+
export { ViteReactSSG, ViteReactSSGClientOptions, ViteReactSSGContext };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.d734eb79.js';
|
|
3
|
+
export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.d734eb79.js';
|
|
4
|
+
export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.faf3855a.js';
|
|
5
|
+
import 'critters';
|
|
6
|
+
import 'react-router-dom';
|
|
7
|
+
import 'react-helmet-async';
|
|
8
|
+
|
|
9
|
+
declare function ViteReactSSG(App: ReactNode, fn?: (context: ViteReactSSGContext<false>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<false>>;
|
|
10
|
+
|
|
11
|
+
export { ViteReactSSG, ViteReactSSGClientOptions, ViteReactSSGContext };
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { createRoot, hydrateRoot } from 'react-dom/client';
|
|
2
|
+
import { HelmetProvider } from 'react-helmet-async';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { d as documentReady } from '../shared/vite-react-ssg.8cdb31f1.mjs';
|
|
5
|
+
export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.8cdb31f1.mjs';
|
|
6
|
+
import { d as deserializeState } from '../shared/vite-react-ssg.a009fbf1.mjs';
|
|
7
|
+
|
|
8
|
+
function ViteReactSSG(App, fn, options = {}) {
|
|
9
|
+
const {
|
|
10
|
+
transformState,
|
|
11
|
+
rootContainer = "#root",
|
|
12
|
+
ssrWhenDev,
|
|
13
|
+
getStyleCollector = null
|
|
14
|
+
} = options;
|
|
15
|
+
if (process.env.NODE_ENV === "development" && ssrWhenDev !== void 0)
|
|
16
|
+
console.warn("[vite-react-ssg] `ssrWhenDev` option is no longer needed. If you want to use csr, just replace `vite-react-ssg dev` with `vite`.");
|
|
17
|
+
const isClient = typeof window !== "undefined";
|
|
18
|
+
async function createRoot$1(client = false, routePath) {
|
|
19
|
+
const appRenderCallbacks = [];
|
|
20
|
+
const onSSRAppRendered = client ? () => {
|
|
21
|
+
} : (cb) => appRenderCallbacks.push(cb);
|
|
22
|
+
const triggerOnSSRAppRendered = () => {
|
|
23
|
+
return Promise.all(appRenderCallbacks.map((cb) => cb()));
|
|
24
|
+
};
|
|
25
|
+
const context = {
|
|
26
|
+
isClient,
|
|
27
|
+
onSSRAppRendered,
|
|
28
|
+
triggerOnSSRAppRendered,
|
|
29
|
+
initialState: {},
|
|
30
|
+
transformState,
|
|
31
|
+
routePath,
|
|
32
|
+
getStyleCollector,
|
|
33
|
+
routes: void 0,
|
|
34
|
+
routerOptions: void 0,
|
|
35
|
+
base: "/",
|
|
36
|
+
app: App
|
|
37
|
+
};
|
|
38
|
+
if (client) {
|
|
39
|
+
await documentReady();
|
|
40
|
+
context.initialState = transformState?.(window.__INITIAL_STATE__ || {}) || deserializeState(window.__INITIAL_STATE__);
|
|
41
|
+
}
|
|
42
|
+
await fn?.(context);
|
|
43
|
+
const initialState = context.initialState;
|
|
44
|
+
return {
|
|
45
|
+
...context,
|
|
46
|
+
initialState
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
if (isClient) {
|
|
50
|
+
(async () => {
|
|
51
|
+
const container = typeof rootContainer === "string" ? document.querySelector(rootContainer) : rootContainer;
|
|
52
|
+
if (!container) {
|
|
53
|
+
if (typeof $jsdom === "undefined")
|
|
54
|
+
console.warn("[vite-react-ssg] Root container not found.");
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
await createRoot$1(true);
|
|
58
|
+
const app = /* @__PURE__ */ React.createElement(HelmetProvider, null, App);
|
|
59
|
+
const isSSR = document.querySelector("[data-server-rendered=true]") !== null;
|
|
60
|
+
if (!isSSR && process.env.NODE_ENV === "development") {
|
|
61
|
+
const root = createRoot(container);
|
|
62
|
+
React.startTransition(() => {
|
|
63
|
+
root.render(app);
|
|
64
|
+
});
|
|
65
|
+
} else {
|
|
66
|
+
React.startTransition(() => {
|
|
67
|
+
hydrateRoot(container, app);
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
})();
|
|
71
|
+
}
|
|
72
|
+
return createRoot$1;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export { ViteReactSSG };
|
package/dist/index.cjs
CHANGED
|
@@ -4,44 +4,13 @@ const React = require('react');
|
|
|
4
4
|
const client = require('react-dom/client');
|
|
5
5
|
const reactHelmetAsync = require('react-helmet-async');
|
|
6
6
|
const reactRouterDom = require('react-router-dom');
|
|
7
|
-
const
|
|
7
|
+
const ClientOnly = require('./shared/vite-react-ssg.c639b3fe.cjs');
|
|
8
|
+
const state = require('./shared/vite-react-ssg.e6991406.cjs');
|
|
8
9
|
|
|
9
10
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
10
11
|
|
|
11
12
|
const React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
12
13
|
|
|
13
|
-
function documentReady(_passThrough) {
|
|
14
|
-
if (document.readyState === "loading") {
|
|
15
|
-
return new Promise((resolve) => {
|
|
16
|
-
document.addEventListener("DOMContentLoaded", () => resolve(_passThrough));
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
return Promise.resolve(_passThrough);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
function useIsClient() {
|
|
23
|
-
const [isBrowser, setIsBrowser] = React.useState(false);
|
|
24
|
-
React.useEffect(() => {
|
|
25
|
-
setIsBrowser(true);
|
|
26
|
-
}, []);
|
|
27
|
-
return isBrowser;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
function ClientOnly({
|
|
31
|
-
children,
|
|
32
|
-
fallback
|
|
33
|
-
}) {
|
|
34
|
-
const isBrowser = useIsClient();
|
|
35
|
-
if (isBrowser) {
|
|
36
|
-
if (typeof children !== "function" && process.env.NODE_ENV === "development") {
|
|
37
|
-
throw new Error(`vite-react-ssg error: The children of <ClientOnly> must be a "render function", e.g. <ClientOnly>{() => <span>{window.location.href}</span>}</ClientOnly>.
|
|
38
|
-
Current type: ${React.isValidElement(children) ? "React element" : typeof children}`);
|
|
39
|
-
}
|
|
40
|
-
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children?.());
|
|
41
|
-
}
|
|
42
|
-
return fallback ?? null;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
14
|
const Link = React.forwardRef((props, ref) => {
|
|
46
15
|
const {
|
|
47
16
|
replace,
|
|
@@ -109,11 +78,13 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
|
|
|
109
78
|
const {
|
|
110
79
|
transformState,
|
|
111
80
|
rootContainer = "#root",
|
|
112
|
-
ssrWhenDev
|
|
81
|
+
ssrWhenDev,
|
|
113
82
|
getStyleCollector = null
|
|
114
83
|
} = options;
|
|
84
|
+
if (process.env.NODE_ENV === "development" && ssrWhenDev !== void 0)
|
|
85
|
+
console.warn("[vite-react-ssg] `ssrWhenDev` option is no longer needed. If you want to use csr, just replace `vite-react-ssg dev` with `vite`.");
|
|
115
86
|
const isClient = typeof window !== "undefined";
|
|
116
|
-
const BASE_URL =
|
|
87
|
+
const BASE_URL = routerOptions.basename ?? "/";
|
|
117
88
|
async function createRoot(client = false, routePath) {
|
|
118
89
|
const browserRouter = client ? reactRouterDom.createBrowserRouter(routerOptions.routes, { basename: BASE_URL }) : void 0;
|
|
119
90
|
const appRenderCallbacks = [];
|
|
@@ -136,14 +107,10 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
|
|
|
136
107
|
getStyleCollector
|
|
137
108
|
};
|
|
138
109
|
if (client) {
|
|
139
|
-
await documentReady();
|
|
140
|
-
context.initialState = transformState?.(window.__INITIAL_STATE__ || {}) ||
|
|
110
|
+
await ClientOnly.documentReady();
|
|
111
|
+
context.initialState = transformState?.(window.__INITIAL_STATE__ || {}) || state.deserializeState(window.__INITIAL_STATE__);
|
|
141
112
|
}
|
|
142
113
|
await fn?.(context);
|
|
143
|
-
if (!client) {
|
|
144
|
-
context.routePath ?? "/";
|
|
145
|
-
context.initialState = {};
|
|
146
|
-
}
|
|
147
114
|
const initialState = context.initialState;
|
|
148
115
|
return {
|
|
149
116
|
...context,
|
|
@@ -153,6 +120,11 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
|
|
|
153
120
|
if (isClient) {
|
|
154
121
|
(async () => {
|
|
155
122
|
const container = typeof rootContainer === "string" ? document.querySelector(rootContainer) : rootContainer;
|
|
123
|
+
if (!container) {
|
|
124
|
+
if (typeof $jsdom === "undefined")
|
|
125
|
+
console.warn("[vite-react-ssg] Root container not found.");
|
|
126
|
+
return;
|
|
127
|
+
}
|
|
156
128
|
const lazeMatches = reactRouterDom.matchRoutes(routerOptions.routes, window.location, BASE_URL)?.filter(
|
|
157
129
|
(m) => m.route.lazy
|
|
158
130
|
);
|
|
@@ -165,8 +137,9 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
|
|
|
165
137
|
);
|
|
166
138
|
}
|
|
167
139
|
const { router } = await createRoot(true);
|
|
168
|
-
const app = /* @__PURE__ */ React__default.createElement(reactHelmetAsync.HelmetProvider, null, /* @__PURE__ */ React__default.createElement(
|
|
169
|
-
|
|
140
|
+
const app = /* @__PURE__ */ React__default.createElement(reactHelmetAsync.HelmetProvider, null, /* @__PURE__ */ React__default.createElement(reactRouterDom.RouterProvider, { router }));
|
|
141
|
+
const isSSR = document.querySelector("[data-server-rendered=true]") !== null;
|
|
142
|
+
if (!isSSR && process.env.NODE_ENV === "development") {
|
|
170
143
|
const root = client.createRoot(container);
|
|
171
144
|
React__default.startTransition(() => {
|
|
172
145
|
root.render(app);
|
|
@@ -181,8 +154,8 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
|
|
|
181
154
|
return createRoot;
|
|
182
155
|
}
|
|
183
156
|
|
|
184
|
-
exports.
|
|
185
|
-
exports.
|
|
157
|
+
exports.ClientOnly = ClientOnly.ClientOnly;
|
|
158
|
+
exports.Head = ClientOnly.Head;
|
|
186
159
|
exports.Link = Link;
|
|
187
160
|
exports.NavLink = NavLink;
|
|
188
161
|
exports.ViteReactSSG = ViteReactSSG;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,24 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export { I as IndexRouteRecord, N as NonIndexRouteRecord,
|
|
3
|
-
|
|
4
|
-
import
|
|
1
|
+
import { c as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.d734eb79.cjs';
|
|
2
|
+
export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.d734eb79.cjs';
|
|
3
|
+
export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.faf3855a.cjs';
|
|
4
|
+
import React from 'react';
|
|
5
5
|
import { LinkProps, NavLinkProps } from 'react-router-dom';
|
|
6
6
|
import 'critters';
|
|
7
|
-
|
|
8
|
-
type Props = HelmetProps & {
|
|
9
|
-
children: ReactNode;
|
|
10
|
-
};
|
|
11
|
-
declare function Head(props: Props): JSX.Element;
|
|
12
|
-
|
|
13
|
-
interface ClientOnlyProps {
|
|
14
|
-
children?: () => JSX.Element;
|
|
15
|
-
fallback?: JSX.Element;
|
|
16
|
-
}
|
|
17
|
-
declare function ClientOnly({ children, fallback, }: ClientOnlyProps): JSX.Element | null;
|
|
7
|
+
import 'react-helmet-async';
|
|
18
8
|
|
|
19
9
|
declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
20
10
|
declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
21
11
|
|
|
22
12
|
declare function ViteReactSSG(routerOptions: RouterOptions, fn?: (context: ViteReactSSGContext<true>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<true>>;
|
|
23
13
|
|
|
24
|
-
export {
|
|
14
|
+
export { Link, NavLink, RouterOptions, ViteReactSSG, ViteReactSSGClientOptions, ViteReactSSGContext };
|
package/dist/index.d.mts
CHANGED
|
@@ -1,24 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export { I as IndexRouteRecord, N as NonIndexRouteRecord,
|
|
3
|
-
|
|
4
|
-
import
|
|
1
|
+
import { c as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.d734eb79.mjs';
|
|
2
|
+
export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.d734eb79.mjs';
|
|
3
|
+
export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.faf3855a.mjs';
|
|
4
|
+
import React from 'react';
|
|
5
5
|
import { LinkProps, NavLinkProps } from 'react-router-dom';
|
|
6
6
|
import 'critters';
|
|
7
|
-
|
|
8
|
-
type Props = HelmetProps & {
|
|
9
|
-
children: ReactNode;
|
|
10
|
-
};
|
|
11
|
-
declare function Head(props: Props): JSX.Element;
|
|
12
|
-
|
|
13
|
-
interface ClientOnlyProps {
|
|
14
|
-
children?: () => JSX.Element;
|
|
15
|
-
fallback?: JSX.Element;
|
|
16
|
-
}
|
|
17
|
-
declare function ClientOnly({ children, fallback, }: ClientOnlyProps): JSX.Element | null;
|
|
7
|
+
import 'react-helmet-async';
|
|
18
8
|
|
|
19
9
|
declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
20
10
|
declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
21
11
|
|
|
22
12
|
declare function ViteReactSSG(routerOptions: RouterOptions, fn?: (context: ViteReactSSGContext<true>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<true>>;
|
|
23
13
|
|
|
24
|
-
export {
|
|
14
|
+
export { Link, NavLink, RouterOptions, ViteReactSSG, ViteReactSSGClientOptions, ViteReactSSGContext };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,24 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export { I as IndexRouteRecord, N as NonIndexRouteRecord,
|
|
3
|
-
|
|
4
|
-
import
|
|
1
|
+
import { c as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.d734eb79.js';
|
|
2
|
+
export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.d734eb79.js';
|
|
3
|
+
export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.faf3855a.js';
|
|
4
|
+
import React from 'react';
|
|
5
5
|
import { LinkProps, NavLinkProps } from 'react-router-dom';
|
|
6
6
|
import 'critters';
|
|
7
|
-
|
|
8
|
-
type Props = HelmetProps & {
|
|
9
|
-
children: ReactNode;
|
|
10
|
-
};
|
|
11
|
-
declare function Head(props: Props): JSX.Element;
|
|
12
|
-
|
|
13
|
-
interface ClientOnlyProps {
|
|
14
|
-
children?: () => JSX.Element;
|
|
15
|
-
fallback?: JSX.Element;
|
|
16
|
-
}
|
|
17
|
-
declare function ClientOnly({ children, fallback, }: ClientOnlyProps): JSX.Element | null;
|
|
7
|
+
import 'react-helmet-async';
|
|
18
8
|
|
|
19
9
|
declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
20
10
|
declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
21
11
|
|
|
22
12
|
declare function ViteReactSSG(routerOptions: RouterOptions, fn?: (context: ViteReactSSGContext<true>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<true>>;
|
|
23
13
|
|
|
24
|
-
export {
|
|
14
|
+
export { Link, NavLink, RouterOptions, ViteReactSSG, ViteReactSSGClientOptions, ViteReactSSGContext };
|
package/dist/index.mjs
CHANGED
|
@@ -1,41 +1,10 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
2
|
import { createRoot, hydrateRoot } from 'react-dom/client';
|
|
3
3
|
import { HelmetProvider } from 'react-helmet-async';
|
|
4
4
|
import { useLinkClickHandler, Link as Link$1, NavLink as NavLink$1, matchRoutes, createBrowserRouter, RouterProvider } from 'react-router-dom';
|
|
5
|
-
import { d as
|
|
6
|
-
export { H as Head } from './shared/vite-react-ssg.
|
|
7
|
-
|
|
8
|
-
function documentReady(_passThrough) {
|
|
9
|
-
if (document.readyState === "loading") {
|
|
10
|
-
return new Promise((resolve) => {
|
|
11
|
-
document.addEventListener("DOMContentLoaded", () => resolve(_passThrough));
|
|
12
|
-
});
|
|
13
|
-
}
|
|
14
|
-
return Promise.resolve(_passThrough);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
function useIsClient() {
|
|
18
|
-
const [isBrowser, setIsBrowser] = useState(false);
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
setIsBrowser(true);
|
|
21
|
-
}, []);
|
|
22
|
-
return isBrowser;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
function ClientOnly({
|
|
26
|
-
children,
|
|
27
|
-
fallback
|
|
28
|
-
}) {
|
|
29
|
-
const isBrowser = useIsClient();
|
|
30
|
-
if (isBrowser) {
|
|
31
|
-
if (typeof children !== "function" && process.env.NODE_ENV === "development") {
|
|
32
|
-
throw new Error(`vite-react-ssg error: The children of <ClientOnly> must be a "render function", e.g. <ClientOnly>{() => <span>{window.location.href}</span>}</ClientOnly>.
|
|
33
|
-
Current type: ${isValidElement(children) ? "React element" : typeof children}`);
|
|
34
|
-
}
|
|
35
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, children?.());
|
|
36
|
-
}
|
|
37
|
-
return fallback ?? null;
|
|
38
|
-
}
|
|
5
|
+
import { d as documentReady } from './shared/vite-react-ssg.8cdb31f1.mjs';
|
|
6
|
+
export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.8cdb31f1.mjs';
|
|
7
|
+
import { d as deserializeState } from './shared/vite-react-ssg.a009fbf1.mjs';
|
|
39
8
|
|
|
40
9
|
const Link = forwardRef((props, ref) => {
|
|
41
10
|
const {
|
|
@@ -104,11 +73,13 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
|
|
|
104
73
|
const {
|
|
105
74
|
transformState,
|
|
106
75
|
rootContainer = "#root",
|
|
107
|
-
ssrWhenDev
|
|
76
|
+
ssrWhenDev,
|
|
108
77
|
getStyleCollector = null
|
|
109
78
|
} = options;
|
|
79
|
+
if (process.env.NODE_ENV === "development" && ssrWhenDev !== void 0)
|
|
80
|
+
console.warn("[vite-react-ssg] `ssrWhenDev` option is no longer needed. If you want to use csr, just replace `vite-react-ssg dev` with `vite`.");
|
|
110
81
|
const isClient = typeof window !== "undefined";
|
|
111
|
-
const BASE_URL =
|
|
82
|
+
const BASE_URL = routerOptions.basename ?? "/";
|
|
112
83
|
async function createRoot$1(client = false, routePath) {
|
|
113
84
|
const browserRouter = client ? createBrowserRouter(routerOptions.routes, { basename: BASE_URL }) : void 0;
|
|
114
85
|
const appRenderCallbacks = [];
|
|
@@ -135,10 +106,6 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
|
|
|
135
106
|
context.initialState = transformState?.(window.__INITIAL_STATE__ || {}) || deserializeState(window.__INITIAL_STATE__);
|
|
136
107
|
}
|
|
137
108
|
await fn?.(context);
|
|
138
|
-
if (!client) {
|
|
139
|
-
context.routePath ?? "/";
|
|
140
|
-
context.initialState = {};
|
|
141
|
-
}
|
|
142
109
|
const initialState = context.initialState;
|
|
143
110
|
return {
|
|
144
111
|
...context,
|
|
@@ -148,6 +115,11 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
|
|
|
148
115
|
if (isClient) {
|
|
149
116
|
(async () => {
|
|
150
117
|
const container = typeof rootContainer === "string" ? document.querySelector(rootContainer) : rootContainer;
|
|
118
|
+
if (!container) {
|
|
119
|
+
if (typeof $jsdom === "undefined")
|
|
120
|
+
console.warn("[vite-react-ssg] Root container not found.");
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
151
123
|
const lazeMatches = matchRoutes(routerOptions.routes, window.location, BASE_URL)?.filter(
|
|
152
124
|
(m) => m.route.lazy
|
|
153
125
|
);
|
|
@@ -160,8 +132,9 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
|
|
|
160
132
|
);
|
|
161
133
|
}
|
|
162
134
|
const { router } = await createRoot$1(true);
|
|
163
|
-
const app = /* @__PURE__ */ React.createElement(HelmetProvider, null, /* @__PURE__ */ React.createElement(
|
|
164
|
-
|
|
135
|
+
const app = /* @__PURE__ */ React.createElement(HelmetProvider, null, /* @__PURE__ */ React.createElement(RouterProvider, { router }));
|
|
136
|
+
const isSSR = document.querySelector("[data-server-rendered=true]") !== null;
|
|
137
|
+
if (!isSSR && process.env.NODE_ENV === "development") {
|
|
165
138
|
const root = createRoot(container);
|
|
166
139
|
React.startTransition(() => {
|
|
167
140
|
root.render(app);
|
|
@@ -176,4 +149,4 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
|
|
|
176
149
|
return createRoot$1;
|
|
177
150
|
}
|
|
178
151
|
|
|
179
|
-
export {
|
|
152
|
+
export { Link, NavLink, ViteReactSSG };
|
package/dist/node/cli.cjs
CHANGED
|
@@ -10,28 +10,15 @@ require('node:module');
|
|
|
10
10
|
require('fs-extra');
|
|
11
11
|
require('vite');
|
|
12
12
|
require('jsdom');
|
|
13
|
-
require('../shared/vite-react-ssg.
|
|
13
|
+
require('../shared/vite-react-ssg.e6991406.cjs');
|
|
14
|
+
require('node:fs');
|
|
14
15
|
require('react');
|
|
15
16
|
require('react-helmet-async');
|
|
16
|
-
require('node:fs');
|
|
17
|
-
require('react-router-dom/server.js');
|
|
18
17
|
require('node:stream');
|
|
19
18
|
require('react-dom/server');
|
|
20
19
|
require('node:https');
|
|
21
20
|
require('express');
|
|
22
|
-
require('
|
|
23
|
-
require('tty');
|
|
24
|
-
require('util');
|
|
25
|
-
require('os');
|
|
26
|
-
require('child_process');
|
|
27
|
-
require('path');
|
|
28
|
-
require('assert');
|
|
29
|
-
require('events');
|
|
30
|
-
require('crypto');
|
|
31
|
-
require('url');
|
|
32
|
-
require('net');
|
|
33
|
-
require('http');
|
|
34
|
-
require('punycode');
|
|
21
|
+
require('@childrentime/devcert');
|
|
35
22
|
|
|
36
23
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
37
24
|
|