vite-react-ssg 0.8.2 → 0.8.3-beta.2

package/README.md

@@ -609,6 +609,11 @@ export default defineConfig({
 })
 ```
 
+### React17 Support
+
+- for react18, with flag `useLegacyRender: true`, it will use the legacy `render` and `hydrate` methods.
+- for react17, on top of above, you will need minor update to react and react-dom [example](https://github.com/jesse23/webpack-test-bed/blob/main/scripts/define-react-exports.js) to polyfill the mjs import and the `react-dom/client`.
+
 ## Roadmap
 
 - [x] Preload assets

package/dist/client/single-page.cjs

@@ -1,15 +1,11 @@
 'use strict';
 
 const jsxRuntime = require('react/jsx-runtime');
-const client = require('react-dom/client');
 const reactHelmetAsync = require('react-helmet-async');
-const React = require('react');
-const ClientOnly = require('../shared/vite-react-ssg.yL7u7OP5.cjs');
+const ClientOnly = require('../shared/vite-react-ssg.0S4Yj_HC.cjs');
 const state = require('../shared/vite-react-ssg.CjsEygxB.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
-
-const React__default = /*#__PURE__*/_interopDefaultCompat(React);
+require('react');
+require('react-dom');
 
 function ViteReactSSG(App, fn, options = {}) {
   const {
@@ -65,14 +61,9 @@ function ViteReactSSG(App, fn, options = {}) {
       const app = /* @__PURE__ */ jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: App });
       const isSSR = document.querySelector("[data-server-rendered=true]") !== null;
       if (!isSSR && process.env.NODE_ENV === "development") {
-        const root = client.createRoot(container);
-        React__default.startTransition(() => {
-          root.render(app);
-        });
+        ClientOnly.render(app, container, options);
       } else {
-        React__default.startTransition(() => {
-          client.hydrateRoot(container, app);
-        });
+        ClientOnly.hydrate(app, container, options);
       }
     })();
   }

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.WtHsP9dD.cjs';
-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.WtHsP9dD.cjs';
+import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.Di0pROyF.cjs';
+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.cjs';
 export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.Cm9gBlfg.cjs';
 import 'react-router-dom';
 import 'beasties';

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.WtHsP9dD.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.WtHsP9dD.mjs';
+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 'beasties';

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.WtHsP9dD.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.WtHsP9dD.js';
+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 'beasties';

package/dist/client/single-page.mjs

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
-import { createRoot, hydrateRoot } from 'react-dom/client';
 import { HelmetProvider } from 'react-helmet-async';
-import React from 'react';
-import { d as documentReady } from '../shared/vite-react-ssg.DdDMKzrS.mjs';
-export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.DdDMKzrS.mjs';
+import { r as render, h as hydrate, d as documentReady } from '../shared/vite-react-ssg.DQEe2Gi_.mjs';
+export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.DQEe2Gi_.mjs';
 import { d as deserializeState } from '../shared/vite-react-ssg.C6pK7rvr.mjs';
+import 'react';
+import 'react-dom';
 
 function ViteReactSSG(App, fn, options = {}) {
   const {
@@ -16,7 +16,7 @@ function ViteReactSSG(App, fn, options = {}) {
   if (process.env.NODE_ENV === "development" && ssrWhenDev !== void 0)
     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$1(client = false, routePath) {
+  async function createRoot(client = false, routePath) {
     const appRenderCallbacks = [];
     const onSSRAppRendered = client ? () => {
     } : (cb) => appRenderCallbacks.push(cb);
@@ -56,22 +56,17 @@ function ViteReactSSG(App, fn, options = {}) {
           console.warn("[vite-react-ssg] Root container not found.");
         return;
       }
-      await createRoot$1(true);
+      await createRoot(true);
       const app = /* @__PURE__ */ jsx(HelmetProvider, { children: App });
       const isSSR = document.querySelector("[data-server-rendered=true]") !== null;
       if (!isSSR && process.env.NODE_ENV === "development") {
-        const root = createRoot(container);
-        React.startTransition(() => {
-          root.render(app);
-        });
+        render(app, container, options);
       } else {
-        React.startTransition(() => {
-          hydrateRoot(container, app);
-        });
+        hydrate(app, container, options);
       }
     })();
   }
-  return createRoot$1;
+  return createRoot;
 }
 
 export { ViteReactSSG };

package/dist/index.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
 const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const client = require('react-dom/client');
 const reactHelmetAsync = require('react-helmet-async');
 const reactRouterDom = require('react-router-dom');
-const ClientOnly = require('./shared/vite-react-ssg.yL7u7OP5.cjs');
+const ClientOnly = require('./shared/vite-react-ssg.0S4Yj_HC.cjs');
 const state = require('./shared/vite-react-ssg.CjsEygxB.cjs');
 const path = require('./shared/vite-react-ssg.CFQGqC60.cjs');
 const remixRouter = require('./shared/vite-react-ssg.C2GpVZF1.cjs');
+const React = require('react');
+require('react-dom');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -148,14 +148,9 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
       const app = /* @__PURE__ */ jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.RouterProvider, { router, future: { v7_startTransition } }) });
       const isSSR = document.querySelector("[data-server-rendered=true]") !== null;
       if (!isSSR && process.env.NODE_ENV === "development") {
-        const root = client.createRoot(container);
-        React__default.startTransition(() => {
-          root.render(app);
-        });
+        ClientOnly.render(app, container, options);
       } else {
-        React__default.startTransition(() => {
-          client.hydrateRoot(container, app);
-        });
+        ClientOnly.hydrate(app, container, options);
       }
     })();
   }

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { d as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.WtHsP9dD.cjs';
-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.WtHsP9dD.cjs';
+import { d as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.Di0pROyF.cjs';
+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.cjs';
 export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.Cm9gBlfg.cjs';
 import React from 'react';
 import { LinkProps, NavLinkProps } from 'react-router-dom';

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { d as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.WtHsP9dD.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.WtHsP9dD.mjs';
+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 { LinkProps, NavLinkProps } from 'react-router-dom';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { d as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.WtHsP9dD.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.WtHsP9dD.js';
+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 { LinkProps, NavLinkProps } from 'react-router-dom';

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
-import React, { forwardRef } from 'react';
-import { createRoot, hydrateRoot } from 'react-dom/client';
 import { HelmetProvider } from 'react-helmet-async';
 import { useLinkClickHandler, Link as Link$1, NavLink as NavLink$1, matchRoutes, createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { d as documentReady } from './shared/vite-react-ssg.DdDMKzrS.mjs';
-export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.DdDMKzrS.mjs';
+import { r as render, h as hydrate, d as documentReady } from './shared/vite-react-ssg.DQEe2Gi_.mjs';
+export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.DQEe2Gi_.mjs';
 import { d as deserializeState } from './shared/vite-react-ssg.C6pK7rvr.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 React, { forwardRef } from 'react';
+import 'react-dom';
 
 const Link = forwardRef((props, ref) => {
   const {
@@ -84,7 +84,7 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
   const isClient = typeof window !== "undefined";
   const BASE_URL = routerOptions.basename ?? "/";
   const { v7_startTransition, ...routerFeature } = routerOptions.future ?? {};
-  async function createRoot$1(client = false, routePath) {
+  async function createRoot(client = false, routePath) {
     const browserRouter = client ? createBrowserRouter(
       convertRoutesToDataRoutes(routerOptions.routes, transformStaticLoaderRoute),
       { basename: BASE_URL, future: routerFeature }
@@ -139,22 +139,17 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
           })
         );
       }
-      const { router } = await createRoot$1(true);
+      const { router } = await createRoot(true);
       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") {
-        const root = createRoot(container);
-        React.startTransition(() => {
-          root.render(app);
-        });
+        render(app, container, options);
       } else {
-        React.startTransition(() => {
-          hydrateRoot(container, app);
-        });
+        hydrate(app, container, options);
       }
     })();
   }
-  return createRoot$1;
+  return createRoot;
   function transformStaticLoaderRoute(route) {
     const isSSR = document.querySelector("[data-server-rendered=true]") !== null;
     if (!isSSR) {

package/dist/node/cli.cjs

@@ -3,7 +3,7 @@
 const kolorist = require('kolorist');
 const yargs = require('yargs');
 const helpers = require('yargs/helpers');
-const dev = require('../shared/vite-react-ssg.BEenhaUp.cjs');
+const dev = require('../shared/vite-react-ssg.CjMwYAJ_.cjs');
 const webFetch = require('@remix-run/web-fetch');
 require('node:path');
 require('node:module');

package/dist/node/cli.mjs

@@ -1,7 +1,7 @@
 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.CCvTYWeJ.mjs';
+import { b as build, d as dev } from '../shared/vite-react-ssg.DH605nuR.mjs';
 import { Headers, Request, Response, fetch, FormData } from '@remix-run/web-fetch';
 import 'node:path';
 import 'node:module';

package/dist/node.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const dev = require('./shared/vite-react-ssg.BEenhaUp.cjs');
+const dev = require('./shared/vite-react-ssg.CjMwYAJ_.cjs');
 require('node:path');
 require('node:module');
 require('kolorist');

package/dist/node.d.cts

@@ -1,5 +1,5 @@
 import { InlineConfig } from 'vite';
-import { b as ViteReactSSGOptions } from './shared/vite-react-ssg.WtHsP9dD.cjs';
+import { b as ViteReactSSGOptions } from './shared/vite-react-ssg.Di0pROyF.cjs';
 import 'react';
 import 'react-router-dom';
 import 'beasties';

package/dist/node.d.mts

@@ -1,5 +1,5 @@
 import { InlineConfig } from 'vite';
-import { b as ViteReactSSGOptions } from './shared/vite-react-ssg.WtHsP9dD.mjs';
+import { b as ViteReactSSGOptions } from './shared/vite-react-ssg.Di0pROyF.mjs';
 import 'react';
 import 'react-router-dom';
 import 'beasties';

package/dist/node.d.ts

@@ -1,5 +1,5 @@
 import { InlineConfig } from 'vite';
-import { b as ViteReactSSGOptions } from './shared/vite-react-ssg.WtHsP9dD.js';
+import { b as ViteReactSSGOptions } from './shared/vite-react-ssg.Di0pROyF.js';
 import 'react';
 import 'react-router-dom';
 import 'beasties';

package/dist/node.mjs

@@ -1,4 +1,4 @@
-export { b as build, d as dev } from './shared/vite-react-ssg.CCvTYWeJ.mjs';
+export { b as build, d as dev } from './shared/vite-react-ssg.DH605nuR.mjs';
 import 'node:path';
 import 'node:module';
 import 'kolorist';

package/dist/shared/vite-react-ssg.0S4Yj_HC.cjs

@@ -0,0 +1,102 @@
+'use strict';
+
+const React = require('react');
+const ReactDOM = require('react-dom');
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelmetAsync = require('react-helmet-async');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+const React__default = /*#__PURE__*/_interopDefaultCompat(React);
+const ReactDOM__namespace = /*#__PURE__*/_interopNamespaceCompat(ReactDOM);
+
+const CopyReactDOM = {
+  ...ReactDOM__namespace
+};
+const { version, render: reactRender, hydrate: reactHydrate } = CopyReactDOM;
+const isReact18 = Number((version || "").split(".")[0]) > 17;
+async function render(app, container, renderOptions = {}) {
+  const { useLegacyRender } = renderOptions;
+  if (useLegacyRender || !isReact18) {
+    reactRender(app, container);
+  } else {
+    const { createRoot } = await import('react-dom/client');
+    if (!createRoot) {
+      throw new Error("createRoot not found");
+    }
+    const root = createRoot(container);
+    React__default.startTransition(() => {
+      root.render(app);
+    });
+  }
+}
+async function hydrate(app, container, renderOptions = {}) {
+  const { useLegacyRender } = renderOptions;
+  if (useLegacyRender || !isReact18) {
+    reactHydrate(app, container);
+  } else {
+    const { hydrateRoot } = await import('react-dom/client');
+    if (!hydrateRoot) {
+      throw new Error("hydrateRoot not found");
+    }
+    React__default.startTransition(() => {
+      hydrateRoot(container, app);
+    });
+  }
+}
+
+function documentReady(_passThrough) {
+  if (document.readyState === "loading") {
+    return new Promise((resolve) => {
+      document.addEventListener("DOMContentLoaded", () => resolve(_passThrough));
+    });
+  }
+  return Promise.resolve(_passThrough);
+}
+
+function Head(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactHelmetAsync.Helmet, { ...props });
+}
+
+function useIsClient() {
+  const [isBrowser, setIsBrowser] = React.useState(false);
+  React.useEffect(() => {
+    setIsBrowser(true);
+  }, []);
+  return isBrowser;
+}
+
+function ClientOnly({
+  children,
+  fallback
+}) {
+  const isBrowser = useIsClient();
+  if (isBrowser) {
+    if (typeof children !== "function" && process.env.NODE_ENV === "development") {
+      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>.
+Current type: ${React.isValidElement(children) ? "React element" : typeof children}`
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children?.() });
+  }
+  return fallback ?? null;
+}
+
+exports.ClientOnly = ClientOnly;
+exports.Head = Head;
+exports.documentReady = documentReady;
+exports.hydrate = hydrate;
+exports.render = render;

package/dist/shared/{vite-react-ssg.BEenhaUp.cjs → vite-react-ssg.CjMwYAJ_.cjs}

@@ -12,7 +12,7 @@ const path = require('./vite-react-ssg.CFQGqC60.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const reactHelmetAsync = require('react-helmet-async');
 const node_stream = require('node:stream');
-const server = require('react-dom/server');
+const ReactDomServer = require('react-dom/server');
 const node_events = require('node:events');
 const remixRouter = require('./vite-react-ssg.C2GpVZF1.cjs');
 const tanstackRouter = require('./vite-react-ssg.DWHmkjdM.cjs');
@@ -20,10 +20,23 @@ const tanstackRouter = require('./vite-react-ssg.DWHmkjdM.cjs');
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
 const PQueue__default = /*#__PURE__*/_interopDefaultCompat(PQueue);
 const fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
+const ReactDomServer__namespace = /*#__PURE__*/_interopNamespaceCompat(ReactDomServer);
 
-const version = "0.8.2";
+const version = "0.8.3-beta.2";
 
 function buildLog(text, count) {
   console.log(`
@@ -305,8 +318,11 @@ function collectModules(manifest, entry, mods = /* @__PURE__ */ new Set()) {
 }
 
 async function renderStaticApp(app) {
+  if (!ReactDomServer__namespace.renderToPipeableStream) {
+    return ReactDomServer__namespace.renderToString(/* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: app }));
+  }
   const writableStream = new WritableAsPromise();
-  const { pipe } = server.renderToPipeableStream(app, {
+  const { pipe } = ReactDomServer__namespace.renderToPipeableStream(app, {
     onError(error) {
       writableStream.destroy(error);
     },
@@ -793,7 +809,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   const ext = format === "esm" ? ".mjs" : ".cjs";
   const serverEntry = node_path.join(prefix, ssgOut, node_path.parse(ssrEntry).name + ext);
   const serverManifest = JSON.parse(await fs__default.readFile(node_path.join(ssgOut, ...dotVitedir, "manifest.json"), "utf-8"));
-  const _require = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/vite-react-ssg.BEenhaUp.cjs', document.baseURI).href)));
+  const _require = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/vite-react-ssg.CjMwYAJ_.cjs', document.baseURI).href)));
   const { createRoot, includedRoutes: serverEntryIncludedRoutes } = format === "esm" ? await import(serverEntry) : _require(serverEntry);
   const includedRoutes = serverEntryIncludedRoutes || configIncludedRoutes;
   const { routes } = await createRoot(false);

package/dist/shared/{vite-react-ssg.CCvTYWeJ.mjs → vite-react-ssg.DH605nuR.mjs}

@@ -7,15 +7,15 @@ import { resolveConfig, createLogger, build as build$1, mergeConfig, version as
 import { JSDOM } from 'jsdom';
 import { s as serializeState } from './vite-react-ssg.C6pK7rvr.mjs';
 import { a as withTrailingSlash, r as removeLeadingSlash, w as withLeadingSlash, s as stripBase, j as joinUrlSegments } from './vite-react-ssg.CjIppNIS.mjs';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { HelmetProvider } from 'react-helmet-async';
 import { Writable, Readable } from 'node:stream';
-import { renderToPipeableStream } from 'react-dom/server';
+import * as ReactDomServer from 'react-dom/server';
 import { once } from 'node:events';
 import { c as convertRoutesToDataRoutes } from './vite-react-ssg.C0y5wbxl.mjs';
 import { M as META_CONTAINER_ID } from './vite-react-ssg.B-j07kW6.mjs';
 
-const version = "0.8.2";
+const version = "0.8.3-beta.2";
 
 function buildLog(text, count) {
   console.log(`
@@ -297,8 +297,11 @@ function collectModules(manifest, entry, mods = /* @__PURE__ */ new Set()) {
 }
 
 async function renderStaticApp(app) {
+  if (!ReactDomServer.renderToPipeableStream) {
+    return ReactDomServer.renderToString(/* @__PURE__ */ jsx(Fragment, { children: app }));
+  }
   const writableStream = new WritableAsPromise();
-  const { pipe } = renderToPipeableStream(app, {
+  const { pipe } = ReactDomServer.renderToPipeableStream(app, {
     onError(error) {
       writableStream.destroy(error);
     },

package/dist/shared/vite-react-ssg.DQEe2Gi_.mjs

@@ -0,0 +1,79 @@
+import React, { useState, useEffect, isValidElement } from 'react';
+import * as ReactDOM from 'react-dom';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { Helmet } from 'react-helmet-async';
+
+const CopyReactDOM = {
+  ...ReactDOM
+};
+const { version, render: reactRender, hydrate: reactHydrate } = CopyReactDOM;
+const isReact18 = Number((version || "").split(".")[0]) > 17;
+async function render(app, container, renderOptions = {}) {
+  const { useLegacyRender } = renderOptions;
+  if (useLegacyRender || !isReact18) {
+    reactRender(app, container);
+  } else {
+    const { createRoot } = await import('react-dom/client');
+    if (!createRoot) {
+      throw new Error("createRoot not found");
+    }
+    const root = createRoot(container);
+    React.startTransition(() => {
+      root.render(app);
+    });
+  }
+}
+async function hydrate(app, container, renderOptions = {}) {
+  const { useLegacyRender } = renderOptions;
+  if (useLegacyRender || !isReact18) {
+    reactHydrate(app, container);
+  } else {
+    const { hydrateRoot } = await import('react-dom/client');
+    if (!hydrateRoot) {
+      throw new Error("hydrateRoot not found");
+    }
+    React.startTransition(() => {
+      hydrateRoot(container, app);
+    });
+  }
+}
+
+function documentReady(_passThrough) {
+  if (document.readyState === "loading") {
+    return new Promise((resolve) => {
+      document.addEventListener("DOMContentLoaded", () => resolve(_passThrough));
+    });
+  }
+  return Promise.resolve(_passThrough);
+}
+
+function Head(props) {
+  return /* @__PURE__ */ jsx(Helmet, { ...props });
+}
+
+function useIsClient() {
+  const [isBrowser, setIsBrowser] = useState(false);
+  useEffect(() => {
+    setIsBrowser(true);
+  }, []);
+  return isBrowser;
+}
+
+function ClientOnly({
+  children,
+  fallback
+}) {
+  const isBrowser = useIsClient();
+  if (isBrowser) {
+    if (typeof children !== "function" && process.env.NODE_ENV === "development") {
+      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>.
+Current type: ${isValidElement(children) ? "React element" : typeof children}`
+      );
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: children?.() });
+  }
+  return fallback ?? null;
+}
+
+export { ClientOnly as C, Head as H, documentReady as d, hydrate as h, render as r };

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

@@ -162,6 +162,7 @@ interface ViteReactSSGClientOptions {
      */
     ssrWhenDev?: boolean;
     getStyleCollector?: (() => StyleCollector | Promise<StyleCollector>) | null;
+    useLegacyRender?: boolean;
 }
 interface CommonRouteOptions {
     /**

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

@@ -162,6 +162,7 @@ interface ViteReactSSGClientOptions {
      */
     ssrWhenDev?: boolean;
     getStyleCollector?: (() => StyleCollector | Promise<StyleCollector>) | null;
+    useLegacyRender?: boolean;
 }
 interface CommonRouteOptions {
     /**

package/dist/shared/{vite-react-ssg.WtHsP9dD.d.cts → vite-react-ssg.Di0pROyF.d.ts}

@@ -162,6 +162,7 @@ interface ViteReactSSGClientOptions {
      */
     ssrWhenDev?: boolean;
     getStyleCollector?: (() => StyleCollector | Promise<StyleCollector>) | null;
+    useLegacyRender?: boolean;
 }
 interface CommonRouteOptions {
     /**

package/dist/tanstack.cjs

@@ -1,19 +1,15 @@
 'use strict';
 
 const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const client = require('react-dom/client');
 const reactHelmetAsync = require('react-helmet-async');
 const reactRouter = require('@tanstack/react-router');
 const start = require('@tanstack/start');
-const ClientOnly = require('./shared/vite-react-ssg.yL7u7OP5.cjs');
+const ClientOnly = require('./shared/vite-react-ssg.0S4Yj_HC.cjs');
 const state = require('./shared/vite-react-ssg.CjsEygxB.cjs');
 const tanstackRouter = require('./shared/vite-react-ssg.DWHmkjdM.cjs');
 const path = require('./shared/vite-react-ssg.CFQGqC60.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
-
-const React__default = /*#__PURE__*/_interopDefaultCompat(React);
+require('react');
+require('react-dom');
 
 const HAS_ADD_META_FLAG_KEY = "HAS_ADD_META_FLAG_KEY";
 function Experimental_ViteReactSSG(routerOptions, fn, options = {}) {
@@ -125,19 +121,17 @@ function Experimental_ViteReactSSG(routerOptions, fn, options = {}) {
       const { router } = await createRoot(true);
       const isSSR = document.querySelector("[data-server-rendered=true]") !== null;
       if (!isSSR && process.env.NODE_ENV === "development") {
-        const root = client.createRoot(container);
-        React__default.startTransition(() => {
-          root.render(
-            /* @__PURE__ */ jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(reactRouter.RouterProvider, { router }) })
-          );
-        });
+        ClientOnly.render(
+          /* @__PURE__ */ jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(reactRouter.RouterProvider, { router }) }),
+          container,
+          options
+        );
       } else {
-        React__default.startTransition(() => {
-          client.hydrateRoot(
-            container,
-            /* @__PURE__ */ jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(start.StartClient, { router }) })
-          );
-        });
+        ClientOnly.hydrate(
+          /* @__PURE__ */ jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(start.StartClient, { router }) }),
+          container,
+          options
+        );
       }
     })();
   }

package/dist/tanstack.d.cts

@@ -1,6 +1,6 @@
 import { AnyRouter } from '@tanstack/react-router';
-import { V as ViteReactSSGContext$1, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.WtHsP9dD.cjs';
-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.WtHsP9dD.cjs';
+import { V as ViteReactSSGContext$1, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.Di0pROyF.cjs';
+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.cjs';
 export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.Cm9gBlfg.cjs';
 import 'react';
 import 'react-router-dom';

package/dist/tanstack.d.mts

@@ -1,6 +1,6 @@
 import { AnyRouter } from '@tanstack/react-router';
-import { V as ViteReactSSGContext$1, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.WtHsP9dD.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.WtHsP9dD.mjs';
+import { V as ViteReactSSGContext$1, 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';
 import 'react-router-dom';

package/dist/tanstack.d.ts

@@ -1,6 +1,6 @@
 import { AnyRouter } from '@tanstack/react-router';
-import { V as ViteReactSSGContext$1, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.WtHsP9dD.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.WtHsP9dD.js';
+import { V as ViteReactSSGContext$1, 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';
 import 'react-router-dom';

package/dist/tanstack.mjs

@@ -1,15 +1,15 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React from 'react';
-import { createRoot, hydrateRoot } from 'react-dom/client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { HelmetProvider } from 'react-helmet-async';
 import { RouterProvider } from '@tanstack/react-router';
-import { StartClient, Meta } from '@tanstack/start';
-import { d as documentReady } from './shared/vite-react-ssg.DdDMKzrS.mjs';
-export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.DdDMKzrS.mjs';
+import { Meta, StartClient } from '@tanstack/start';
+import { r as render, h as hydrate, d as documentReady } from './shared/vite-react-ssg.DQEe2Gi_.mjs';
+export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.DQEe2Gi_.mjs';
 import { d as deserializeState } from './shared/vite-react-ssg.C6pK7rvr.mjs';
 import { M as META_CONTAINER_ID, c as convertRouteTreeToRouteOption } from './shared/vite-react-ssg.B-j07kW6.mjs';
 export { r as registerPaths } from './shared/vite-react-ssg.B-j07kW6.mjs';
 import { j as joinUrlSegments, w as withLeadingSlash, s as stripBase } from './shared/vite-react-ssg.CjIppNIS.mjs';
+import 'react';
+import 'react-dom';
 
 const HAS_ADD_META_FLAG_KEY = "HAS_ADD_META_FLAG_KEY";
 function Experimental_ViteReactSSG(routerOptions, fn, options = {}) {
@@ -35,7 +35,7 @@ function Experimental_ViteReactSSG(routerOptions, fn, options = {}) {
       component
     });
   }
-  async function createRoot$1(client = false, routePath) {
+  async function createRoot(client = false, routePath) {
     const routes = await convertRouteTreeToRouteOption(
       routerOptions.routes,
       client,
@@ -118,26 +118,24 @@ function Experimental_ViteReactSSG(routerOptions, fn, options = {}) {
           console.warn("[vite-react-ssg] Root container not found.");
         return;
       }
-      const { router } = await createRoot$1(true);
+      const { router } = await createRoot(true);
       const isSSR = document.querySelector("[data-server-rendered=true]") !== null;
       if (!isSSR && process.env.NODE_ENV === "development") {
-        const root = createRoot(container);
-        React.startTransition(() => {
-          root.render(
-            /* @__PURE__ */ jsx(HelmetProvider, { children: /* @__PURE__ */ jsx(RouterProvider, { router }) })
-          );
-        });
+        render(
+          /* @__PURE__ */ jsx(HelmetProvider, { children: /* @__PURE__ */ jsx(RouterProvider, { router }) }),
+          container,
+          options
+        );
       } else {
-        React.startTransition(() => {
-          hydrateRoot(
-            container,
-            /* @__PURE__ */ jsx(HelmetProvider, { children: /* @__PURE__ */ jsx(StartClient, { router }) })
-          );
-        });
+        hydrate(
+          /* @__PURE__ */ jsx(HelmetProvider, { children: /* @__PURE__ */ jsx(StartClient, { router }) }),
+          container,
+          options
+        );
       }
     })();
   }
-  return createRoot$1;
+  return createRoot;
 }
 
 export { Experimental_ViteReactSSG };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-react-ssg",
   "type": "module",
-  "version": "0.8.2",
+  "version": "0.8.3-beta.2",
   "packageManager": "pnpm@9.12.3",
   "description": "Static-site generation for React on Vite.",
   "author": "Riri <Daydreamerriri@outlook.com>",
@@ -85,8 +85,8 @@
     "beasties": "^0.1.0",
     "critters": "^0.0.24",
     "prettier": "*",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^17.0.2||^18.0.0",
+    "react-dom": "^17.0.2||^18.0.0",
     "react-router-dom": "^6.14.1",
     "styled-components": "^6.0.0",
     "vite": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"

package/dist/shared/vite-react-ssg.DdDMKzrS.mjs

@@ -1,43 +0,0 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { Helmet } from 'react-helmet-async';
-import { useState, useEffect, isValidElement } from 'react';
-
-function documentReady(_passThrough) {
-  if (document.readyState === "loading") {
-    return new Promise((resolve) => {
-      document.addEventListener("DOMContentLoaded", () => resolve(_passThrough));
-    });
-  }
-  return Promise.resolve(_passThrough);
-}
-
-function Head(props) {
-  return /* @__PURE__ */ jsx(Helmet, { ...props });
-}
-
-function useIsClient() {
-  const [isBrowser, setIsBrowser] = useState(false);
-  useEffect(() => {
-    setIsBrowser(true);
-  }, []);
-  return isBrowser;
-}
-
-function ClientOnly({
-  children,
-  fallback
-}) {
-  const isBrowser = useIsClient();
-  if (isBrowser) {
-    if (typeof children !== "function" && process.env.NODE_ENV === "development") {
-      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>.
-Current type: ${isValidElement(children) ? "React element" : typeof children}`
-      );
-    }
-    return /* @__PURE__ */ jsx(Fragment, { children: children?.() });
-  }
-  return fallback ?? null;
-}
-
-export { ClientOnly as C, Head as H, documentReady as d };

package/dist/shared/vite-react-ssg.yL7u7OP5.cjs

@@ -1,47 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const reactHelmetAsync = require('react-helmet-async');
-const React = require('react');
-
-function documentReady(_passThrough) {
-  if (document.readyState === "loading") {
-    return new Promise((resolve) => {
-      document.addEventListener("DOMContentLoaded", () => resolve(_passThrough));
-    });
-  }
-  return Promise.resolve(_passThrough);
-}
-
-function Head(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactHelmetAsync.Helmet, { ...props });
-}
-
-function useIsClient() {
-  const [isBrowser, setIsBrowser] = React.useState(false);
-  React.useEffect(() => {
-    setIsBrowser(true);
-  }, []);
-  return isBrowser;
-}
-
-function ClientOnly({
-  children,
-  fallback
-}) {
-  const isBrowser = useIsClient();
-  if (isBrowser) {
-    if (typeof children !== "function" && process.env.NODE_ENV === "development") {
-      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>.
-Current type: ${React.isValidElement(children) ? "React element" : typeof children}`
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children?.() });
-  }
-  return fallback ?? null;
-}
-
-exports.ClientOnly = ClientOnly;
-exports.Head = Head;
-exports.documentReady = documentReady;