vite-react-ssg 0.7.3 → 0.8.0-beta.1

package/dist/tanstack.cjs

@@ -0,0 +1,150 @@
+'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.BuZVBVT6.cjs');
+const state = require('./shared/vite-react-ssg.CjsEygxB.cjs');
+const tanstackRouter = require('./shared/vite-react-ssg.D0EGioth.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);
+
+const HAS_ADD_META_FLAG_KEY = "HAS_ADD_META_FLAG_KEY";
+function ViteReactSSG(routerOptions, fn, options = {}) {
+  const {
+    transformState,
+    rootContainer = "#root",
+    ssrWhenDev,
+    getStyleCollector = null
+  } = options;
+  if (undefined.DEV && 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";
+  const BASE_URL = routerOptions.basename ?? "/";
+  const routeTree = routerOptions.routes;
+  const OriginComponent = routeTree.options.component;
+  if (!OriginComponent[HAS_ADD_META_FLAG_KEY]) {
+    const component = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(OriginComponent, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { id: tanstackRouter.META_CONTAINER_ID, style: { display: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(start.Meta, {}) })
+    ] });
+    component[HAS_ADD_META_FLAG_KEY] = true;
+    routeTree.update({
+      component
+    });
+  }
+  async function createRoot(client = false, routePath) {
+    const routes = await tanstackRouter.convertRouteTreeToRouteOption(
+      routerOptions.routes,
+      client,
+      client ? (node) => {
+        const isSSR = document.querySelector("[data-server-rendered=true]") !== null;
+        if (!isSSR)
+          return;
+        node.options.loader = async (ctx) => {
+          let pathname = ctx.location.pathname;
+          if (undefined.DEV) {
+            const routeId = encodeURIComponent(node.id);
+            const dataQuery = `_data=${routeId}`;
+            const href = ctx.location.href;
+            const url = href.includes("?") ? `${href}&${dataQuery}` : `${href}?${dataQuery}`;
+            const res = await fetch(url);
+            const header = res.headers;
+            const contentType = header.get("content-type");
+            if (contentType?.startsWith("application/json"))
+              return res.json();
+            return res.text();
+          }
+          let staticLoadData;
+          if (window.__VITE_REACT_SSG_STATIC_LOADER_DATA__) {
+            staticLoadData = window.__VITE_REACT_SSG_STATIC_LOADER_DATA__;
+          } else {
+            const manifestUrl = path.joinUrlSegments(BASE_URL, `static-loader-data-manifest-${window.__VITE_REACT_SSG_HASH__}.json`);
+            staticLoadData = await (await fetch(path.withLeadingSlash(manifestUrl))).json();
+            window.__VITE_REACT_SSG_STATIC_LOADER_DATA__ = staticLoadData;
+          }
+          if (BASE_URL !== "/") {
+            pathname = path.stripBase(pathname, BASE_URL);
+          }
+          const routeData = staticLoadData?.[pathname]?.find((item) => item.id === node.id);
+          return routeData?.loaderData ?? null;
+        };
+      } : void 0
+    );
+    const router = routerOptions.router;
+    router.options.isServer = !client;
+    const appRenderCallbacks = [];
+    const onSSRAppRendered = client ? () => {
+    } : (cb) => appRenderCallbacks.push(cb);
+    const triggerOnSSRAppRendered = () => {
+      return Promise.all(appRenderCallbacks.map((cb) => cb()));
+    };
+    const context = {
+      isClient,
+      routes,
+      routeTree,
+      router,
+      routerOptions: {
+        routes,
+        basename: BASE_URL
+      },
+      onSSRAppRendered,
+      triggerOnSSRAppRendered,
+      initialState: {},
+      transformState,
+      routePath,
+      base: BASE_URL,
+      getStyleCollector,
+      routerType: "tanstack"
+    };
+    if (client) {
+      await ClientOnly.documentReady();
+      context.initialState = transformState?.(window.__INITIAL_STATE__ || {}) || state.deserializeState(window.__INITIAL_STATE__);
+    }
+    await fn?.(context);
+    const initialState = context.initialState;
+    return {
+      ...context,
+      initialState
+    };
+  }
+  if (isClient) {
+    (async () => {
+      const container = typeof rootContainer === "string" ? document.querySelector(rootContainer) : rootContainer;
+      if (!container) {
+        if (typeof $jsdom === "undefined")
+          console.warn("[vite-react-ssg] Root container not found.");
+        return;
+      }
+      const { router } = await createRoot(true);
+      const isSSR = document.querySelector("[data-server-rendered=true]") !== null;
+      if (!isSSR && undefined.DEV) {
+        const root = client.createRoot(container);
+        React__default.startTransition(() => {
+          root.render(
+            /* @__PURE__ */ jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(reactRouter.RouterProvider, { router }) })
+          );
+        });
+      } else {
+        React__default.startTransition(() => {
+          client.hydrateRoot(
+            container,
+            /* @__PURE__ */ jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(start.StartClient, { router }) })
+          );
+        });
+      }
+    })();
+  }
+  return createRoot;
+}
+
+exports.ClientOnly = ClientOnly.ClientOnly;
+exports.Head = ClientOnly.Head;
+exports.registerPaths = tanstackRouter.registerPaths;
+exports.ViteReactSSG = ViteReactSSG;

package/dist/tanstack.d.cts

@@ -0,0 +1,29 @@
+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';
+export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.Cm9gBlfg.cjs';
+import 'react';
+import 'react-router-dom';
+import 'react-helmet-async';
+
+declare function registerPaths(id: string, getStaticPaths: () => string[] | Promise<string[]>): void;
+
+interface RouterOptions {
+    router: AnyRouter;
+    routes: AnyRouter['routeTree'];
+    basename?: string;
+}
+type ViteReactSSGContext<HasRouter extends boolean = true> = Omit<ViteReactSSGContext$1, 'router' | 'routerType'> & {
+    router: HasRouter extends true ? AnyRouter : undefined;
+    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 global {
+    interface Window {
+        __VITE_REACT_SSG_STATIC_LOADER_DATA__: any;
+        __VITE_REACT_SSG_HASH__: string;
+    }
+}
+
+export { type RouterOptions, ViteReactSSG, ViteReactSSGClientOptions, type ViteReactSSGContext, registerPaths };

package/dist/tanstack.d.mts

@@ -0,0 +1,29 @@
+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';
+export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.Cm9gBlfg.mjs';
+import 'react';
+import 'react-router-dom';
+import 'react-helmet-async';
+
+declare function registerPaths(id: string, getStaticPaths: () => string[] | Promise<string[]>): void;
+
+interface RouterOptions {
+    router: AnyRouter;
+    routes: AnyRouter['routeTree'];
+    basename?: string;
+}
+type ViteReactSSGContext<HasRouter extends boolean = true> = Omit<ViteReactSSGContext$1, 'router' | 'routerType'> & {
+    router: HasRouter extends true ? AnyRouter : undefined;
+    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 global {
+    interface Window {
+        __VITE_REACT_SSG_STATIC_LOADER_DATA__: any;
+        __VITE_REACT_SSG_HASH__: string;
+    }
+}
+
+export { type RouterOptions, ViteReactSSG, ViteReactSSGClientOptions, type ViteReactSSGContext, registerPaths };

package/dist/tanstack.d.ts

@@ -0,0 +1,29 @@
+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';
+export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.Cm9gBlfg.js';
+import 'react';
+import 'react-router-dom';
+import 'react-helmet-async';
+
+declare function registerPaths(id: string, getStaticPaths: () => string[] | Promise<string[]>): void;
+
+interface RouterOptions {
+    router: AnyRouter;
+    routes: AnyRouter['routeTree'];
+    basename?: string;
+}
+type ViteReactSSGContext<HasRouter extends boolean = true> = Omit<ViteReactSSGContext$1, 'router' | 'routerType'> & {
+    router: HasRouter extends true ? AnyRouter : undefined;
+    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 global {
+    interface Window {
+        __VITE_REACT_SSG_STATIC_LOADER_DATA__: any;
+        __VITE_REACT_SSG_HASH__: string;
+    }
+}
+
+export { type RouterOptions, ViteReactSSG, ViteReactSSGClientOptions, type ViteReactSSGContext, registerPaths };

package/dist/tanstack.mjs

@@ -0,0 +1,143 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+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.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 { 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 = {}) {
+  const {
+    transformState,
+    rootContainer = "#root",
+    ssrWhenDev,
+    getStyleCollector = null
+  } = options;
+  if (import.meta.env.DEV && 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";
+  const BASE_URL = routerOptions.basename ?? "/";
+  const routeTree = routerOptions.routes;
+  const OriginComponent = routeTree.options.component;
+  if (!OriginComponent[HAS_ADD_META_FLAG_KEY]) {
+    const component = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(OriginComponent, {}),
+      /* @__PURE__ */ jsx("div", { id: META_CONTAINER_ID, style: { display: "none" }, children: /* @__PURE__ */ jsx(Meta, {}) })
+    ] });
+    component[HAS_ADD_META_FLAG_KEY] = true;
+    routeTree.update({
+      component
+    });
+  }
+  async function createRoot$1(client = false, routePath) {
+    const routes = await convertRouteTreeToRouteOption(
+      routerOptions.routes,
+      client,
+      client ? (node) => {
+        const isSSR = document.querySelector("[data-server-rendered=true]") !== null;
+        if (!isSSR)
+          return;
+        node.options.loader = async (ctx) => {
+          let pathname = ctx.location.pathname;
+          if (import.meta.env.DEV) {
+            const routeId = encodeURIComponent(node.id);
+            const dataQuery = `_data=${routeId}`;
+            const href = ctx.location.href;
+            const url = href.includes("?") ? `${href}&${dataQuery}` : `${href}?${dataQuery}`;
+            const res = await fetch(url);
+            const header = res.headers;
+            const contentType = header.get("content-type");
+            if (contentType?.startsWith("application/json"))
+              return res.json();
+            return res.text();
+          }
+          let staticLoadData;
+          if (window.__VITE_REACT_SSG_STATIC_LOADER_DATA__) {
+            staticLoadData = window.__VITE_REACT_SSG_STATIC_LOADER_DATA__;
+          } else {
+            const manifestUrl = joinUrlSegments(BASE_URL, `static-loader-data-manifest-${window.__VITE_REACT_SSG_HASH__}.json`);
+            staticLoadData = await (await fetch(withLeadingSlash(manifestUrl))).json();
+            window.__VITE_REACT_SSG_STATIC_LOADER_DATA__ = staticLoadData;
+          }
+          if (BASE_URL !== "/") {
+            pathname = stripBase(pathname, BASE_URL);
+          }
+          const routeData = staticLoadData?.[pathname]?.find((item) => item.id === node.id);
+          return routeData?.loaderData ?? null;
+        };
+      } : void 0
+    );
+    const router = routerOptions.router;
+    router.options.isServer = !client;
+    const appRenderCallbacks = [];
+    const onSSRAppRendered = client ? () => {
+    } : (cb) => appRenderCallbacks.push(cb);
+    const triggerOnSSRAppRendered = () => {
+      return Promise.all(appRenderCallbacks.map((cb) => cb()));
+    };
+    const context = {
+      isClient,
+      routes,
+      routeTree,
+      router,
+      routerOptions: {
+        routes,
+        basename: BASE_URL
+      },
+      onSSRAppRendered,
+      triggerOnSSRAppRendered,
+      initialState: {},
+      transformState,
+      routePath,
+      base: BASE_URL,
+      getStyleCollector,
+      routerType: "tanstack"
+    };
+    if (client) {
+      await documentReady();
+      context.initialState = transformState?.(window.__INITIAL_STATE__ || {}) || deserializeState(window.__INITIAL_STATE__);
+    }
+    await fn?.(context);
+    const initialState = context.initialState;
+    return {
+      ...context,
+      initialState
+    };
+  }
+  if (isClient) {
+    (async () => {
+      const container = typeof rootContainer === "string" ? document.querySelector(rootContainer) : rootContainer;
+      if (!container) {
+        if (typeof $jsdom === "undefined")
+          console.warn("[vite-react-ssg] Root container not found.");
+        return;
+      }
+      const { router } = await createRoot$1(true);
+      const isSSR = document.querySelector("[data-server-rendered=true]") !== null;
+      if (!isSSR && import.meta.env.DEV) {
+        const root = createRoot(container);
+        React.startTransition(() => {
+          root.render(
+            /* @__PURE__ */ jsx(HelmetProvider, { children: /* @__PURE__ */ jsx(RouterProvider, { router }) })
+          );
+        });
+      } else {
+        React.startTransition(() => {
+          hydrateRoot(
+            container,
+            /* @__PURE__ */ jsx(HelmetProvider, { children: /* @__PURE__ */ jsx(StartClient, { router }) })
+          );
+        });
+      }
+    })();
+  }
+  return createRoot$1;
+}
+
+export { ViteReactSSG };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "vite-react-ssg",
   "type": "module",
-  "version": "0.7.3",
-  "packageManager": "pnpm@9.7.1",
+  "version": "0.8.0-beta.1",
+  "packageManager": "pnpm@9.10.0",
   "description": "Static-site generation for React on Vite.",
   "author": "Riri <Daydreamerriri@outlook.com>",
   "license": "MIT",
@@ -36,6 +36,11 @@
       "import": "./dist/client/single-page.mjs",
       "require": "./dist/client/single-page.cjs"
     },
+    "./tanstack": {
+      "types": "./dist/tanstack.d.ts",
+      "import": "./dist/tanstack.mjs",
+      "require": "./dist/tanstack.cjs"
+    },
     "./style-collectors/styled-components": {
       "types": "./dist/style-collectors/styled-components.d.ts",
       "import": "./dist/style-collectors/styled-components.mjs",
@@ -86,6 +91,12 @@
     "vite": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
   },
   "peerDependenciesMeta": {
+    "@tanstack/react-router": {
+      "optional": true
+    },
+    "@tanstack/start": {
+      "optional": true
+    },
     "critters": {
       "optional": true
     },
@@ -103,35 +114,37 @@
     "@remix-run/web-fetch": "^4.4.2",
     "fs-extra": "^11.2.0",
     "html5parser": "^2.0.2",
-    "jsdom": "^24.1.1",
+    "jsdom": "^24.1.3",
     "kolorist": "^1.8.0",
+    "p-queue": "^8.0.1",
     "react-helmet-async": "^1.3.0",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@ririd/eslint-config": "^1.3.2",
+    "@ririd/eslint-config": "^1.3.4",
+    "@tanstack/react-router": "^1.57.15",
+    "@tanstack/start": "^1.57.15",
     "@types/fs-extra": "^11.0.4",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^18.19.44",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
+    "@types/node": "^18.19.50",
+    "@types/react": "~18.2.14",
+    "@types/react-dom": "~18.2.6",
     "@types/yargs": "^17.0.33",
-    "bumpp": "^9.5.1",
-    "critters": "^0.0.22",
-    "eslint": "^9.9.0",
+    "@vitejs/plugin-react-swc": "^3.7.1",
+    "bumpp": "^9.5.2",
+    "critters": "^0.0.24",
+    "eslint": "^9.10.0",
     "esno": "^4.7.0",
     "fast-glob": "3.3.2",
-    "p-queue": "^8.0.1",
-    "prettier": "^3.2.4",
+    "prettier": "^3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.15.0",
+    "react-router-dom": "^6.26.2",
     "rimraf": "5.0.1",
     "styled-components": "6.0.5",
-    "typescript": "^5.5.4",
-    "unbuild": "^2.0.0",
-    "vite": "^5.4.1",
-    "vite-plugin-pwa": "^0.17.5",
+    "typescript": "^5.6.2",
+    "unbuild": "^3.0.0-rc.11",
+    "vite": "^5.4.9",
     "vitest": "1.6.0"
   }
 }