vite-react-ssg 0.4.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 +246 -248
  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 +247 -249
  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 +14 -14
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) {