vite-react-ssg 0.8.0-beta.3 → 0.8.0

package/README.md

@@ -392,26 +392,26 @@ You can provide your own by looking at the [implementation](./src/style-collecto
 
 ## Critical CSS
 
-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.
+Vite React SSG has built-in support for generating [Critical CSS](https://web.dev/extract-critical-css/) inlined in the HTML via the [`beasties`](https://github.com/danielroe/beasties) package.
 Install it with:
 
 ```bash
-npm i -D critters
+npm i -D beasties
 ```
 
 Critical CSS generation will automatically be enabled for you.
 
-To configure `critters`, pass [its options](https://github.com/GoogleChromeLabs/critters#usage)
-into `ssgOptions.crittersOptions` in `vite.config.ts`:
+To configure `beasties`, pass [its options](https://github.com/danielroe/beasties#usage)
+into `ssgOptions.beastiesOptions` in `vite.config.ts`:
 
 ```ts
 // vite.config.ts
 export default defineConfig({
   ssgOptions: {
-    crittersOptions: {
+    beastiesOptions: {
       // E.g., change the preload strategy
       preload: 'media',
-      // Other options: https://github.com/GoogleChromeLabs/critters#usage
+      // Other options: https://github.com/danielroe/beasties#usage
     },
   },
 })
@@ -488,11 +488,11 @@ interface ViteReactSSGOptions {
    */
   includeAllRoutes?: boolean
   /**
-   * Options for the critters packages.
+   * Options for the beasties packages.
    *
-   * @see https://github.com/GoogleChromeLabs/critters
+   * @see https://github.com/danielroe/beasties#usage
    */
-  crittersOptions?: CrittersOptions | false
+  beastiesOptions?: BeastiesOptions | false
   /**
    * Custom function to modify the routes to do the SSG.
    *

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

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
-import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.Txy2EJkI.cjs';
-export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.Txy2EJkI.cjs';
+import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.MPbH7GTN.cjs';
+export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.MPbH7GTN.cjs';
 export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.Cm9gBlfg.cjs';
 import 'react-router-dom';
+import 'beasties';
 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.mts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
-import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.Txy2EJkI.mjs';
-export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.Txy2EJkI.mjs';
+import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.MPbH7GTN.mjs';
+export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.MPbH7GTN.mjs';
 export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.Cm9gBlfg.mjs';
 import 'react-router-dom';
+import 'beasties';
 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,8 +1,9 @@
 import { ReactNode } from 'react';
-import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.Txy2EJkI.js';
-export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.Txy2EJkI.js';
+import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.MPbH7GTN.js';
+export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.MPbH7GTN.js';
 export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.Cm9gBlfg.js';
 import 'react-router-dom';
+import 'beasties';
 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/index.d.cts

@@ -1,8 +1,9 @@
-import { c as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.Txy2EJkI.cjs';
-export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.Txy2EJkI.cjs';
+import { c as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.MPbH7GTN.cjs';
+export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.MPbH7GTN.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';
+import 'beasties';
 import 'react-helmet-async';
 
 declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/index.d.mts

@@ -1,8 +1,9 @@
-import { c as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.Txy2EJkI.mjs';
-export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.Txy2EJkI.mjs';
+import { c as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.MPbH7GTN.mjs';
+export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.MPbH7GTN.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';
+import 'beasties';
 import 'react-helmet-async';
 
 declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/index.d.ts

@@ -1,8 +1,9 @@
-import { c as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.Txy2EJkI.js';
-export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.Txy2EJkI.js';
+import { c as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.MPbH7GTN.js';
+export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.MPbH7GTN.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';
+import 'beasties';
 import 'react-helmet-async';
 
 declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

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.B_F2Ry8F.cjs');
+const dev = require('../shared/vite-react-ssg.D5dVt1Iv.cjs');
 const webFetch = require('@remix-run/web-fetch');
 require('node:path');
 require('node:module');
@@ -19,7 +19,7 @@ require('node:stream');
 require('react-dom/server');
 require('node:events');
 require('../shared/vite-react-ssg.C2GpVZF1.cjs');
-require('../shared/vite-react-ssg.D0EGioth.cjs');
+require('../shared/vite-react-ssg.DWHmkjdM.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 

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.CphxiYA9.mjs';
+import { b as build, d as dev } from '../shared/vite-react-ssg.DObRRhiz.mjs';
 import { Headers, Request, Response, fetch, FormData } from '@remix-run/web-fetch';
 import 'node:path';
 import 'node:module';
@@ -17,7 +17,7 @@ import 'node:stream';
 import 'react-dom/server';
 import 'node:events';
 import '../shared/vite-react-ssg.C0y5wbxl.mjs';
-import '../shared/vite-react-ssg.4y2OEiyV.mjs';
+import '../shared/vite-react-ssg.B-j07kW6.mjs';
 
 function installGlobals() {
   global.Headers = Headers;

package/dist/node.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const dev = require('./shared/vite-react-ssg.B_F2Ry8F.cjs');
+const dev = require('./shared/vite-react-ssg.D5dVt1Iv.cjs');
 require('node:path');
 require('node:module');
 require('kolorist');
@@ -16,7 +16,7 @@ require('node:stream');
 require('react-dom/server');
 require('node:events');
 require('./shared/vite-react-ssg.C2GpVZF1.cjs');
-require('./shared/vite-react-ssg.D0EGioth.cjs');
+require('./shared/vite-react-ssg.DWHmkjdM.cjs');
 
 
 

package/dist/node.d.cts

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

package/dist/node.d.mts

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

package/dist/node.d.ts

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

package/dist/node.mjs

@@ -1,4 +1,4 @@
-export { b as build, d as dev } from './shared/vite-react-ssg.CphxiYA9.mjs';
+export { b as build, d as dev } from './shared/vite-react-ssg.DObRRhiz.mjs';
 import 'node:path';
 import 'node:module';
 import 'kolorist';
@@ -14,4 +14,4 @@ import 'node:stream';
 import 'react-dom/server';
 import 'node:events';
 import './shared/vite-react-ssg.C0y5wbxl.mjs';
-import './shared/vite-react-ssg.4y2OEiyV.mjs';
+import './shared/vite-react-ssg.B-j07kW6.mjs';

package/dist/shared/{vite-react-ssg.4y2OEiyV.mjs → vite-react-ssg.B-j07kW6.mjs}

@@ -5,7 +5,7 @@ function registerPaths(id, getStaticPaths) {
 async function convertRouteTreeToRouteOption(routeTree, client, visitNode) {
   const routes = [];
   async function traverseRouteTree(node) {
-    if (!client && node.path.includes("$") && node.lazyFn) {
+    if (!client && node.path?.includes("$") && node.lazyFn) {
       await node.lazyFn();
     }
     visitNode?.(node);

package/dist/shared/{vite-react-ssg.B_F2Ry8F.cjs → vite-react-ssg.D5dVt1Iv.cjs}

@@ -15,7 +15,7 @@ const node_stream = require('node:stream');
 const server = require('react-dom/server');
 const node_events = require('node:events');
 const remixRouter = require('./vite-react-ssg.C2GpVZF1.cjs');
-const tanstackRouter = require('./vite-react-ssg.D0EGioth.cjs');
+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; }
@@ -23,7 +23,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 const PQueue__default = /*#__PURE__*/_interopDefaultCompat(PQueue);
 const fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
 
-const version = "0.8.0-beta.3";
+const version = "0.8.0";
 
 function buildLog(text, count) {
   console.log(`
@@ -94,9 +94,22 @@ function isDynamicSegmentsRoute(route) {
   return dynamicRE.test(route);
 }
 
-async function getCritters(outDir, options = {}) {
+async function getBeastiesOrCritters(outDir, options = {}) {
+  try {
+    const BeastiesClass = (await import('beasties')).default;
+    return new BeastiesClass({
+      path: outDir,
+      logLevel: "warn",
+      external: true,
+      inlineFonts: true,
+      preloadFonts: true,
+      ...options
+    });
+  } catch {
+  }
   try {
     const CrittersClass = (await import('critters')).default;
+    console.warn("`critters` is deprecated. Please use `beasties` instead.");
     return new CrittersClass({
       path: outDir,
       logLevel: "warn",
@@ -581,9 +594,9 @@ class TanstackAdapter {
     this.context = context;
   }
   render = async (path$1) => {
-    const { getStyleCollector, router: _router } = this.context;
+    const { getStyleCollector, router: _router, base } = this.context;
     const styleCollector = getStyleCollector ? await getStyleCollector() : null;
-    path$1 = path.withLeadingSlash(path$1);
+    path$1 = `${path.withTrailingSlash(base)}${path.removeLeadingSlash(path$1)}`;
     const { createRouter, createMemoryHistory } = await import('@tanstack/react-router');
     const router = createRouter(_router.options);
     const { StartServer } = await import('@tanstack/start/server');
@@ -698,12 +711,12 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   const outDir = config.build.outDir || "dist";
   const out = node_path.isAbsolute(outDir) ? outDir : node_path.join(root, outDir);
   const configBase = config.base;
+  const mergedOptions = Object.assign({}, config.ssgOptions || {}, ssgOptions);
   const {
     script = "sync",
     mock = false,
     entry = await detectEntry(root),
     formatting = "none",
-    crittersOptions = {},
     includedRoutes: configIncludedRoutes = DefaultIncludedRoutes,
     onBeforePageRender,
     onPageRendered,
@@ -713,7 +726,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
     format = "esm",
     concurrency = 20,
     rootContainerId = "root"
-  } = Object.assign({}, config.ssgOptions || {}, ssgOptions);
+  } = mergedOptions;
+  const beastiesOptions = mergedOptions.beastiesOptions ?? mergedOptions.crittersOptions ?? {};
   if (fs__default.existsSync(ssgOut))
     await fs__default.remove(ssgOut);
   const clientLogger = vite.createLogger();
@@ -781,7 +795,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.B_F2Ry8F.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.D5dVt1Iv.cjs', document.baseURI).href)));
   const { createRoot, includedRoutes: serverEntryIncludedRoutes } = format === "esm" ? await import(serverEntry) : _require(serverEntry);
   const includedRoutes = serverEntryIncludedRoutes || configIncludedRoutes;
   const { routes } = await createRoot(false);
@@ -790,9 +804,9 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   routesPaths = DefaultIncludedRoutes(routesPaths);
   routesPaths = Array.from(new Set(routesPaths));
   buildLog("Rendering Pages...", routesPaths.length);
-  const critters = crittersOptions !== false ? await getCritters(outDir, { publicPath: configBase, ...crittersOptions }) : void 0;
-  if (critters)
-    console.log(`${kolorist.gray("[vite-react-ssg]")} ${kolorist.blue("Critical CSS generation enabled via `critters`")}`);
+  const beasties = beastiesOptions !== false ? await getBeastiesOrCritters(outDir, { publicPath: configBase, ...beastiesOptions }) : void 0;
+  if (beasties)
+    console.log(`${kolorist.gray("[vite-react-ssg]")} ${kolorist.blue("Critical CSS generation enabled via `beasties`")}`);
   const ssrManifest = JSON.parse(await fs__default.readFile(node_path.join(out, ...dotVitedir, "ssr-manifest.json"), "utf-8"));
   const manifest = JSON.parse(await fs__default.readFile(node_path.join(out, ...dotVitedir, "manifest.json"), "utf-8"));
   let indexHTML = await fs__default.readFile(node_path.join(out, "index.html"), "utf-8");
@@ -826,8 +840,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         const html = jsdom.serialize();
         let transformed = await onPageRendered?.(path$1, html, appCtx) || html;
         transformed = transformed.replace(SCRIPT_COMMENT_PLACEHOLDER, `window.__VITE_REACT_SSG_HASH__ = '${hash}'`);
-        if (critters) {
-          transformed = await crittersQueue.add(() => critters.process(transformed));
+        if (beasties) {
+          transformed = await crittersQueue.add(() => beasties.process(transformed));
           transformed = transformed.replace(/<link\srel="stylesheet"/g, '<link rel="stylesheet" crossorigin');
         }
         if (styleTag)

package/dist/shared/{vite-react-ssg.CphxiYA9.mjs → vite-react-ssg.DObRRhiz.mjs}

@@ -13,9 +13,9 @@ import { Writable, Readable } from 'node:stream';
 import { renderToPipeableStream } 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.4y2OEiyV.mjs';
+import { M as META_CONTAINER_ID } from './vite-react-ssg.B-j07kW6.mjs';
 
-const version = "0.8.0-beta.3";
+const version = "0.8.0";
 
 function buildLog(text, count) {
   console.log(`
@@ -86,9 +86,22 @@ function isDynamicSegmentsRoute(route) {
   return dynamicRE.test(route);
 }
 
-async function getCritters(outDir, options = {}) {
+async function getBeastiesOrCritters(outDir, options = {}) {
+  try {
+    const BeastiesClass = (await import('beasties')).default;
+    return new BeastiesClass({
+      path: outDir,
+      logLevel: "warn",
+      external: true,
+      inlineFonts: true,
+      preloadFonts: true,
+      ...options
+    });
+  } catch {
+  }
   try {
     const CrittersClass = (await import('critters')).default;
+    console.warn("`critters` is deprecated. Please use `beasties` instead.");
     return new CrittersClass({
       path: outDir,
       logLevel: "warn",
@@ -573,9 +586,9 @@ class TanstackAdapter {
     this.context = context;
   }
   render = async (path) => {
-    const { getStyleCollector, router: _router } = this.context;
+    const { getStyleCollector, router: _router, base } = this.context;
     const styleCollector = getStyleCollector ? await getStyleCollector() : null;
-    path = withLeadingSlash(path);
+    path = `${withTrailingSlash(base)}${removeLeadingSlash(path)}`;
     const { createRouter, createMemoryHistory } = await import('@tanstack/react-router');
     const router = createRouter(_router.options);
     const { StartServer } = await import('@tanstack/start/server');
@@ -690,12 +703,12 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   const outDir = config.build.outDir || "dist";
   const out = isAbsolute(outDir) ? outDir : join(root, outDir);
   const configBase = config.base;
+  const mergedOptions = Object.assign({}, config.ssgOptions || {}, ssgOptions);
   const {
     script = "sync",
     mock = false,
     entry = await detectEntry(root),
     formatting = "none",
-    crittersOptions = {},
     includedRoutes: configIncludedRoutes = DefaultIncludedRoutes,
     onBeforePageRender,
     onPageRendered,
@@ -705,7 +718,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
     format = "esm",
     concurrency = 20,
     rootContainerId = "root"
-  } = Object.assign({}, config.ssgOptions || {}, ssgOptions);
+  } = mergedOptions;
+  const beastiesOptions = mergedOptions.beastiesOptions ?? mergedOptions.crittersOptions ?? {};
   if (fs.existsSync(ssgOut))
     await fs.remove(ssgOut);
   const clientLogger = createLogger();
@@ -782,9 +796,9 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   routesPaths = DefaultIncludedRoutes(routesPaths);
   routesPaths = Array.from(new Set(routesPaths));
   buildLog("Rendering Pages...", routesPaths.length);
-  const critters = crittersOptions !== false ? await getCritters(outDir, { publicPath: configBase, ...crittersOptions }) : void 0;
-  if (critters)
-    console.log(`${gray("[vite-react-ssg]")} ${blue("Critical CSS generation enabled via `critters`")}`);
+  const beasties = beastiesOptions !== false ? await getBeastiesOrCritters(outDir, { publicPath: configBase, ...beastiesOptions }) : void 0;
+  if (beasties)
+    console.log(`${gray("[vite-react-ssg]")} ${blue("Critical CSS generation enabled via `beasties`")}`);
   const ssrManifest = JSON.parse(await fs.readFile(join(out, ...dotVitedir, "ssr-manifest.json"), "utf-8"));
   const manifest = JSON.parse(await fs.readFile(join(out, ...dotVitedir, "manifest.json"), "utf-8"));
   let indexHTML = await fs.readFile(join(out, "index.html"), "utf-8");
@@ -818,8 +832,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         const html = jsdom.serialize();
         let transformed = await onPageRendered?.(path, html, appCtx) || html;
         transformed = transformed.replace(SCRIPT_COMMENT_PLACEHOLDER, `window.__VITE_REACT_SSG_HASH__ = '${hash}'`);
-        if (critters) {
-          transformed = await crittersQueue.add(() => critters.process(transformed));
+        if (beasties) {
+          transformed = await crittersQueue.add(() => beasties.process(transformed));
           transformed = transformed.replace(/<link\srel="stylesheet"/g, '<link rel="stylesheet" crossorigin');
         }
         if (styleTag)

package/dist/shared/{vite-react-ssg.D0EGioth.cjs → vite-react-ssg.DWHmkjdM.cjs}

@@ -7,7 +7,7 @@ function registerPaths(id, getStaticPaths) {
 async function convertRouteTreeToRouteOption(routeTree, client, visitNode) {
   const routes = [];
   async function traverseRouteTree(node) {
-    if (!client && node.path.includes("$") && node.lazyFn) {
+    if (!client && node.path?.includes("$") && node.lazyFn) {
       await node.lazyFn();
     }
     visitNode?.(node);

package/dist/shared/{vite-react-ssg.Txy2EJkI.d.cts → vite-react-ssg.MPbH7GTN.d.cts}

@@ -1,5 +1,6 @@
 import { ReactNode, ReactElement } from 'react';
 import { NonIndexRouteObject, IndexRouteObject, createBrowserRouter } from 'react-router-dom';
+import { Options } from 'beasties';
 
 type Router = ReturnType<typeof createBrowserRouter>;
 interface CrittersOptions {
@@ -78,9 +79,16 @@ interface ViteReactSSGOptions<Context = ViteReactSSGContext> {
     /**
      * Options for the critters packages.
      *
+     * @deprecated Use `beastiesOptions` instead.
      * @see https://github.com/GoogleChromeLabs/critters
      */
     crittersOptions?: CrittersOptions | false;
+    /**
+     * Options for the beasties package.
+     *
+     * @see https://github.com/danielroe/beasties
+     */
+    beastiesOptions?: Options | false;
     /**
      * Custom function to modify the routes to do the SSG.
      *

package/dist/shared/{vite-react-ssg.Txy2EJkI.d.mts → vite-react-ssg.MPbH7GTN.d.mts}

@@ -1,5 +1,6 @@
 import { ReactNode, ReactElement } from 'react';
 import { NonIndexRouteObject, IndexRouteObject, createBrowserRouter } from 'react-router-dom';
+import { Options } from 'beasties';
 
 type Router = ReturnType<typeof createBrowserRouter>;
 interface CrittersOptions {
@@ -78,9 +79,16 @@ interface ViteReactSSGOptions<Context = ViteReactSSGContext> {
     /**
      * Options for the critters packages.
      *
+     * @deprecated Use `beastiesOptions` instead.
      * @see https://github.com/GoogleChromeLabs/critters
      */
     crittersOptions?: CrittersOptions | false;
+    /**
+     * Options for the beasties package.
+     *
+     * @see https://github.com/danielroe/beasties
+     */
+    beastiesOptions?: Options | false;
     /**
      * Custom function to modify the routes to do the SSG.
      *

package/dist/shared/{vite-react-ssg.Txy2EJkI.d.ts → vite-react-ssg.MPbH7GTN.d.ts}

@@ -1,5 +1,6 @@
 import { ReactNode, ReactElement } from 'react';
 import { NonIndexRouteObject, IndexRouteObject, createBrowserRouter } from 'react-router-dom';
+import { Options } from 'beasties';
 
 type Router = ReturnType<typeof createBrowserRouter>;
 interface CrittersOptions {
@@ -78,9 +79,16 @@ interface ViteReactSSGOptions<Context = ViteReactSSGContext> {
     /**
      * Options for the critters packages.
      *
+     * @deprecated Use `beastiesOptions` instead.
      * @see https://github.com/GoogleChromeLabs/critters
      */
     crittersOptions?: CrittersOptions | false;
+    /**
+     * Options for the beasties package.
+     *
+     * @see https://github.com/danielroe/beasties
+     */
+    beastiesOptions?: Options | false;
     /**
      * Custom function to modify the routes to do the SSG.
      *

package/dist/tanstack.cjs

@@ -8,7 +8,7 @@ const reactRouter = require('@tanstack/react-router');
 const start = require('@tanstack/start');
 const ClientOnly = require('./shared/vite-react-ssg.BuZVBVT6.cjs');
 const state = require('./shared/vite-react-ssg.CjsEygxB.cjs');
-const tanstackRouter = require('./shared/vite-react-ssg.D0EGioth.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; }
@@ -16,7 +16,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 const React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const HAS_ADD_META_FLAG_KEY = "HAS_ADD_META_FLAG_KEY";
-function ViteReactSSG(routerOptions, fn, options = {}) {
+function Experimental_ViteReactSSG(routerOptions, fn, options = {}) {
   const {
     transformState,
     rootContainer = "#root",
@@ -147,4 +147,4 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
 exports.ClientOnly = ClientOnly.ClientOnly;
 exports.Head = ClientOnly.Head;
 exports.registerPaths = tanstackRouter.registerPaths;
-exports.ViteReactSSG = ViteReactSSG;
+exports.Experimental_ViteReactSSG = Experimental_ViteReactSSG;

package/dist/tanstack.d.cts

@@ -1,9 +1,10 @@
 import { AnyRouter } from '@tanstack/react-router';
-import { V as ViteReactSSGContext$1, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.Txy2EJkI.cjs';
-export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.Txy2EJkI.cjs';
+import { V as ViteReactSSGContext$1, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.MPbH7GTN.cjs';
+export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.MPbH7GTN.cjs';
 export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.Cm9gBlfg.cjs';
 import 'react';
 import 'react-router-dom';
+import 'beasties';
 import 'react-helmet-async';
 
 declare function registerPaths(id: string, getStaticPaths: () => string[] | Promise<string[]>): void;
@@ -18,7 +19,7 @@ type ViteReactSSGContext<HasRouter extends boolean = true> = Omit<ViteReactSSGCo
     routeTree?: AnyRouter['routeTree'];
     routerType: 'tanstack';
 };
-declare function ViteReactSSG(routerOptions: RouterOptions, fn?: (context: ViteReactSSGContext<true>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<true>>;
+declare function Experimental_ViteReactSSG(routerOptions: RouterOptions, fn?: (context: ViteReactSSGContext<true>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<true>>;
 declare global {
     interface Window {
         __VITE_REACT_SSG_STATIC_LOADER_DATA__: any;
@@ -26,4 +27,4 @@ declare global {
     }
 }
 
-export { type RouterOptions, ViteReactSSG, ViteReactSSGClientOptions, type ViteReactSSGContext, registerPaths };
+export { Experimental_ViteReactSSG, type RouterOptions, ViteReactSSGClientOptions, type ViteReactSSGContext, registerPaths };

package/dist/tanstack.d.mts

@@ -1,9 +1,10 @@
 import { AnyRouter } from '@tanstack/react-router';
-import { V as ViteReactSSGContext$1, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.Txy2EJkI.mjs';
-export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.Txy2EJkI.mjs';
+import { V as ViteReactSSGContext$1, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.MPbH7GTN.mjs';
+export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.MPbH7GTN.mjs';
 export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.Cm9gBlfg.mjs';
 import 'react';
 import 'react-router-dom';
+import 'beasties';
 import 'react-helmet-async';
 
 declare function registerPaths(id: string, getStaticPaths: () => string[] | Promise<string[]>): void;
@@ -18,7 +19,7 @@ type ViteReactSSGContext<HasRouter extends boolean = true> = Omit<ViteReactSSGCo
     routeTree?: AnyRouter['routeTree'];
     routerType: 'tanstack';
 };
-declare function ViteReactSSG(routerOptions: RouterOptions, fn?: (context: ViteReactSSGContext<true>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<true>>;
+declare function Experimental_ViteReactSSG(routerOptions: RouterOptions, fn?: (context: ViteReactSSGContext<true>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<true>>;
 declare global {
     interface Window {
         __VITE_REACT_SSG_STATIC_LOADER_DATA__: any;
@@ -26,4 +27,4 @@ declare global {
     }
 }
 
-export { type RouterOptions, ViteReactSSG, ViteReactSSGClientOptions, type ViteReactSSGContext, registerPaths };
+export { Experimental_ViteReactSSG, type RouterOptions, ViteReactSSGClientOptions, type ViteReactSSGContext, registerPaths };

package/dist/tanstack.d.ts

@@ -1,9 +1,10 @@
 import { AnyRouter } from '@tanstack/react-router';
-import { V as ViteReactSSGContext$1, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.Txy2EJkI.js';
-export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.Txy2EJkI.js';
+import { V as ViteReactSSGContext$1, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.MPbH7GTN.js';
+export { C as CrittersOptions, I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.MPbH7GTN.js';
 export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.Cm9gBlfg.js';
 import 'react';
 import 'react-router-dom';
+import 'beasties';
 import 'react-helmet-async';
 
 declare function registerPaths(id: string, getStaticPaths: () => string[] | Promise<string[]>): void;
@@ -18,7 +19,7 @@ type ViteReactSSGContext<HasRouter extends boolean = true> = Omit<ViteReactSSGCo
     routeTree?: AnyRouter['routeTree'];
     routerType: 'tanstack';
 };
-declare function ViteReactSSG(routerOptions: RouterOptions, fn?: (context: ViteReactSSGContext<true>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<true>>;
+declare function Experimental_ViteReactSSG(routerOptions: RouterOptions, fn?: (context: ViteReactSSGContext<true>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<true>>;
 declare global {
     interface Window {
         __VITE_REACT_SSG_STATIC_LOADER_DATA__: any;
@@ -26,4 +27,4 @@ declare global {
     }
 }
 
-export { type RouterOptions, ViteReactSSG, ViteReactSSGClientOptions, type ViteReactSSGContext, registerPaths };
+export { Experimental_ViteReactSSG, type RouterOptions, ViteReactSSGClientOptions, type ViteReactSSGContext, registerPaths };

package/dist/tanstack.mjs

@@ -7,12 +7,12 @@ import { StartClient, Meta } from '@tanstack/start';
 import { d as documentReady } from './shared/vite-react-ssg.B6SGTWpD.mjs';
 export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.B6SGTWpD.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.4y2OEiyV.mjs';
-export { r as registerPaths } from './shared/vite-react-ssg.4y2OEiyV.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';
 
 const HAS_ADD_META_FLAG_KEY = "HAS_ADD_META_FLAG_KEY";
-function ViteReactSSG(routerOptions, fn, options = {}) {
+function Experimental_ViteReactSSG(routerOptions, fn, options = {}) {
   const {
     transformState,
     rootContainer = "#root",
@@ -140,4 +140,4 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
   return createRoot$1;
 }
 
-export { ViteReactSSG };
+export { Experimental_ViteReactSSG };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "vite-react-ssg",
   "type": "module",
-  "version": "0.8.0-beta.3",
-  "packageManager": "pnpm@9.10.0",
+  "version": "0.8.0",
+  "packageManager": "pnpm@9.12.3",
   "description": "Static-site generation for React on Vite.",
   "author": "Riri <Daydreamerriri@outlook.com>",
   "license": "MIT",
@@ -82,7 +82,8 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "critters": "^0.0.19",
+    "beasties": "^0.1.0",
+    "critters": "^0.0.24",
     "prettier": "*",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -97,6 +98,9 @@
     "@tanstack/start": {
       "optional": true
     },
+    "beasties": {
+      "optional": true
+    },
     "critters": {
       "optional": true
     },
@@ -131,10 +135,11 @@
     "@types/react-dom": "~18.2.6",
     "@types/yargs": "^17.0.33",
     "@vitejs/plugin-react-swc": "^3.7.1",
-    "bumpp": "^9.5.2",
+    "beasties": "^0.1.0",
+    "bumpp": "^9.8.0",
     "critters": "^0.0.24",
-    "eslint": "^9.10.0",
-    "esno": "^4.7.0",
+    "eslint": "^9.13.0",
+    "esno": "^4.8.0",
     "fast-glob": "3.3.2",
     "prettier": "^3.3.3",
     "react": "^18.2.0",
@@ -144,7 +149,7 @@
     "styled-components": "6.0.5",
     "typescript": "^5.6.2",
     "unbuild": "^3.0.0-rc.11",
-    "vite": "^5.4.9",
+    "vite": "catalog:",
     "vitest": "1.6.0"
   }
 }