vite-react-ssg 0.5.0 → 0.5.1

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 (15) hide show
  1. package/README.md +82 -42
  2. package/dist/index.cjs +6 -2
  3. package/dist/index.d.cts +2 -2
  4. package/dist/index.d.mts +2 -2
  5. package/dist/index.d.ts +2 -2
  6. package/dist/index.mjs +6 -2
  7. package/dist/node.cjs +19 -10
  8. package/dist/node.d.cts +1 -1
  9. package/dist/node.d.mts +1 -1
  10. package/dist/node.d.ts +1 -1
  11. package/dist/node.mjs +19 -10
  12. package/dist/shared/{vite-react-ssg.d5f23f74.d.cts → vite-react-ssg.91f86102.d.cts} +1 -0
  13. package/dist/shared/{vite-react-ssg.d5f23f74.d.mts → vite-react-ssg.91f86102.d.mts} +1 -0
  14. package/dist/shared/{vite-react-ssg.d5f23f74.d.ts → vite-react-ssg.91f86102.d.ts} +1 -0
  15. package/package.json +5 -5
package/README.md CHANGED
@@ -7,22 +7,24 @@ See demo(also document): [docs](https://vite-react-ssg.netlify.app/)
7
7
  [![NPM version](https://img.shields.io/npm/v/vite-react-ssg?color=a1b858&label=)](https://www.npmjs.com/package/vite-react-ssg)
8
8
 
9
9
  # Table of contents
10
- * [Usage](#usage)
11
- * [Extra route options](#extra-route-options)
12
- * [`entry`](#entry)
13
- * [`getStaticPaths`](#getstaticpaths)
14
- * [lazy](#lazy)
15
- * [`<ClientOnly/>`](#clientonly)
16
- * [Document head](#document-head)
17
- * [Reactive head](#reactive-head)
18
- * [CSS in JS](#css-in-js)
19
- * [Critical CSS](#critical-css)
20
- * [Configuration](#configuration)
21
- * [Custom Routes to Render](#custom-routes-to-render)
22
- * [Https](#https)
23
- * [Use CSR in development environment](#use-csr-in-development-environment)
24
- * [Roadmap](#roadmap)
25
- * [Credits](#credits)
10
+
11
+ - [Usage](#usage)
12
+ - [Extra route options](#extra-route-options)
13
+ - [`entry`](#entry)
14
+ - [`getStaticPaths`](#getstaticpaths)
15
+ - [lazy](#lazy)
16
+ - [`<ClientOnly/>`](#clientonly)
17
+ - [Document head](#document-head)
18
+ - [Reactive head](#reactive-head)
19
+ - [Public Base Path](#public-base-path)
20
+ - [CSS in JS](#css-in-js)
21
+ - [Critical CSS](#critical-css)
22
+ - [Configuration](#configuration)
23
+ - [Custom Routes to Render](#custom-routes-to-render)
24
+ - [Https](#https)
25
+ - [Use CSR in development environment](#use-csr-in-development-environment)
26
+ - [Roadmap](#roadmap)
27
+ - [Credits](#credits)
26
28
 
27
29
  ## Usage
28
30
 
@@ -34,10 +36,11 @@ See demo(also document): [docs](https://vite-react-ssg.netlify.app/)
34
36
  // package.json
35
37
  {
36
38
  "scripts": {
37
- - "dev": "vite",
38
39
  - "build": "vite build"
39
- + "dev": "vite-react-ssg dev",
40
40
  + "build": "vite-react-ssg build"
41
+ // If you need ssr when dev
42
+ - "dev": "vite",
43
+ + "dev": "vite-react-ssg dev",
41
44
 
42
45
  // OR if you want to use another vite config file
43
46
  + "build": "vite-react-ssg build -c another-vite.config.ts"
@@ -102,11 +105,13 @@ export const routes: RouteRecord[] = [
102
105
  The RouteObject of vite-react-ssg is based on react-router, and vite-react-ssg receives some additional properties.
103
106
 
104
107
  #### `entry`
108
+
105
109
  Used to obtain static resources.If you introduce static resources (such as css files) in that route and use lazy loading (such as React.lazy or route.lazy), you should set the entry field. It should be the path from root to the target file.
106
110
 
107
111
  eg: `src/pages/page1.tsx`
108
112
 
109
113
  #### `getStaticPaths`
114
+
110
115
  The `getStaticPaths()` function should return an array of path
111
116
  to determine which paths will be pre-rendered by vite-react-ssg.
112
117
 
@@ -123,6 +128,7 @@ const route = {
123
128
  ```
124
129
 
125
130
  ## lazy
131
+
126
132
  These options work well with the `lazy` field.
127
133
 
128
134
  ```tsx
@@ -139,6 +145,7 @@ export function getStaticPaths() {
139
145
 
140
146
  export const entry = 'src/pages/[page].tsx'
141
147
  ```
148
+
142
149
  ```ts
143
150
  // src/routes.ts
144
151
  const routes = [
@@ -179,14 +186,16 @@ You can use `<Head/>` to manage all of your changes to the document head. It tak
179
186
  ```tsx
180
187
  import { Head } from 'vite-react-ssg'
181
188
 
182
- const MyHead = () => (
183
- <Head>
184
- <meta property="og:description" content="My custom description" />
185
- <meta charSet="utf-8" />
186
- <title>My Title</title>
187
- <link rel="canonical" href="http://mysite.com/example" />
188
- </Head>
189
- )
189
+ function MyHead() {
190
+ return (
191
+ <Head>
192
+ <meta property="og:description" content="My custom description" />
193
+ <meta charSet="utf-8" />
194
+ <title>My Title</title>
195
+ <link rel="canonical" href="http://mysite.com/example" />
196
+ </Head>
197
+ )
198
+ }
190
199
  ```
191
200
 
192
201
  Nested or latter components will override duplicate usages:
@@ -194,23 +203,26 @@ Nested or latter components will override duplicate usages:
194
203
  ```tsx
195
204
  import { Head } from 'vite-react-ssg'
196
205
 
197
- const MyHead = () => (
198
- <parent>
199
- <Head>
200
- <title>My Title</title>
201
- <meta name="description" content="Helmet application" />
202
- </Head>
203
- <child>
206
+ function MyHead() {
207
+ return (
208
+ <parent>
204
209
  <Head>
205
- <title>Nested Title</title>
206
- <meta name="description" content="Nested component" />
210
+ <title>My Title</title>
211
+ <meta name="description" content="Helmet application" />
207
212
  </Head>
208
- </child>
209
- </parent>
210
- )
213
+ <child>
214
+ <Head>
215
+ <title>Nested Title</title>
216
+ <meta name="description" content="Nested component" />
217
+ </Head>
218
+ </child>
219
+ </parent>
220
+ )
221
+ }
211
222
  ```
212
223
 
213
224
  Outputs:
225
+
214
226
  ```html
215
227
  <head>
216
228
  <title>Nested Title</title>
@@ -239,6 +251,28 @@ export default function MyHead() {
239
251
  }
240
252
  ```
241
253
 
254
+ ## Public Base Path
255
+
256
+ Just set `base` in vite.config.ts like:
257
+
258
+ ```ts
259
+ // vite.config.ts
260
+ import { defineConfig } from 'vite'
261
+ import react from '@vitejs/plugin-react-swc'
262
+
263
+ // https://vitejs.dev/config/
264
+ export default defineConfig({
265
+ plugins: [react()],
266
+ base: '/base-path',
267
+ })
268
+ ```
269
+
270
+ Vite React SSG will give it to the react-router's `basename`.
271
+
272
+ See: [react-router's create-browser-router](https://reactrouter.com/en/main/routers/create-browser-router#basename)
273
+
274
+ [Example](./examples/lazy-pages/vite.config.ts)
275
+
242
276
  ## CSS in JS
243
277
 
244
278
  Use the `getStyleCollector` option to specify an SSR/SSG style collector. Currently only supports `styled-components`.
@@ -252,14 +286,15 @@ import './index.css'
252
286
  export const createRoot = ViteReactSSG(
253
287
  { routes },
254
288
  () => { },
255
- { getStyleCollector: getStyledComponentsCollector })
289
+ { getStyleCollector: getStyledComponentsCollector }
290
+ )
256
291
  ```
257
292
 
258
293
  You can provide your own by looking at the [implementation](./src/style-collectors/) of any of the existing collectors.
259
294
 
260
295
  ## Critical CSS
261
296
 
262
- Vite SSG has built-in support for generating [Critical CSS](https://web.dev/extract-critical-css/) inlined in the HTML via the [`critters`](https://github.com/GoogleChromeLabs/critters) package.
297
+ Vite React SSG has built-in support for generating [Critical CSS](https://web.dev/extract-critical-css/) inlined in the HTML via the [`critters`](https://github.com/GoogleChromeLabs/critters) package.
263
298
  Install it with:
264
299
 
265
300
  ```bash
@@ -402,6 +437,7 @@ interface ViteReactSSGOptions {
402
437
  concurrency?: number
403
438
  }
404
439
  ```
440
+
405
441
  See [src/types.ts](./src/types.ts). for more options available.
406
442
 
407
443
  ### Custom Routes to Render
@@ -421,6 +457,7 @@ export default {
421
457
  },
422
458
  }
423
459
  ```
460
+
424
461
  ```js
425
462
  // vite.config.js
426
463
 
@@ -429,7 +466,7 @@ export default {
429
466
  ssgOptions: {
430
467
  includedRoutes(paths, routes) {
431
468
  // use original route records
432
- return routes.flatMap((route) => {
469
+ return routes.flatMap(route => {
433
470
  return route.name === 'Blog'
434
471
  ? myBlogSlugs.map(slug => `/blog/${slug}`)
435
472
  : route.path
@@ -454,6 +491,7 @@ export default defineConfig({
454
491
  ## Use CSR in development environment
455
492
 
456
493
  If you want to use CSR during development, just:
494
+
457
495
  ```ts
458
496
  // src/main.ts
459
497
  import { ViteReactSSG } from 'vite-react-ssg'
@@ -481,6 +519,7 @@ export const createRoot = ViteReactSSG(
481
519
  }
482
520
  }
483
521
  ```
522
+
484
523
  Then, you can start the application with CSR in the development environment.
485
524
 
486
525
  ## Roadmap
@@ -493,8 +532,9 @@ Then, you can start the application with CSR in the development environment.
493
532
  - [ ] Initial State
494
533
 
495
534
  ## Credits
535
+
496
536
  This project inspired by [vite-ssg](https://github.com/antfu/vite-ssg), thanks to [@antfu](https://github.com/antfu) for his awesome work.
497
537
 
498
538
  ## License
499
539
 
500
- [MIT](./LICENSE) License © 2023 [Riri](https://github.com/Daydreamer-riri)
540
+ [MIT](./LICENSE) License © 2023 [Riri](https://github.com/Daydreamer-riri)
package/dist/index.cjs CHANGED
@@ -72,6 +72,7 @@ const Link = React.forwardRef((props, ref) => {
72
72
  }
73
73
  return /* @__PURE__ */ React__default.createElement(reactRouterDom.Link, { ...props, ref, onClick: handleClick });
74
74
  });
75
+ Link.displayName = "Link";
75
76
  const NavLink = React.forwardRef((props, ref) => {
76
77
  const {
77
78
  replace,
@@ -102,6 +103,7 @@ const NavLink = React.forwardRef((props, ref) => {
102
103
  }
103
104
  return /* @__PURE__ */ React__default.createElement(reactRouterDom.NavLink, { ...props, ref, onClick: handleClick });
104
105
  });
106
+ NavLink.displayName = "NavLink";
105
107
 
106
108
  function ViteReactSSG(routerOptions, fn, options = {}) {
107
109
  const {
@@ -111,8 +113,9 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
111
113
  getStyleCollector = null
112
114
  } = options;
113
115
  const isClient = typeof window !== "undefined";
116
+ const BASE_URL = undefined.BASE_URL;
114
117
  async function createRoot(client = false, routePath) {
115
- const browserRouter = client ? reactRouterDom.createBrowserRouter(routerOptions.routes) : void 0;
118
+ const browserRouter = client ? reactRouterDom.createBrowserRouter(routerOptions.routes, { basename: BASE_URL }) : void 0;
116
119
  const appRenderCallbacks = [];
117
120
  const onSSRAppRendered = client ? () => {
118
121
  } : (cb) => appRenderCallbacks.push(cb);
@@ -129,6 +132,7 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
129
132
  initialState: {},
130
133
  transformState,
131
134
  routePath,
135
+ base: BASE_URL,
132
136
  getStyleCollector
133
137
  };
134
138
  if (client) {
@@ -149,7 +153,7 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
149
153
  if (isClient) {
150
154
  (async () => {
151
155
  const container = typeof rootContainer === "string" ? document.querySelector(rootContainer) : rootContainer;
152
- const lazeMatches = reactRouterDom.matchRoutes(routerOptions.routes, window.location)?.filter(
156
+ const lazeMatches = reactRouterDom.matchRoutes(routerOptions.routes, window.location, BASE_URL)?.filter(
153
157
  (m) => m.route.lazy
154
158
  );
155
159
  if (lazeMatches && lazeMatches?.length > 0) {
package/dist/index.d.cts CHANGED
@@ -1,5 +1,5 @@
1
- import { R as RouterOptions, a as ViteReactSSGContext, b as ViteReactSSGClientOptions } from './shared/vite-react-ssg.d5f23f74.cjs';
2
- export { I as IndexRouteRecord, N as NonIndexRouteRecord, c as RouteRecord, S as StyleCollector, V as ViteReactSSGOptions } from './shared/vite-react-ssg.d5f23f74.cjs';
1
+ import { R as RouterOptions, a as ViteReactSSGContext, b as ViteReactSSGClientOptions } from './shared/vite-react-ssg.91f86102.cjs';
2
+ export { I as IndexRouteRecord, N as NonIndexRouteRecord, c as RouteRecord, S as StyleCollector, V as ViteReactSSGOptions } from './shared/vite-react-ssg.91f86102.cjs';
3
3
  import React, { ReactNode } from 'react';
4
4
  import { HelmetProps } from 'react-helmet-async';
5
5
  import { LinkProps, NavLinkProps } from 'react-router-dom';
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
- import { R as RouterOptions, a as ViteReactSSGContext, b as ViteReactSSGClientOptions } from './shared/vite-react-ssg.d5f23f74.mjs';
2
- export { I as IndexRouteRecord, N as NonIndexRouteRecord, c as RouteRecord, S as StyleCollector, V as ViteReactSSGOptions } from './shared/vite-react-ssg.d5f23f74.mjs';
1
+ import { R as RouterOptions, a as ViteReactSSGContext, b as ViteReactSSGClientOptions } from './shared/vite-react-ssg.91f86102.mjs';
2
+ export { I as IndexRouteRecord, N as NonIndexRouteRecord, c as RouteRecord, S as StyleCollector, V as ViteReactSSGOptions } from './shared/vite-react-ssg.91f86102.mjs';
3
3
  import React, { ReactNode } from 'react';
4
4
  import { HelmetProps } from 'react-helmet-async';
5
5
  import { LinkProps, NavLinkProps } from 'react-router-dom';
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { R as RouterOptions, a as ViteReactSSGContext, b as ViteReactSSGClientOptions } from './shared/vite-react-ssg.d5f23f74.js';
2
- export { I as IndexRouteRecord, N as NonIndexRouteRecord, c as RouteRecord, S as StyleCollector, V as ViteReactSSGOptions } from './shared/vite-react-ssg.d5f23f74.js';
1
+ import { R as RouterOptions, a as ViteReactSSGContext, b as ViteReactSSGClientOptions } from './shared/vite-react-ssg.91f86102.js';
2
+ export { I as IndexRouteRecord, N as NonIndexRouteRecord, c as RouteRecord, S as StyleCollector, V as ViteReactSSGOptions } from './shared/vite-react-ssg.91f86102.js';
3
3
  import React, { ReactNode } from 'react';
4
4
  import { HelmetProps } from 'react-helmet-async';
5
5
  import { LinkProps, NavLinkProps } from 'react-router-dom';
package/dist/index.mjs CHANGED
@@ -67,6 +67,7 @@ const Link = forwardRef((props, ref) => {
67
67
  }
68
68
  return /* @__PURE__ */ React.createElement(Link$1, { ...props, ref, onClick: handleClick });
69
69
  });
70
+ Link.displayName = "Link";
70
71
  const NavLink = forwardRef((props, ref) => {
71
72
  const {
72
73
  replace,
@@ -97,6 +98,7 @@ const NavLink = forwardRef((props, ref) => {
97
98
  }
98
99
  return /* @__PURE__ */ React.createElement(NavLink$1, { ...props, ref, onClick: handleClick });
99
100
  });
101
+ NavLink.displayName = "NavLink";
100
102
 
101
103
  function ViteReactSSG(routerOptions, fn, options = {}) {
102
104
  const {
@@ -106,8 +108,9 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
106
108
  getStyleCollector = null
107
109
  } = options;
108
110
  const isClient = typeof window !== "undefined";
111
+ const BASE_URL = import.meta.env.BASE_URL;
109
112
  async function createRoot$1(client = false, routePath) {
110
- const browserRouter = client ? createBrowserRouter(routerOptions.routes) : void 0;
113
+ const browserRouter = client ? createBrowserRouter(routerOptions.routes, { basename: BASE_URL }) : void 0;
111
114
  const appRenderCallbacks = [];
112
115
  const onSSRAppRendered = client ? () => {
113
116
  } : (cb) => appRenderCallbacks.push(cb);
@@ -124,6 +127,7 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
124
127
  initialState: {},
125
128
  transformState,
126
129
  routePath,
130
+ base: BASE_URL,
127
131
  getStyleCollector
128
132
  };
129
133
  if (client) {
@@ -144,7 +148,7 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
144
148
  if (isClient) {
145
149
  (async () => {
146
150
  const container = typeof rootContainer === "string" ? document.querySelector(rootContainer) : rootContainer;
147
- const lazeMatches = matchRoutes(routerOptions.routes, window.location)?.filter(
151
+ const lazeMatches = matchRoutes(routerOptions.routes, window.location, BASE_URL)?.filter(
148
152
  (m) => m.route.lazy
149
153
  );
150
154
  if (lazeMatches && lazeMatches?.length > 0) {
package/dist/node.cjs CHANGED
@@ -1066,8 +1066,8 @@ class WritableAsPromise extends node_stream.Writable {
1066
1066
  }
1067
1067
  }
1068
1068
 
1069
- async function render(routes, request, styleCollector) {
1070
- const { dataRoutes, query } = server_js.createStaticHandler(routes);
1069
+ async function render(routes, request, styleCollector, basename) {
1070
+ const { dataRoutes, query } = server_js.createStaticHandler(routes, { basename });
1071
1071
  const context = await query(request);
1072
1072
  const helmetContext = {};
1073
1073
  if (context instanceof Response)
@@ -1287,7 +1287,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
1287
1287
  const _require = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('node.cjs', document.baseURI).href)));
1288
1288
  const { createRoot, includedRoutes: serverEntryIncludedRoutes } = format === "esm" ? await import(serverEntry) : _require(serverEntry);
1289
1289
  const includedRoutes = serverEntryIncludedRoutes || configIncludedRoutes;
1290
- const { routes } = await createRoot(false);
1290
+ const { routes, base } = await createRoot(false);
1291
1291
  const { lazyPaths } = await routesToPaths(routes);
1292
1292
  const dataRoutes = await preLoad([...routes], lazyPaths);
1293
1293
  const { paths, pathToEntry } = await routesToPaths(dataRoutes);
@@ -1295,7 +1295,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
1295
1295
  routesPaths = DefaultIncludedRoutes(routesPaths);
1296
1296
  routesPaths = Array.from(new Set(routesPaths));
1297
1297
  buildLog("Rendering Pages...", routesPaths.length);
1298
- const critters = crittersOptions !== false ? await getCritters(outDir, crittersOptions) : void 0;
1298
+ const critters = crittersOptions !== false ? await getCritters(outDir, { publicPath: base, ...crittersOptions }) : void 0;
1299
1299
  if (critters)
1300
1300
  console.log(`${kolorist.gray("[vite-react-ssg]")} ${kolorist.blue("Critical CSS generation enabled via `critters`")}`);
1301
1301
  const dotVitedir = Number.parseInt(vite.version) >= 5 ? [".vite"] : [];
@@ -1309,11 +1309,12 @@ async function build(ssgOptions = {}, viteConfig = {}) {
1309
1309
  queue.add(async () => {
1310
1310
  try {
1311
1311
  const appCtx = await createRoot(false, path);
1312
- const { initialState, routes: routes2, triggerOnSSRAppRendered, transformState = SiteMetadataDefaults.serializeState, getStyleCollector } = appCtx;
1312
+ const { initialState, base: base2, routes: routes2, triggerOnSSRAppRendered, transformState = SiteMetadataDefaults.serializeState, getStyleCollector } = appCtx;
1313
1313
  const styleCollector = getStyleCollector ? await getStyleCollector() : null;
1314
1314
  const transformedIndexHTML = await onBeforePageRender?.(path, indexHTML, appCtx) || indexHTML;
1315
- const request = createRequest(path);
1316
- const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render([...routes2], request, styleCollector);
1315
+ const fetchUrl = `${base2.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
1316
+ const request = createRequest(fetchUrl);
1317
+ const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render([...routes2], request, styleCollector, base2);
1317
1318
  await triggerOnSSRAppRendered?.(path, appHTML, appCtx);
1318
1319
  const renderedHTML = await renderHTML({
1319
1320
  rootContainerId,
@@ -29029,6 +29030,7 @@ async function dev(ssgOptions = {}, viteConfig = {}) {
29029
29030
  const cwd = process.cwd();
29030
29031
  const root = config.root || cwd;
29031
29032
  const httpsOptions = config.server.https;
29033
+ setBase(config.rawBase);
29032
29034
  const {
29033
29035
  entry = await detectEntry(root),
29034
29036
  onBeforePageRender,
@@ -29070,10 +29072,10 @@ async function dev(ssgOptions = {}, viteConfig = {}) {
29070
29072
  const indexHTML = await viteServer.transformIndexHtml(url, template);
29071
29073
  const createRoot = await viteServer.ssrLoadModule(ssrEntry).then((m) => m.createRoot);
29072
29074
  const appCtx = await createRoot(false, url);
29073
- const { routes, getStyleCollector } = appCtx;
29075
+ const { routes, getStyleCollector, base: base2 } = appCtx;
29074
29076
  const transformedIndexHTML = await onBeforePageRender?.(url, indexHTML, appCtx) || indexHTML;
29075
29077
  const styleCollector = getStyleCollector ? await getStyleCollector() : null;
29076
- const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render([...routes], createFetchRequest(req), styleCollector);
29078
+ const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render([...routes], createFetchRequest(req), styleCollector, base2);
29077
29079
  metaAttributes.push(styleTag);
29078
29080
  const matchesEntries = routerContext.matches.map((match) => match.route.entry).filter((entry2) => !!entry2).map((entry2) => entry2[0] === "/" ? entry2 : `/${entry2}`);
29079
29081
  const mods = await Promise.all(
@@ -29121,7 +29123,7 @@ async function printServerInfo(server, onlyUrl = false, https2 = false) {
29121
29123
  const info = server.config.logger.info;
29122
29124
  const port = server.config.server.port || 5173;
29123
29125
  const protocol = https2 ? "https" : "http";
29124
- const url = `${protocol}://localhost:${port}/`;
29126
+ const url = `${protocol}://localhost:${port}/${getBase().replace(/^\//, "")}`;
29125
29127
  if (!onlyUrl) {
29126
29128
  let ssrReadyMessage = " -- SSR";
29127
29129
  if (globalThis.__ssr_start_time) {
@@ -29150,6 +29152,13 @@ function printUrls(url, info) {
29150
29152
  const colorUrl = (url2) => kolorist.cyan(url2.replace(/:(\d+)\//, (_, port) => `:${kolorist.bold(port)}/`));
29151
29153
  info(` ${kolorist.green("\u279C")} ${kolorist.bold("Local")}: ${colorUrl(url)}`);
29152
29154
  }
29155
+ let base = "";
29156
+ function getBase() {
29157
+ return base;
29158
+ }
29159
+ function setBase(newBase) {
29160
+ base = newBase;
29161
+ }
29153
29162
 
29154
29163
  exports.build = build;
29155
29164
  exports.dev = dev;
package/dist/node.d.cts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { InlineConfig } from 'vite';
2
- import { V as ViteReactSSGOptions } from './shared/vite-react-ssg.d5f23f74.cjs';
2
+ import { V as ViteReactSSGOptions } from './shared/vite-react-ssg.91f86102.cjs';
3
3
  import 'critters';
4
4
  import 'react';
5
5
  import 'react-router-dom';
package/dist/node.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { InlineConfig } from 'vite';
2
- import { V as ViteReactSSGOptions } from './shared/vite-react-ssg.d5f23f74.mjs';
2
+ import { V as ViteReactSSGOptions } from './shared/vite-react-ssg.91f86102.mjs';
3
3
  import 'critters';
4
4
  import 'react';
5
5
  import 'react-router-dom';
package/dist/node.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { InlineConfig } from 'vite';
2
- import { V as ViteReactSSGOptions } from './shared/vite-react-ssg.d5f23f74.js';
2
+ import { V as ViteReactSSGOptions } from './shared/vite-react-ssg.91f86102.js';
3
3
  import 'critters';
4
4
  import 'react';
5
5
  import 'react-router-dom';
package/dist/node.mjs CHANGED
@@ -1044,8 +1044,8 @@ class WritableAsPromise extends Writable {
1044
1044
  }
1045
1045
  }
1046
1046
 
1047
- async function render(routes, request, styleCollector) {
1048
- const { dataRoutes, query } = createStaticHandler(routes);
1047
+ async function render(routes, request, styleCollector, basename) {
1048
+ const { dataRoutes, query } = createStaticHandler(routes, { basename });
1049
1049
  const context = await query(request);
1050
1050
  const helmetContext = {};
1051
1051
  if (context instanceof Response)
@@ -1265,7 +1265,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
1265
1265
  const _require = createRequire(import.meta.url);
1266
1266
  const { createRoot, includedRoutes: serverEntryIncludedRoutes } = format === "esm" ? await import(serverEntry) : _require(serverEntry);
1267
1267
  const includedRoutes = serverEntryIncludedRoutes || configIncludedRoutes;
1268
- const { routes } = await createRoot(false);
1268
+ const { routes, base } = await createRoot(false);
1269
1269
  const { lazyPaths } = await routesToPaths(routes);
1270
1270
  const dataRoutes = await preLoad([...routes], lazyPaths);
1271
1271
  const { paths, pathToEntry } = await routesToPaths(dataRoutes);
@@ -1273,7 +1273,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
1273
1273
  routesPaths = DefaultIncludedRoutes(routesPaths);
1274
1274
  routesPaths = Array.from(new Set(routesPaths));
1275
1275
  buildLog("Rendering Pages...", routesPaths.length);
1276
- const critters = crittersOptions !== false ? await getCritters(outDir, crittersOptions) : void 0;
1276
+ const critters = crittersOptions !== false ? await getCritters(outDir, { publicPath: base, ...crittersOptions }) : void 0;
1277
1277
  if (critters)
1278
1278
  console.log(`${gray("[vite-react-ssg]")} ${blue("Critical CSS generation enabled via `critters`")}`);
1279
1279
  const dotVitedir = Number.parseInt(version$3) >= 5 ? [".vite"] : [];
@@ -1287,11 +1287,12 @@ async function build(ssgOptions = {}, viteConfig = {}) {
1287
1287
  queue.add(async () => {
1288
1288
  try {
1289
1289
  const appCtx = await createRoot(false, path);
1290
- const { initialState, routes: routes2, triggerOnSSRAppRendered, transformState = serializeState, getStyleCollector } = appCtx;
1290
+ const { initialState, base: base2, routes: routes2, triggerOnSSRAppRendered, transformState = serializeState, getStyleCollector } = appCtx;
1291
1291
  const styleCollector = getStyleCollector ? await getStyleCollector() : null;
1292
1292
  const transformedIndexHTML = await onBeforePageRender?.(path, indexHTML, appCtx) || indexHTML;
1293
- const request = createRequest(path);
1294
- const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render([...routes2], request, styleCollector);
1293
+ const fetchUrl = `${base2.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
1294
+ const request = createRequest(fetchUrl);
1295
+ const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render([...routes2], request, styleCollector, base2);
1295
1296
  await triggerOnSSRAppRendered?.(path, appHTML, appCtx);
1296
1297
  const renderedHTML = await renderHTML({
1297
1298
  rootContainerId,
@@ -29007,6 +29008,7 @@ async function dev(ssgOptions = {}, viteConfig = {}) {
29007
29008
  const cwd = process.cwd();
29008
29009
  const root = config.root || cwd;
29009
29010
  const httpsOptions = config.server.https;
29011
+ setBase(config.rawBase);
29010
29012
  const {
29011
29013
  entry = await detectEntry(root),
29012
29014
  onBeforePageRender,
@@ -29048,10 +29050,10 @@ async function dev(ssgOptions = {}, viteConfig = {}) {
29048
29050
  const indexHTML = await viteServer.transformIndexHtml(url, template);
29049
29051
  const createRoot = await viteServer.ssrLoadModule(ssrEntry).then((m) => m.createRoot);
29050
29052
  const appCtx = await createRoot(false, url);
29051
- const { routes, getStyleCollector } = appCtx;
29053
+ const { routes, getStyleCollector, base: base2 } = appCtx;
29052
29054
  const transformedIndexHTML = await onBeforePageRender?.(url, indexHTML, appCtx) || indexHTML;
29053
29055
  const styleCollector = getStyleCollector ? await getStyleCollector() : null;
29054
- const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render([...routes], createFetchRequest(req), styleCollector);
29056
+ const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render([...routes], createFetchRequest(req), styleCollector, base2);
29055
29057
  metaAttributes.push(styleTag);
29056
29058
  const matchesEntries = routerContext.matches.map((match) => match.route.entry).filter((entry2) => !!entry2).map((entry2) => entry2[0] === "/" ? entry2 : `/${entry2}`);
29057
29059
  const mods = await Promise.all(
@@ -29099,7 +29101,7 @@ async function printServerInfo(server, onlyUrl = false, https2 = false) {
29099
29101
  const info = server.config.logger.info;
29100
29102
  const port = server.config.server.port || 5173;
29101
29103
  const protocol = https2 ? "https" : "http";
29102
- const url = `${protocol}://localhost:${port}/`;
29104
+ const url = `${protocol}://localhost:${port}/${getBase().replace(/^\//, "")}`;
29103
29105
  if (!onlyUrl) {
29104
29106
  let ssrReadyMessage = " -- SSR";
29105
29107
  if (globalThis.__ssr_start_time) {
@@ -29128,5 +29130,12 @@ function printUrls(url, info) {
29128
29130
  const colorUrl = (url2) => cyan(url2.replace(/:(\d+)\//, (_, port) => `:${bold(port)}/`));
29129
29131
  info(` ${green("\u279C")} ${bold("Local")}: ${colorUrl(url)}`);
29130
29132
  }
29133
+ let base = "";
29134
+ function getBase() {
29135
+ return base;
29136
+ }
29137
+ function setBase(newBase) {
29138
+ base = newBase;
29139
+ }
29131
29140
 
29132
29141
  export { build, dev };
package/dist/shared/{vite-react-ssg.d5f23f74.d.cts → vite-react-ssg.91f86102.d.cts} RENAMED
@@ -117,6 +117,7 @@ interface ViteReactSSGContext<HasRouter extends boolean = true> {
117
117
  * Current router path on SSG, `undefined` on client side.
118
118
  */
119
119
  routePath?: string;
120
+ base: string;
120
121
  getStyleCollector: (() => StyleCollector | Promise<StyleCollector>) | null;
121
122
  }
122
123
  interface ViteReactSSGClientOptions {
package/dist/shared/{vite-react-ssg.d5f23f74.d.mts → vite-react-ssg.91f86102.d.mts} RENAMED
@@ -117,6 +117,7 @@ interface ViteReactSSGContext<HasRouter extends boolean = true> {
117
117
  * Current router path on SSG, `undefined` on client side.
118
118
  */
119
119
  routePath?: string;
120
+ base: string;
120
121
  getStyleCollector: (() => StyleCollector | Promise<StyleCollector>) | null;
121
122
  }
122
123
  interface ViteReactSSGClientOptions {
package/dist/shared/{vite-react-ssg.d5f23f74.d.ts → vite-react-ssg.91f86102.d.ts} RENAMED
@@ -117,6 +117,7 @@ interface ViteReactSSGContext<HasRouter extends boolean = true> {
117
117
  * Current router path on SSG, `undefined` on client side.
118
118
  */
119
119
  routePath?: string;
120
+ base: string;
120
121
  getStyleCollector: (() => StyleCollector | Promise<StyleCollector>) | null;
121
122
  }
122
123
  interface ViteReactSSGClientOptions {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "vite-react-ssg",
3
3
  "type": "module",
4
- "version": "0.5.0",
4
+ "version": "0.5.1",
5
5
  "packageManager": "pnpm@8.6.6",
6
6
  "description": "",
7
7
  "author": "Riri <Daydreamerriri@outlook.com>",
@@ -54,9 +54,9 @@
54
54
  "vite-react-ssg": "bin/vite-react-ssg.js"
55
55
  },
56
56
  "files": [
57
- "dist",
57
+ "*.d.ts",
58
58
  "bin",
59
- "*.d.ts"
59
+ "dist"
60
60
  ],
61
61
  "scripts": {
62
62
  "build": "unbuild",
@@ -101,7 +101,7 @@
101
101
  },
102
102
  "devDependencies": {
103
103
  "@childrentime/devcert": "^1.2.5",
104
- "@ririd/eslint-config": "0.7.0",
104
+ "@ririd/eslint-config": "^1.0.0",
105
105
  "@types/express": "^4.17.17",
106
106
  "@types/fs-extra": "^11.0.1",
107
107
  "@types/html-minifier": "^4.0.2",
@@ -112,7 +112,7 @@
112
112
  "@types/yargs": "^17.0.24",
113
113
  "bumpp": "^9.1.0",
114
114
  "critters": "^0.0.20",
115
- "eslint": "^8.45.0",
115
+ "eslint": "^8.56.0",
116
116
  "esno": "^4.0.0",
117
117
  "fast-glob": "3.3.1",
118
118
  "p-queue": "^8.0.0",