vite-react-ssg 0.8.4 → 0.8.5

package/README.md

@@ -73,10 +73,10 @@ export const createRoot = ViteReactSSG(
 
 ```tsx
 // src/App.tsx
-import React from 'react'
 import type { RouteRecord } from 'vite-react-ssg'
-import './App.css'
+import React from 'react'
 import Layout from './Layout'
+import './App.css'
 
 export const routes: RouteRecord[] = [
   {
@@ -374,9 +374,9 @@ export const routes: RouteRecord[] = [
 Just set `base` in vite.config.ts like:
 
 ```ts
+import react from '@vitejs/plugin-react-swc'
 // vite.config.ts
 import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -510,6 +510,11 @@ interface ViteReactSSGOptions {
    * @default 'src/main.ts'
    */
   entry?: string
+  /**
+   * The path of the index.html file (relative to the project root).
+   * @default 'index.html'
+   */
+  htmlEntry?: string
   /**
    * Mock browser global variables (window, document, etc...) from SSG.
    *
@@ -648,11 +653,8 @@ export default defineConfig({
 
 ## Roadmap
 
-- [x] Preload assets
-- [x] Document head
-- [x] SSR in dev environment
-- [x] More Client components, such as `<ClientOnly />`
-- [x] `getStaticPaths` for dynamic routes
+- [ ] Support `react19`
+- [ ] no index.html mode
 
 ## Credits
 

package/dist/client/single-page.d.mts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
-import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.Di0pROyF.mjs';
-export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterFutureConfig, d as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.Di0pROyF.mjs';
-export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.Cm9gBlfg.mjs';
-import 'react-router-dom';
+import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.D2OE2Bw1.mjs';
+export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterFutureConfig, d as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.D2OE2Bw1.mjs';
+export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.-NlgsPvg.mjs';
 import 'beasties';
+import 'react-router-dom';
 import 'react-helmet-async';
 
 declare function ViteReactSSG(App: ReactNode, fn?: (context: ViteReactSSGContext<false>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<false>>;

package/dist/client/single-page.d.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
-import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.Di0pROyF.js';
-export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterFutureConfig, d as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.Di0pROyF.js';
-export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.Cm9gBlfg.js';
-import 'react-router-dom';
+import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.D2OE2Bw1.js';
+export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterFutureConfig, d as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.D2OE2Bw1.js';
+export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.-NlgsPvg.js';
 import 'beasties';
+import 'react-router-dom';
 import 'react-helmet-async';
 
 declare function ViteReactSSG(App: ReactNode, fn?: (context: ViteReactSSGContext<false>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<false>>;

package/dist/client/single-page.mjs

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { HelmetProvider } from 'react-helmet-async';
-import { r as render, h as hydrate, d as documentReady } from '../shared/vite-react-ssg.CfJcpdWF.mjs';
-export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.CfJcpdWF.mjs';
+import { r as render, h as hydrate, d as documentReady } from '../shared/vite-react-ssg.Dx4ca9OM.mjs';
+export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.Dx4ca9OM.mjs';
 import { d as deserializeState } from '../shared/vite-react-ssg.C6pK7rvr.mjs';
 import 'react';
 import 'react-dom';
@@ -13,7 +13,7 @@ function ViteReactSSG(App, fn, options = {}) {
     ssrWhenDev,
     getStyleCollector = null
   } = options;
-  if (process.env.NODE_ENV === "development" && ssrWhenDev !== void 0)
+  if (process.env.NODE_ENV === "development" && ssrWhenDev !== undefined)
     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`.");
   const isClient = typeof window !== "undefined";
   async function createRoot(client = false, routePath) {
@@ -31,8 +31,8 @@ function ViteReactSSG(App, fn, options = {}) {
       transformState,
       routePath,
       getStyleCollector,
-      routes: void 0,
-      routerOptions: void 0,
+      routes: undefined,
+      routerOptions: undefined,
       base: "/",
       app: App,
       routerType: "single-page"
@@ -56,7 +56,8 @@ function ViteReactSSG(App, fn, options = {}) {
           console.warn("[vite-react-ssg] Root container not found.");
         return;
       }
-      await createRoot(true);
+      const context = await createRoot(true);
+      window.__VITE_REACT_SSG_CONTEXT__ = context;
       const app = /* @__PURE__ */ jsx(HelmetProvider, { children: App });
       const isSSR = document.querySelector("[data-server-rendered=true]") !== null;
       if (!isSSR && process.env.NODE_ENV === "development") {

package/dist/index.d.mts

@@ -1,8 +1,8 @@
-import { d as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.Di0pROyF.mjs';
-export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterFutureConfig, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.Di0pROyF.mjs';
-export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.Cm9gBlfg.mjs';
-import React from 'react';
+import { V as ViteReactSSGContext, d as RouterOptions, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.D2OE2Bw1.mjs';
+export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterFutureConfig, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.D2OE2Bw1.mjs';
+export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.-NlgsPvg.mjs';
 import { LinkProps, NavLinkProps } from 'react-router-dom';
+import React from 'react';
 import 'beasties';
 import 'react-helmet-async';
 
@@ -20,6 +20,7 @@ declare global {
     interface Window {
         __VITE_REACT_SSG_STATIC_LOADER_DATA__: any;
         __VITE_REACT_SSG_HASH__: string;
+        __VITE_REACT_SSG_CONTEXT__: ViteReactSSGContext<true>;
     }
 }
 

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-import { d as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.Di0pROyF.js';
-export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterFutureConfig, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.Di0pROyF.js';
-export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.Cm9gBlfg.js';
-import React from 'react';
+import { V as ViteReactSSGContext, d as RouterOptions, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.D2OE2Bw1.js';
+export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterFutureConfig, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.D2OE2Bw1.js';
+export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.-NlgsPvg.js';
 import { LinkProps, NavLinkProps } from 'react-router-dom';
+import React from 'react';
 import 'beasties';
 import 'react-helmet-async';
 
@@ -20,6 +20,7 @@ declare global {
     interface Window {
         __VITE_REACT_SSG_STATIC_LOADER_DATA__: any;
         __VITE_REACT_SSG_HASH__: string;
+        __VITE_REACT_SSG_CONTEXT__: ViteReactSSGContext<true>;
     }
 }
 

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { HelmetProvider } from 'react-helmet-async';
 import { useLinkClickHandler, Link as Link$1, NavLink as NavLink$1, matchRoutes, createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { r as render, h as hydrate, d as documentReady } from './shared/vite-react-ssg.CfJcpdWF.mjs';
-export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.CfJcpdWF.mjs';
-import { d as deserializeState } from './shared/vite-react-ssg.C6pK7rvr.mjs';
+import { r as render, h as hydrate, d as documentReady } from './shared/vite-react-ssg.Dx4ca9OM.mjs';
+export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.Dx4ca9OM.mjs';
 import { j as joinUrlSegments, w as withLeadingSlash, s as stripBase } from './shared/vite-react-ssg.CjIppNIS.mjs';
-import { c as convertRoutesToDataRoutes } from './shared/vite-react-ssg.C0y5wbxl.mjs';
+import { c as convertRoutesToDataRoutes } from './shared/vite-react-ssg.C_MPXL9p.mjs';
+import { d as deserializeState } from './shared/vite-react-ssg.C6pK7rvr.mjs';
 import React, { forwardRef } from 'react';
 import 'react-dom';
 
@@ -79,7 +79,7 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
     ssrWhenDev,
     getStyleCollector = null
   } = options;
-  if (process.env.NODE_ENV === "development" && ssrWhenDev !== void 0)
+  if (process.env.NODE_ENV === "development" && ssrWhenDev !== undefined)
     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`.");
   const isClient = typeof window !== "undefined";
   const BASE_URL = routerOptions.basename ?? "/";
@@ -88,7 +88,7 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
     const browserRouter = client ? createBrowserRouter(
       convertRoutesToDataRoutes(routerOptions.routes, transformStaticLoaderRoute),
       { basename: BASE_URL, future: routerFeature }
-    ) : void 0;
+    ) : undefined;
     const appRenderCallbacks = [];
     const onSSRAppRendered = client ? () => {
     } : (cb) => appRenderCallbacks.push(cb);
@@ -135,11 +135,13 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
         await Promise.all(
           lazeMatches.map(async (m) => {
             const routeModule = await m.route.lazy();
-            Object.assign(m.route, { ...routeModule, lazy: void 0 });
+            Object.assign(m.route, { ...routeModule, lazy: undefined });
           })
         );
       }
-      const { router } = await createRoot(true);
+      const context = await createRoot(true);
+      window.__VITE_REACT_SSG_CONTEXT__ = context;
+      const { router } = context;
       const app = /* @__PURE__ */ jsx(HelmetProvider, { children: /* @__PURE__ */ jsx(RouterProvider, { router, future: { v7_startTransition } }) });
       const isSSR = document.querySelector("[data-server-rendered=true]") !== null;
       if (!isSSR && process.env.NODE_ENV === "development") {

package/dist/node/cli.mjs

@@ -1,22 +1,22 @@
 import { gray, bold, red, reset, underline } from 'kolorist';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
-import { b as build, d as dev } from '../shared/vite-react-ssg.CKcl-j8g.mjs';
+import { b as build, d as dev } from '../shared/vite-react-ssg.EDckwhJo.mjs';
 import { Headers, Request, Response, fetch, FormData } from '@remix-run/web-fetch';
-import 'node:path';
 import 'node:module';
-import 'p-queue';
+import 'node:path';
 import 'fs-extra';
-import 'vite';
 import 'jsdom';
-import '../shared/vite-react-ssg.C6pK7rvr.mjs';
+import 'p-queue';
+import 'vite';
 import '../shared/vite-react-ssg.CjIppNIS.mjs';
+import '../shared/vite-react-ssg.C6pK7rvr.mjs';
 import 'react/jsx-runtime';
 import 'react-helmet-async';
+import 'node:events';
 import 'node:stream';
+import '../shared/vite-react-ssg.C_MPXL9p.mjs';
 import 'react-dom/server';
-import 'node:events';
-import '../shared/vite-react-ssg.C0y5wbxl.mjs';
 import '../shared/vite-react-ssg.B-j07kW6.mjs';
 
 function installGlobals() {
@@ -47,7 +47,7 @@ yargs(hideBin(process.argv)).scriptName("vite-react-ssg").usage("$0 [args]").com
     describe: "The base path to render"
   }),
   async (args) => {
-    const { config: configFile = void 0, ...ssgOptions } = args;
+    const { config: configFile = undefined, ...ssgOptions } = args;
     await build(ssgOptions, { configFile });
   }
 ).command(
@@ -72,7 +72,7 @@ yargs(hideBin(process.argv)).scriptName("vite-react-ssg").usage("$0 [args]").com
     describe: "The host to expose"
   }),
   async (args) => {
-    const { config: configFile = void 0, host, ...ssgOptions } = args;
+    const { config: configFile = undefined, host, ...ssgOptions } = args;
     await dev(ssgOptions, { configFile, server: { host } });
   }
 ).fail((msg, err, yargs2) => {

package/dist/node.d.mts

@@ -1,8 +1,8 @@
 import { InlineConfig } from 'vite';
-import { b as ViteReactSSGOptions } from './shared/vite-react-ssg.Di0pROyF.mjs';
+import { b as ViteReactSSGOptions } from './shared/vite-react-ssg.D2OE2Bw1.mjs';
+import 'beasties';
 import 'react';
 import 'react-router-dom';
-import 'beasties';
 
 declare function build(ssgOptions?: Partial<ViteReactSSGOptions>, viteConfig?: InlineConfig): Promise<void>;
 

package/dist/node.d.ts

@@ -1,8 +1,8 @@
 import { InlineConfig } from 'vite';
-import { b as ViteReactSSGOptions } from './shared/vite-react-ssg.Di0pROyF.js';
+import { b as ViteReactSSGOptions } from './shared/vite-react-ssg.D2OE2Bw1.js';
+import 'beasties';
 import 'react';
 import 'react-router-dom';
-import 'beasties';
 
 declare function build(ssgOptions?: Partial<ViteReactSSGOptions>, viteConfig?: InlineConfig): Promise<void>;
 

package/dist/node.mjs

@@ -1,17 +1,17 @@
-export { b as build, d as dev } from './shared/vite-react-ssg.CKcl-j8g.mjs';
-import 'node:path';
+export { b as build, d as dev } from './shared/vite-react-ssg.EDckwhJo.mjs';
 import 'node:module';
+import 'node:path';
+import 'fs-extra';
+import 'jsdom';
 import 'kolorist';
 import 'p-queue';
-import 'fs-extra';
 import 'vite';
-import 'jsdom';
-import './shared/vite-react-ssg.C6pK7rvr.mjs';
 import './shared/vite-react-ssg.CjIppNIS.mjs';
+import './shared/vite-react-ssg.C6pK7rvr.mjs';
 import 'react/jsx-runtime';
 import 'react-helmet-async';
+import 'node:events';
 import 'node:stream';
+import './shared/vite-react-ssg.C_MPXL9p.mjs';
 import 'react-dom/server';
-import 'node:events';
-import './shared/vite-react-ssg.C0y5wbxl.mjs';
 import './shared/vite-react-ssg.B-j07kW6.mjs';

package/dist/shared/{vite-react-ssg.Cm9gBlfg.d.ts → vite-react-ssg.-NlgsPvg.d.mts}

@@ -1,15 +1,15 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { HelmetProps } from 'react-helmet-async';
 
+interface ClientOnlyProps {
+    children?: () => React.ReactNode;
+    fallback?: React.ReactNode;
+}
+declare function ClientOnly({ children, fallback, }: ClientOnlyProps): React.ReactNode | null;
+
 type Props = HelmetProps & {
     children: ReactNode;
 };
-declare function Head(props: Props): JSX.Element;
-
-interface ClientOnlyProps {
-    children?: () => JSX.Element;
-    fallback?: JSX.Element;
-}
-declare function ClientOnly({ children, fallback, }: ClientOnlyProps): JSX.Element | null;
+declare function Head(props: Props): React.ReactNode;
 
 export { ClientOnly as C, Head as H };

package/dist/shared/{vite-react-ssg.Cm9gBlfg.d.mts → vite-react-ssg.-NlgsPvg.d.ts}

@@ -1,15 +1,15 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { HelmetProps } from 'react-helmet-async';
 
+interface ClientOnlyProps {
+    children?: () => React.ReactNode;
+    fallback?: React.ReactNode;
+}
+declare function ClientOnly({ children, fallback, }: ClientOnlyProps): React.ReactNode | null;
+
 type Props = HelmetProps & {
     children: ReactNode;
 };
-declare function Head(props: Props): JSX.Element;
-
-interface ClientOnlyProps {
-    children?: () => JSX.Element;
-    fallback?: JSX.Element;
-}
-declare function ClientOnly({ children, fallback, }: ClientOnlyProps): JSX.Element | null;
+declare function Head(props: Props): React.ReactNode;
 
 export { ClientOnly as C, Head as H };

package/dist/shared/{vite-react-ssg.C0y5wbxl.mjs → vite-react-ssg.C_MPXL9p.mjs}

@@ -15,7 +15,7 @@ function convertRoutesToDataRoutes(routes, mapRouteProperties, parentPath = [])
         ...route,
         ...mapRouteProperties(route),
         id,
-        children: void 0
+        children: undefined
       };
       if (route.children) {
         pathOrLayoutRoute.children = convertRoutesToDataRoutes(

package/dist/shared/{vite-react-ssg.Di0pROyF.d.cts → vite-react-ssg.D2OE2Bw1.d.mts}

@@ -1,6 +1,6 @@
+import { Options } from 'beasties';
 import { ReactNode, ReactElement } from 'react';
 import { NonIndexRouteObject, IndexRouteObject, FutureConfig, createBrowserRouter } from 'react-router-dom';
-import { Options } from 'beasties';
 
 type Router = ReturnType<typeof createBrowserRouter>;
 interface CrittersOptions {
@@ -41,6 +41,11 @@ interface ViteReactSSGOptions<Context = ViteReactSSGContext> {
      * @default 'src/main.ts'
      */
     entry?: string;
+    /**
+     * The path of the index.html file (relative to the project root).
+     * @default 'index.html'
+     */
+    htmlEntry?: string;
     /**
      * Mock browser global variables (window, document, etc...) from SSG.
      *

package/dist/shared/{vite-react-ssg.Di0pROyF.d.mts → vite-react-ssg.D2OE2Bw1.d.ts}

@@ -1,6 +1,6 @@
+import { Options } from 'beasties';
 import { ReactNode, ReactElement } from 'react';
 import { NonIndexRouteObject, IndexRouteObject, FutureConfig, createBrowserRouter } from 'react-router-dom';
-import { Options } from 'beasties';
 
 type Router = ReturnType<typeof createBrowserRouter>;
 interface CrittersOptions {
@@ -41,6 +41,11 @@ interface ViteReactSSGOptions<Context = ViteReactSSGContext> {
      * @default 'src/main.ts'
      */
     entry?: string;
+    /**
+     * The path of the index.html file (relative to the project root).
+     * @default 'index.html'
+     */
+    htmlEntry?: string;
     /**
      * Mock browser global variables (window, document, etc...) from SSG.
      *

package/dist/shared/{vite-react-ssg.CfJcpdWF.mjs → vite-react-ssg.Dx4ca9OM.mjs}

@@ -8,10 +8,18 @@ const CopyReactDOM = {
 };
 const { version, render: reactRender, hydrate: reactHydrate } = CopyReactDOM;
 const isReact18 = Number((version || "").split(".")[0]) > 17;
+const isReact19 = Number((version || "").split(".")[0]) > 18;
 function render(app, container, renderOptions = {}) {
   const { useLegacyRender } = renderOptions;
   if (useLegacyRender || !isReact18) {
     reactRender(app, container);
+  } else if (isReact19) {
+    import('react-dom/client').then(({ createRoot }) => {
+      const root = createRoot(container);
+      React.startTransition(() => {
+        root.render(app);
+      });
+    });
   } else {
     CopyReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = true;
     const { createRoot } = CopyReactDOM;
@@ -29,6 +37,12 @@ function hydrate(app, container, renderOptions = {}) {
   const { useLegacyRender } = renderOptions;
   if (useLegacyRender || !isReact18) {
     reactHydrate(app, container);
+  } else if (isReact19) {
+    import('react-dom/client').then(({ hydrateRoot }) => {
+      React.startTransition(() => {
+        hydrateRoot(container, app);
+      });
+    });
   } else {
     CopyReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = true;
     const { hydrateRoot } = CopyReactDOM;
@@ -51,10 +65,6 @@ function documentReady(_passThrough) {
   return Promise.resolve(_passThrough);
 }
 
-function Head(props) {
-  return /* @__PURE__ */ jsx(Helmet, { ...props });
-}
-
 function useIsClient() {
   const [isBrowser, setIsBrowser] = useState(false);
   useEffect(() => {
@@ -80,4 +90,8 @@ Current type: ${isValidElement(children) ? "React element" : typeof children}`
   return fallback ?? null;
 }
 
+function Head(props) {
+  return /* @__PURE__ */ jsx(Helmet, { ...props });
+}
+
 export { ClientOnly as C, Head as H, documentReady as d, hydrate as h, render as r };