vite-react-ssg 0.6.3 → 0.7.0-beta.1

package/dist/index.cjs

@@ -6,6 +6,7 @@ const reactHelmetAsync = require('react-helmet-async');
 const reactRouterDom = require('react-router-dom');
 const ClientOnly = require('./shared/vite-react-ssg.c1d49976.cjs');
 const state = require('./shared/vite-react-ssg.bee8a5a9.cjs');
+const remixRouter = require('./shared/vite-react-ssg.0408f7e1.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -86,7 +87,7 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
   const isClient = typeof window !== "undefined";
   const BASE_URL = routerOptions.basename ?? "/";
   async function createRoot(client = false, routePath) {
-    const browserRouter = client ? reactRouterDom.createBrowserRouter(routerOptions.routes, { basename: BASE_URL }) : void 0;
+    const browserRouter = client ? reactRouterDom.createBrowserRouter(remixRouter.convertRoutesToDataRoutes(routerOptions.routes, transformStaticLoaderRoute), { basename: BASE_URL }) : void 0;
     const appRenderCallbacks = [];
     const onSSRAppRendered = client ? () => {
     } : (cb) => appRenderCallbacks.push(cb);
@@ -152,6 +153,34 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
     })();
   }
   return createRoot;
+  function transformStaticLoaderRoute(route) {
+    const loader = async ({ request }) => {
+      if (undefined.DEV) {
+        const routeId = encodeURIComponent(route.id);
+        const dataQuery = `_data=${routeId}`;
+        const url = request.url.includes("?") ? `${request.url}&${dataQuery}` : `${request.url}?${dataQuery}`;
+        return fetch(url);
+      } else {
+        let staticLoadData;
+        if (window.__VITE_REACT_SSG_STATIC_LOADER_DATA__) {
+          staticLoadData = window.__VITE_REACT_SSG_STATIC_LOADER_DATA__;
+        } else {
+          const manifestUrl = remixRouter.joinUrlSegments(BASE_URL, `static-loader-data-manifest-${window.__VITE_REACT_SSG_HASH__}.json`);
+          staticLoadData = await (await fetch(remixRouter.withLeadingSlash(manifestUrl))).json();
+          window.__VITE_REACT_SSG_STATIC_LOADER_DATA__ = staticLoadData;
+        }
+        const { url } = request;
+        let { pathname } = new URL(url);
+        if (BASE_URL !== "/") {
+          pathname = remixRouter.stripBase(pathname, BASE_URL);
+        }
+        const routeData = staticLoadData?.[pathname]?.[route.id];
+        return routeData ?? null;
+      }
+    };
+    route.loader = loader;
+    return route;
+  }
 }
 
 exports.ClientOnly = ClientOnly.ClientOnly;

package/dist/index.d.cts

@@ -10,5 +10,11 @@ declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttribu
 declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
 
 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 { Link, NavLink, RouterOptions, ViteReactSSG, ViteReactSSGClientOptions, ViteReactSSGContext };

package/dist/index.d.mts

@@ -10,5 +10,11 @@ declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttribu
 declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
 
 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 { Link, NavLink, RouterOptions, ViteReactSSG, ViteReactSSGClientOptions, ViteReactSSGContext };

package/dist/index.d.ts

@@ -10,5 +10,11 @@ declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttribu
 declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
 
 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 { Link, NavLink, RouterOptions, ViteReactSSG, ViteReactSSGClientOptions, ViteReactSSGContext };

package/dist/index.mjs

@@ -5,6 +5,7 @@ import { useLinkClickHandler, Link as Link$1, NavLink as NavLink$1, matchRoutes,
 import { d as documentReady } from './shared/vite-react-ssg.a292c181.mjs';
 export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.a292c181.mjs';
 import { d as deserializeState } from './shared/vite-react-ssg.579feabb.mjs';
+import { c as convertRoutesToDataRoutes, j as joinUrlSegments, w as withLeadingSlash, s as stripBase } from './shared/vite-react-ssg.054e813a.mjs';
 
 const Link = forwardRef((props, ref) => {
   const {
@@ -81,7 +82,7 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
   const isClient = typeof window !== "undefined";
   const BASE_URL = routerOptions.basename ?? "/";
   async function createRoot$1(client = false, routePath) {
-    const browserRouter = client ? createBrowserRouter(routerOptions.routes, { basename: BASE_URL }) : void 0;
+    const browserRouter = client ? createBrowserRouter(convertRoutesToDataRoutes(routerOptions.routes, transformStaticLoaderRoute), { basename: BASE_URL }) : void 0;
     const appRenderCallbacks = [];
     const onSSRAppRendered = client ? () => {
     } : (cb) => appRenderCallbacks.push(cb);
@@ -147,6 +148,34 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
     })();
   }
   return createRoot$1;
+  function transformStaticLoaderRoute(route) {
+    const loader = async ({ request }) => {
+      if (import.meta.env.DEV) {
+        const routeId = encodeURIComponent(route.id);
+        const dataQuery = `_data=${routeId}`;
+        const url = request.url.includes("?") ? `${request.url}&${dataQuery}` : `${request.url}?${dataQuery}`;
+        return fetch(url);
+      } else {
+        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;
+        }
+        const { url } = request;
+        let { pathname } = new URL(url);
+        if (BASE_URL !== "/") {
+          pathname = stripBase(pathname, BASE_URL);
+        }
+        const routeData = staticLoadData?.[pathname]?.[route.id];
+        return routeData ?? null;
+      }
+    };
+    route.loader = loader;
+    return route;
+  }
 }
 
 export { Link, NavLink, ViteReactSSG };

package/dist/node/cli.cjs

@@ -11,11 +11,14 @@ require('fs-extra');
 require('vite');
 require('jsdom');
 require('../shared/vite-react-ssg.bee8a5a9.cjs');
+require('../shared/vite-react-ssg.0408f7e1.cjs');
 require('node:fs');
 require('react');
 require('react-helmet-async');
 require('node:stream');
 require('react-dom/server');
+require('react-router-dom');
+require('node:events');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 

package/dist/node/cli.mjs

@@ -9,11 +9,14 @@ import 'fs-extra';
 import 'vite';
 import 'jsdom';
 import '../shared/vite-react-ssg.579feabb.mjs';
+import '../shared/vite-react-ssg.054e813a.mjs';
 import 'node:fs';
 import 'react';
 import 'react-helmet-async';
 import 'node:stream';
 import 'react-dom/server';
+import 'react-router-dom';
+import 'node:events';
 
 function installGlobals() {
   global.Headers = Headers;

package/dist/node.cjs

@@ -7,11 +7,14 @@ const fs = require('fs-extra');
 const vite = require('vite');
 const JSDOM = require('jsdom');
 const state = require('./shared/vite-react-ssg.bee8a5a9.cjs');
+const remixRouter = require('./shared/vite-react-ssg.0408f7e1.cjs');
 const node_fs = require('node:fs');
 const React = require('react');
 const reactHelmetAsync = require('react-helmet-async');
 const node_stream = require('node:stream');
 const server = require('react-dom/server');
+const reactRouterDom = require('react-router-dom');
+const node_events = require('node:events');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -919,23 +922,6 @@ function createRequest(path) {
   url.pathname = path;
   return new Request(url.href);
 }
-function joinUrlSegments(a, b) {
-  if (!a || !b)
-    return a || b || "";
-  if (a[a.length - 1] === "/")
-    a = a.substring(0, a.length - 1);
-  if (b[0] !== "/")
-    b = `/${b}`;
-  return a + b;
-}
-function removeLeadingSlash(str) {
-  return str[0] === "/" ? str.slice(1) : str;
-}
-function withTrailingSlash(path) {
-  if (path[path.length - 1] !== "/")
-    return `${path}/`;
-  return path;
-}
 const dynamicRE = /[:*?]/;
 function isDynamicSegmentsRoute(route) {
   if (!route)
@@ -1050,6 +1036,7 @@ function extractHelmet(context, styleCollector) {
   return { htmlAttributes, bodyAttributes, metaAttributes, styleTag };
 }
 
+const SCRIPT_COMMENT_PLACEHOLDER = "/* SCRIPT_COMMENT_PLACEHOLDER */";
 async function renderHTML({
   rootContainerId,
   indexHTML,
@@ -1061,6 +1048,8 @@ async function renderHTML({
 }) {
   const stateScript = initialState ? `
 <script>window.__INITIAL_STATE__=${initialState}<\/script>` : "";
+  const scriptPlaceHolder = `
+<script>${SCRIPT_COMMENT_PLACEHOLDER}<\/script>`;
   const headStartTag = "<head>";
   const metaTags = metaAttributes.join("");
   indexHTML = indexHTML.replace(headStartTag, headStartTag + metaTags);
@@ -1072,7 +1061,7 @@ async function renderHTML({
   if (indexHTML.includes(container)) {
     return indexHTML.replace(
       container,
-      `<div id="${rootContainerId}" data-server-rendered="true">${appHTML}</div>${stateScript}`
+      `<div id="${rootContainerId}" data-server-rendered="true">${appHTML}</div>${stateScript}${scriptPlaceHolder}`
     );
   }
   const html5Parser = await import('html5parser');
@@ -1166,7 +1155,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   const config = await vite.resolveConfig(viteConfig, "build", mode, mode);
   const cwd = process.cwd();
   const root = config.root || cwd;
-  const ssgOut = node_path.join(root, ".vite-react-ssg-temp", Math.random().toString(36).substring(2, 12));
+  const hash = Math.random().toString(36).substring(2, 12);
+  const ssgOut = node_path.join(root, ".vite-react-ssg-temp", hash);
   const outDir = config.build.outDir || "dist";
   const out = node_path.isAbsolute(outDir) ? outDir : node_path.join(root, outDir);
   const configBase = config.base;
@@ -1205,7 +1195,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         }
       }
     },
-    mode: config.mode
+    mode: config.mode,
+    ssr: { noExternal: ["vite-react-ssg"] }
   }));
   if (mock) {
     const { jsdomGlobal } = await import('./chunks/jsdomGlobal.cjs');
@@ -1230,7 +1221,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         }
       }
     },
-    mode: config.mode
+    mode: config.mode,
+    ssr: { noExternal: ["vite-react-ssg"] }
   }));
   const prefix = format === "esm" && process.platform === "win32" ? "file://" : "";
   const ext = format === "esm" ? ".mjs" : ".cjs";
@@ -1254,6 +1246,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   indexHTML = rewriteScripts(indexHTML, script);
   const queue = new PQueue({ concurrency });
   const crittersQueue = new PQueue({ concurrency: 1 });
+  const staticLoaderDataManifest = {};
   for (const path of routesPaths) {
     queue.add(async () => {
       try {
@@ -1261,9 +1254,10 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         const { initialState, base, routes: routes2, triggerOnSSRAppRendered, transformState = state.serializeState, getStyleCollector, app } = appCtx;
         const styleCollector = getStyleCollector ? await getStyleCollector() : null;
         const transformedIndexHTML = await onBeforePageRender?.(path, indexHTML, appCtx) || indexHTML;
-        const fetchUrl = `${withTrailingSlash(base)}${removeLeadingSlash(path)}`;
+        const fetchUrl = `${remixRouter.withTrailingSlash(base)}${remixRouter.removeLeadingSlash(path)}`;
         const request = createRequest(fetchUrl);
-        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render(app ?? [...routes2], request, styleCollector, base);
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render(app ?? [...routes2], request, styleCollector, base);
+        staticLoaderDataManifest[path] = routerContext?.loaderData;
         await triggerOnSSRAppRendered?.(path, appHTML, appCtx);
         const renderedHTML = await renderHTML({
           rootContainerId,
@@ -1279,6 +1273,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         renderPreloadLinks(jsdom.window.document, modules, ssrManifest);
         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));
           transformed = transformed.replace(/<link\srel="stylesheet"/g, '<link rel="stylesheet" crossorigin');
@@ -1300,6 +1295,7 @@ ${err.stack}`);
     });
   }
   await queue.start().onIdle();
+  await fs__default.writeFile(node_path.join(out, `static-loader-data-manifest-${hash}.json`), JSON.stringify(staticLoaderDataManifest, null, 2));
   await fs__default.remove(node_path.join(root, ".vite-react-ssg-temp"));
   const pwaPlugin = config.plugins.find((i) => i.name === "vite-plugin-pwa")?.api;
   if (pwaPlugin && !pwaPlugin.disabled && pwaPlugin.generateSW) {
@@ -1397,6 +1393,201 @@ function fromNodeRequest(nodeReq) {
   };
   return new Request(url.href, init);
 }
+async function toNodeRequest(res, nodeRes) {
+  nodeRes.statusCode = res.status;
+  nodeRes.statusMessage = res.statusText;
+  for (const [name, value] of res.headers) {
+    nodeRes.setHeader(name, value);
+  }
+  if (res.body) {
+    const responseBody = res.body;
+    const readable = node_stream.Readable.from(responseBody);
+    readable.pipe(nodeRes);
+    await node_events.once(readable, "end");
+  } else {
+    nodeRes.end();
+  }
+}
+
+function ssrServerPlugin({
+  template,
+  ssrEntry,
+  onBeforePageRender,
+  entry,
+  rootContainerId,
+  onPageRendered
+}) {
+  return {
+    name: "vite-react-ssg:dev-server-remix",
+    configureServer(server) {
+      const renderMiddleware = async (req, res, _next) => {
+        try {
+          const url = req.originalUrl;
+          const createRoot = await server.ssrLoadModule(ssrEntry).then((m) => m.createRoot);
+          const appCtx = await createRoot(false, url);
+          const { routes, getStyleCollector, base, app } = appCtx;
+          const searchParams = new URLSearchParams(url.split("?")[1]);
+          if (!app && searchParams.has("_data")) {
+            const request = fromNodeRequest(req);
+            const url2 = new URL(request.url);
+            const routeId = decodeURIComponent(searchParams.get("_data"));
+            const matches = reactRouterDom.matchRoutes(
+              remixRouter.convertRoutesToDataRoutes([...routes], (route) => route),
+              {
+                pathname: url2.pathname,
+                search: url2.search,
+                hash: url2.hash,
+                state: null,
+                key: "default"
+              },
+              base
+            );
+            if (!matches) {
+              res.statusCode = 404;
+              res.end(`Route not found: ${routeId}`);
+              return;
+            }
+            const match = matches.find((m) => m.route.id === routeId);
+            if (!match) {
+              res.statusCode = 404;
+              res.end(`Route not found: ${routeId}`);
+              return;
+            }
+            const loader = match.route.loader ?? await match.route.lazy?.().then((m) => m.loader);
+            if (!loader) {
+              res.statusCode = 200;
+              res.end(`There is no loader for the route: ${routeId}`);
+              return;
+            }
+            const response = await callRouteLoader({
+              loader,
+              params: match.params,
+              request,
+              routeId
+            });
+            await toNodeRequest(response, res);
+            return;
+          }
+          const indexHTML = await server.transformIndexHtml(url, template);
+          const transformedIndexHTML = await onBeforePageRender?.(url, indexHTML, appCtx) || indexHTML;
+          const styleCollector = getStyleCollector ? await getStyleCollector() : null;
+          const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render(app ?? [...routes], fromNodeRequest(req), styleCollector, base);
+          metaAttributes.push(styleTag);
+          const matchesEntries = routerContext?.matches.map((match) => match.route.entry).filter((entry2) => !!entry2).map((entry2) => entry2[0] === "/" ? entry2 : `/${entry2}`) ?? [];
+          const mods = await Promise.all(
+            [ssrEntry, entry, ...matchesEntries].map(async (entry2) => await server.moduleGraph.getModuleByUrl(entry2))
+          );
+          const assetsUrls = /* @__PURE__ */ new Set();
+          const collectAssets = async (mod) => {
+            if (!mod || !mod?.ssrTransformResult)
+              return;
+            const { deps = [], dynamicDeps = [] } = mod?.ssrTransformResult;
+            const allDeps = [...deps, ...dynamicDeps];
+            for (const dep of allDeps) {
+              if (dep.endsWith(".css")) {
+                assetsUrls.add(dep);
+              } else if (dep.endsWith(".ts") || dep.endsWith(".tsx")) {
+                const depModule = await server.moduleGraph.getModuleByUrl(dep);
+                depModule && await collectAssets(depModule);
+              }
+            }
+          };
+          await Promise.all(mods.map(async (mod) => collectAssets(mod)));
+          const preloadLink = [...assetsUrls].map((item) => createLink$1(remixRouter.joinUrlSegments(server.config.base, item)));
+          metaAttributes.push(...preloadLink);
+          const renderedHTML = await renderHTML({
+            rootContainerId,
+            appHTML,
+            indexHTML: transformedIndexHTML,
+            metaAttributes,
+            bodyAttributes,
+            htmlAttributes,
+            initialState: null
+          });
+          const transformed = await onPageRendered?.(url, renderedHTML, appCtx) || renderedHTML;
+          res.statusCode = 200;
+          res.setHeader("Content-Type", "text/html");
+          const isDev = "pluginContainer" in server;
+          const headers = isDev ? server.config.server.headers : server.config.preview.headers;
+          vite.send(req, res, transformed, "html", { headers });
+        } catch (e) {
+          server.ssrFixStacktrace(e);
+          console.error(`[vite-react-ssg] error: ${e.stack}`);
+          res.statusCode = 500;
+          res.end(e.stack);
+        }
+      };
+      return () => {
+        server.middlewares.use(renderMiddleware);
+      };
+    }
+  };
+}
+async function callRouteLoader({
+  // loadContext,
+  loader,
+  params,
+  request,
+  routeId
+  // singleFetch,
+  // response,
+}) {
+  const result = await loader({
+    request: stripDataParam(stripIndexParam(request)),
+    // context: loadContext,
+    params
+    // Only provided when single fetch is enabled, and made available via
+    // `defineLoader` types, not `LoaderFunctionArgs`
+    // ...(singleFetch ? { response } : null),
+  });
+  if (result === void 0) {
+    throw new Error(
+      `You defined a loader for route "${routeId}" but didn't return anything from your \`loader\` function. Please return a value or \`null\`.`
+    );
+  }
+  return isResponse(result) ? result : reactRouterDom.json(result);
+}
+function isResponse(value) {
+  return value != null && typeof value.status === "number" && typeof value.statusText === "string" && typeof value.headers === "object" && typeof value.body !== "undefined";
+}
+function stripIndexParam(request) {
+  const url = new URL(request.url);
+  const indexValues = url.searchParams.getAll("index");
+  url.searchParams.delete("index");
+  const indexValuesToKeep = [];
+  for (const indexValue of indexValues) {
+    if (indexValue) {
+      indexValuesToKeep.push(indexValue);
+    }
+  }
+  for (const toKeep of indexValuesToKeep) {
+    url.searchParams.append("index", toKeep);
+  }
+  const init = {
+    method: request.method,
+    body: request.body,
+    headers: request.headers,
+    signal: request.signal
+  };
+  if (init.body) {
+    init.duplex = "half";
+  }
+  return new Request(url.href, init);
+}
+function stripDataParam(request) {
+  const url = new URL(request.url);
+  url.searchParams.delete("_data");
+  const init = {
+    method: request.method,
+    body: request.body,
+    headers: request.headers,
+    signal: request.signal
+  };
+  if (init.body) {
+    init.duplex = "half";
+  }
+  return new Request(url.href, init);
+}
 
 async function dev(ssgOptions = {}, viteConfig = {}, customOptions) {
   const mode = process.env.MODE || process.env.NODE_ENV || ssgOptions.mode || "development";
@@ -1431,68 +1622,14 @@ ${err.stack}`
       ...viteConfig,
       plugins: [
         ...viteConfig.plugins ?? [],
-        {
-          name: "vite-react-ssg:dev-server-remix",
-          configureServer(server) {
-            return () => {
-              server.middlewares.use(async (req, res, _next) => {
-                try {
-                  const url = req.originalUrl;
-                  const indexHTML = await viteServer.transformIndexHtml(url, template);
-                  const createRoot = await viteServer.ssrLoadModule(ssrEntry).then((m) => m.createRoot);
-                  const appCtx = await createRoot(false, url);
-                  const { routes, getStyleCollector, base, app } = appCtx;
-                  const transformedIndexHTML = await onBeforePageRender?.(url, indexHTML, appCtx) || indexHTML;
-                  const styleCollector = getStyleCollector ? await getStyleCollector() : null;
-                  const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render(app ?? [...routes], fromNodeRequest(req), styleCollector, base);
-                  metaAttributes.push(styleTag);
-                  const matchesEntries = routerContext?.matches.map((match) => match.route.entry).filter((entry2) => !!entry2).map((entry2) => entry2[0] === "/" ? entry2 : `/${entry2}`) ?? [];
-                  const mods = await Promise.all(
-                    [ssrEntry, entry, ...matchesEntries].map(async (entry2) => await viteServer.moduleGraph.getModuleByUrl(entry2))
-                  );
-                  const assetsUrls = /* @__PURE__ */ new Set();
-                  const collectAssets = async (mod) => {
-                    if (!mod || !mod?.ssrTransformResult)
-                      return;
-                    const { deps = [], dynamicDeps = [] } = mod?.ssrTransformResult;
-                    const allDeps = [...deps, ...dynamicDeps];
-                    for (const dep of allDeps) {
-                      if (dep.endsWith(".css")) {
-                        assetsUrls.add(dep);
-                      } else if (dep.endsWith(".ts") || dep.endsWith(".tsx")) {
-                        const depModule = await viteServer.moduleGraph.getModuleByUrl(dep);
-                        depModule && await collectAssets(depModule);
-                      }
-                    }
-                  };
-                  await Promise.all(mods.map(async (mod) => collectAssets(mod)));
-                  const preloadLink = [...assetsUrls].map((item) => createLink$1(joinUrlSegments(config.base, item)));
-                  metaAttributes.push(...preloadLink);
-                  const renderedHTML = await renderHTML({
-                    rootContainerId,
-                    appHTML,
-                    indexHTML: transformedIndexHTML,
-                    metaAttributes,
-                    bodyAttributes,
-                    htmlAttributes,
-                    initialState: null
-                  });
-                  const transformed = await onPageRendered?.(url, renderedHTML, appCtx) || renderedHTML;
-                  res.statusCode = 200;
-                  res.setHeader("Content-Type", "text/html");
-                  const isDev = "pluginContainer" in server;
-                  const headers = isDev ? server.config.server.headers : server.config.preview.headers;
-                  vite.send(req, res, transformed, "html", { headers });
-                } catch (e) {
-                  viteServer.ssrFixStacktrace(e);
-                  console.error(`[vite-react-ssg] error: ${e.stack}`);
-                  res.statusCode = 500;
-                  res.end(e.stack);
-                }
-              });
-            };
-          }
-        }
+        ssrServerPlugin({
+          template,
+          ssrEntry,
+          onBeforePageRender,
+          onPageRendered,
+          entry,
+          rootContainerId
+        })
       ]
     });
     await viteServer.listen();

package/dist/node.mjs

@@ -2,14 +2,17 @@ import { join, isAbsolute, parse, dirname } from 'node:path';
 import { createRequire } from 'node:module';
 import { gray, yellow, blue, dim, cyan, red, green, reset, bold, bgLightCyan } from 'kolorist';
 import fs from 'fs-extra';
-import { resolveConfig, build as build$1, mergeConfig, version as version$1, createServer, send } from 'vite';
+import { resolveConfig, build as build$1, mergeConfig, version as version$1, send, createServer } from 'vite';
 import { JSDOM } from 'jsdom';
 import { s as serializeState } from './shared/vite-react-ssg.579feabb.mjs';
+import { a as withTrailingSlash, r as removeLeadingSlash, c as convertRoutesToDataRoutes, j as joinUrlSegments } from './shared/vite-react-ssg.054e813a.mjs';
 import { readFileSync } from 'node:fs';
 import React from 'react';
 import { HelmetProvider } from 'react-helmet-async';
-import { Writable } from 'node:stream';
+import { Writable, Readable } from 'node:stream';
 import { renderToPipeableStream } from 'react-dom/server';
+import { matchRoutes, json } from 'react-router-dom';
+import { once } from 'node:events';
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -912,23 +915,6 @@ function createRequest(path) {
   url.pathname = path;
   return new Request(url.href);
 }
-function joinUrlSegments(a, b) {
-  if (!a || !b)
-    return a || b || "";
-  if (a[a.length - 1] === "/")
-    a = a.substring(0, a.length - 1);
-  if (b[0] !== "/")
-    b = `/${b}`;
-  return a + b;
-}
-function removeLeadingSlash(str) {
-  return str[0] === "/" ? str.slice(1) : str;
-}
-function withTrailingSlash(path) {
-  if (path[path.length - 1] !== "/")
-    return `${path}/`;
-  return path;
-}
 const dynamicRE = /[:*?]/;
 function isDynamicSegmentsRoute(route) {
   if (!route)
@@ -1043,6 +1029,7 @@ function extractHelmet(context, styleCollector) {
   return { htmlAttributes, bodyAttributes, metaAttributes, styleTag };
 }
 
+const SCRIPT_COMMENT_PLACEHOLDER = "/* SCRIPT_COMMENT_PLACEHOLDER */";
 async function renderHTML({
   rootContainerId,
   indexHTML,
@@ -1054,6 +1041,8 @@ async function renderHTML({
 }) {
   const stateScript = initialState ? `
 <script>window.__INITIAL_STATE__=${initialState}<\/script>` : "";
+  const scriptPlaceHolder = `
+<script>${SCRIPT_COMMENT_PLACEHOLDER}<\/script>`;
   const headStartTag = "<head>";
   const metaTags = metaAttributes.join("");
   indexHTML = indexHTML.replace(headStartTag, headStartTag + metaTags);
@@ -1065,7 +1054,7 @@ async function renderHTML({
   if (indexHTML.includes(container)) {
     return indexHTML.replace(
       container,
-      `<div id="${rootContainerId}" data-server-rendered="true">${appHTML}</div>${stateScript}`
+      `<div id="${rootContainerId}" data-server-rendered="true">${appHTML}</div>${stateScript}${scriptPlaceHolder}`
     );
   }
   const html5Parser = await import('html5parser');
@@ -1159,7 +1148,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   const config = await resolveConfig(viteConfig, "build", mode, mode);
   const cwd = process.cwd();
   const root = config.root || cwd;
-  const ssgOut = join(root, ".vite-react-ssg-temp", Math.random().toString(36).substring(2, 12));
+  const hash = Math.random().toString(36).substring(2, 12);
+  const ssgOut = join(root, ".vite-react-ssg-temp", hash);
   const outDir = config.build.outDir || "dist";
   const out = isAbsolute(outDir) ? outDir : join(root, outDir);
   const configBase = config.base;
@@ -1198,7 +1188,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         }
       }
     },
-    mode: config.mode
+    mode: config.mode,
+    ssr: { noExternal: ["vite-react-ssg"] }
   }));
   if (mock) {
     const { jsdomGlobal } = await import('./chunks/jsdomGlobal.mjs');
@@ -1223,7 +1214,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         }
       }
     },
-    mode: config.mode
+    mode: config.mode,
+    ssr: { noExternal: ["vite-react-ssg"] }
   }));
   const prefix = format === "esm" && process.platform === "win32" ? "file://" : "";
   const ext = format === "esm" ? ".mjs" : ".cjs";
@@ -1247,6 +1239,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   indexHTML = rewriteScripts(indexHTML, script);
   const queue = new PQueue({ concurrency });
   const crittersQueue = new PQueue({ concurrency: 1 });
+  const staticLoaderDataManifest = {};
   for (const path of routesPaths) {
     queue.add(async () => {
       try {
@@ -1256,7 +1249,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         const transformedIndexHTML = await onBeforePageRender?.(path, indexHTML, appCtx) || indexHTML;
         const fetchUrl = `${withTrailingSlash(base)}${removeLeadingSlash(path)}`;
         const request = createRequest(fetchUrl);
-        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render(app ?? [...routes2], request, styleCollector, base);
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render(app ?? [...routes2], request, styleCollector, base);
+        staticLoaderDataManifest[path] = routerContext?.loaderData;
         await triggerOnSSRAppRendered?.(path, appHTML, appCtx);
         const renderedHTML = await renderHTML({
           rootContainerId,
@@ -1272,6 +1266,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         renderPreloadLinks(jsdom.window.document, modules, ssrManifest);
         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));
           transformed = transformed.replace(/<link\srel="stylesheet"/g, '<link rel="stylesheet" crossorigin');
@@ -1293,6 +1288,7 @@ ${err.stack}`);
     });
   }
   await queue.start().onIdle();
+  await fs.writeFile(join(out, `static-loader-data-manifest-${hash}.json`), JSON.stringify(staticLoaderDataManifest, null, 2));
   await fs.remove(join(root, ".vite-react-ssg-temp"));
   const pwaPlugin = config.plugins.find((i) => i.name === "vite-plugin-pwa")?.api;
   if (pwaPlugin && !pwaPlugin.disabled && pwaPlugin.generateSW) {
@@ -1390,6 +1386,201 @@ function fromNodeRequest(nodeReq) {
   };
   return new Request(url.href, init);
 }
+async function toNodeRequest(res, nodeRes) {
+  nodeRes.statusCode = res.status;
+  nodeRes.statusMessage = res.statusText;
+  for (const [name, value] of res.headers) {
+    nodeRes.setHeader(name, value);
+  }
+  if (res.body) {
+    const responseBody = res.body;
+    const readable = Readable.from(responseBody);
+    readable.pipe(nodeRes);
+    await once(readable, "end");
+  } else {
+    nodeRes.end();
+  }
+}
+
+function ssrServerPlugin({
+  template,
+  ssrEntry,
+  onBeforePageRender,
+  entry,
+  rootContainerId,
+  onPageRendered
+}) {
+  return {
+    name: "vite-react-ssg:dev-server-remix",
+    configureServer(server) {
+      const renderMiddleware = async (req, res, _next) => {
+        try {
+          const url = req.originalUrl;
+          const createRoot = await server.ssrLoadModule(ssrEntry).then((m) => m.createRoot);
+          const appCtx = await createRoot(false, url);
+          const { routes, getStyleCollector, base, app } = appCtx;
+          const searchParams = new URLSearchParams(url.split("?")[1]);
+          if (!app && searchParams.has("_data")) {
+            const request = fromNodeRequest(req);
+            const url2 = new URL(request.url);
+            const routeId = decodeURIComponent(searchParams.get("_data"));
+            const matches = matchRoutes(
+              convertRoutesToDataRoutes([...routes], (route) => route),
+              {
+                pathname: url2.pathname,
+                search: url2.search,
+                hash: url2.hash,
+                state: null,
+                key: "default"
+              },
+              base
+            );
+            if (!matches) {
+              res.statusCode = 404;
+              res.end(`Route not found: ${routeId}`);
+              return;
+            }
+            const match = matches.find((m) => m.route.id === routeId);
+            if (!match) {
+              res.statusCode = 404;
+              res.end(`Route not found: ${routeId}`);
+              return;
+            }
+            const loader = match.route.loader ?? await match.route.lazy?.().then((m) => m.loader);
+            if (!loader) {
+              res.statusCode = 200;
+              res.end(`There is no loader for the route: ${routeId}`);
+              return;
+            }
+            const response = await callRouteLoader({
+              loader,
+              params: match.params,
+              request,
+              routeId
+            });
+            await toNodeRequest(response, res);
+            return;
+          }
+          const indexHTML = await server.transformIndexHtml(url, template);
+          const transformedIndexHTML = await onBeforePageRender?.(url, indexHTML, appCtx) || indexHTML;
+          const styleCollector = getStyleCollector ? await getStyleCollector() : null;
+          const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render(app ?? [...routes], fromNodeRequest(req), styleCollector, base);
+          metaAttributes.push(styleTag);
+          const matchesEntries = routerContext?.matches.map((match) => match.route.entry).filter((entry2) => !!entry2).map((entry2) => entry2[0] === "/" ? entry2 : `/${entry2}`) ?? [];
+          const mods = await Promise.all(
+            [ssrEntry, entry, ...matchesEntries].map(async (entry2) => await server.moduleGraph.getModuleByUrl(entry2))
+          );
+          const assetsUrls = /* @__PURE__ */ new Set();
+          const collectAssets = async (mod) => {
+            if (!mod || !mod?.ssrTransformResult)
+              return;
+            const { deps = [], dynamicDeps = [] } = mod?.ssrTransformResult;
+            const allDeps = [...deps, ...dynamicDeps];
+            for (const dep of allDeps) {
+              if (dep.endsWith(".css")) {
+                assetsUrls.add(dep);
+              } else if (dep.endsWith(".ts") || dep.endsWith(".tsx")) {
+                const depModule = await server.moduleGraph.getModuleByUrl(dep);
+                depModule && await collectAssets(depModule);
+              }
+            }
+          };
+          await Promise.all(mods.map(async (mod) => collectAssets(mod)));
+          const preloadLink = [...assetsUrls].map((item) => createLink$1(joinUrlSegments(server.config.base, item)));
+          metaAttributes.push(...preloadLink);
+          const renderedHTML = await renderHTML({
+            rootContainerId,
+            appHTML,
+            indexHTML: transformedIndexHTML,
+            metaAttributes,
+            bodyAttributes,
+            htmlAttributes,
+            initialState: null
+          });
+          const transformed = await onPageRendered?.(url, renderedHTML, appCtx) || renderedHTML;
+          res.statusCode = 200;
+          res.setHeader("Content-Type", "text/html");
+          const isDev = "pluginContainer" in server;
+          const headers = isDev ? server.config.server.headers : server.config.preview.headers;
+          send(req, res, transformed, "html", { headers });
+        } catch (e) {
+          server.ssrFixStacktrace(e);
+          console.error(`[vite-react-ssg] error: ${e.stack}`);
+          res.statusCode = 500;
+          res.end(e.stack);
+        }
+      };
+      return () => {
+        server.middlewares.use(renderMiddleware);
+      };
+    }
+  };
+}
+async function callRouteLoader({
+  // loadContext,
+  loader,
+  params,
+  request,
+  routeId
+  // singleFetch,
+  // response,
+}) {
+  const result = await loader({
+    request: stripDataParam(stripIndexParam(request)),
+    // context: loadContext,
+    params
+    // Only provided when single fetch is enabled, and made available via
+    // `defineLoader` types, not `LoaderFunctionArgs`
+    // ...(singleFetch ? { response } : null),
+  });
+  if (result === void 0) {
+    throw new Error(
+      `You defined a loader for route "${routeId}" but didn't return anything from your \`loader\` function. Please return a value or \`null\`.`
+    );
+  }
+  return isResponse(result) ? result : json(result);
+}
+function isResponse(value) {
+  return value != null && typeof value.status === "number" && typeof value.statusText === "string" && typeof value.headers === "object" && typeof value.body !== "undefined";
+}
+function stripIndexParam(request) {
+  const url = new URL(request.url);
+  const indexValues = url.searchParams.getAll("index");
+  url.searchParams.delete("index");
+  const indexValuesToKeep = [];
+  for (const indexValue of indexValues) {
+    if (indexValue) {
+      indexValuesToKeep.push(indexValue);
+    }
+  }
+  for (const toKeep of indexValuesToKeep) {
+    url.searchParams.append("index", toKeep);
+  }
+  const init = {
+    method: request.method,
+    body: request.body,
+    headers: request.headers,
+    signal: request.signal
+  };
+  if (init.body) {
+    init.duplex = "half";
+  }
+  return new Request(url.href, init);
+}
+function stripDataParam(request) {
+  const url = new URL(request.url);
+  url.searchParams.delete("_data");
+  const init = {
+    method: request.method,
+    body: request.body,
+    headers: request.headers,
+    signal: request.signal
+  };
+  if (init.body) {
+    init.duplex = "half";
+  }
+  return new Request(url.href, init);
+}
 
 async function dev(ssgOptions = {}, viteConfig = {}, customOptions) {
   const mode = process.env.MODE || process.env.NODE_ENV || ssgOptions.mode || "development";
@@ -1424,68 +1615,14 @@ ${err.stack}`
       ...viteConfig,
       plugins: [
         ...viteConfig.plugins ?? [],
-        {
-          name: "vite-react-ssg:dev-server-remix",
-          configureServer(server) {
-            return () => {
-              server.middlewares.use(async (req, res, _next) => {
-                try {
-                  const url = req.originalUrl;
-                  const indexHTML = await viteServer.transformIndexHtml(url, template);
-                  const createRoot = await viteServer.ssrLoadModule(ssrEntry).then((m) => m.createRoot);
-                  const appCtx = await createRoot(false, url);
-                  const { routes, getStyleCollector, base, app } = appCtx;
-                  const transformedIndexHTML = await onBeforePageRender?.(url, indexHTML, appCtx) || indexHTML;
-                  const styleCollector = getStyleCollector ? await getStyleCollector() : null;
-                  const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render(app ?? [...routes], fromNodeRequest(req), styleCollector, base);
-                  metaAttributes.push(styleTag);
-                  const matchesEntries = routerContext?.matches.map((match) => match.route.entry).filter((entry2) => !!entry2).map((entry2) => entry2[0] === "/" ? entry2 : `/${entry2}`) ?? [];
-                  const mods = await Promise.all(
-                    [ssrEntry, entry, ...matchesEntries].map(async (entry2) => await viteServer.moduleGraph.getModuleByUrl(entry2))
-                  );
-                  const assetsUrls = /* @__PURE__ */ new Set();
-                  const collectAssets = async (mod) => {
-                    if (!mod || !mod?.ssrTransformResult)
-                      return;
-                    const { deps = [], dynamicDeps = [] } = mod?.ssrTransformResult;
-                    const allDeps = [...deps, ...dynamicDeps];
-                    for (const dep of allDeps) {
-                      if (dep.endsWith(".css")) {
-                        assetsUrls.add(dep);
-                      } else if (dep.endsWith(".ts") || dep.endsWith(".tsx")) {
-                        const depModule = await viteServer.moduleGraph.getModuleByUrl(dep);
-                        depModule && await collectAssets(depModule);
-                      }
-                    }
-                  };
-                  await Promise.all(mods.map(async (mod) => collectAssets(mod)));
-                  const preloadLink = [...assetsUrls].map((item) => createLink$1(joinUrlSegments(config.base, item)));
-                  metaAttributes.push(...preloadLink);
-                  const renderedHTML = await renderHTML({
-                    rootContainerId,
-                    appHTML,
-                    indexHTML: transformedIndexHTML,
-                    metaAttributes,
-                    bodyAttributes,
-                    htmlAttributes,
-                    initialState: null
-                  });
-                  const transformed = await onPageRendered?.(url, renderedHTML, appCtx) || renderedHTML;
-                  res.statusCode = 200;
-                  res.setHeader("Content-Type", "text/html");
-                  const isDev = "pluginContainer" in server;
-                  const headers = isDev ? server.config.server.headers : server.config.preview.headers;
-                  send(req, res, transformed, "html", { headers });
-                } catch (e) {
-                  viteServer.ssrFixStacktrace(e);
-                  console.error(`[vite-react-ssg] error: ${e.stack}`);
-                  res.statusCode = 500;
-                  res.end(e.stack);
-                }
-              });
-            };
-          }
-        }
+        ssrServerPlugin({
+          template,
+          ssrEntry,
+          onBeforePageRender,
+          onPageRendered,
+          entry,
+          rootContainerId
+        })
       ]
     });
     await viteServer.listen();

package/dist/shared/vite-react-ssg.0408f7e1.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+function joinUrlSegments(a, b) {
+  if (!a || !b)
+    return a || b || "";
+  if (a[a.length - 1] === "/")
+    a = a.substring(0, a.length - 1);
+  if (b[0] !== "/")
+    b = `/${b}`;
+  return a + b;
+}
+function removeLeadingSlash(str) {
+  return str[0] === "/" ? str.slice(1) : str;
+}
+function stripBase(path, base) {
+  if (path === base)
+    return "/";
+  const devBase = withTrailingSlash(base);
+  return path.startsWith(devBase) ? path.slice(devBase.length - 1) : path;
+}
+function withTrailingSlash(path) {
+  if (path[path.length - 1] !== "/")
+    return `${path}/`;
+  return path;
+}
+function withLeadingSlash(path) {
+  if (path[0] !== "/")
+    return `/${path}`;
+  return path;
+}
+
+function convertRoutesToDataRoutes(routes, mapRouteProperties, parentPath = []) {
+  return routes.map((route, index) => {
+    const treePath = [...parentPath, String(index)];
+    const id = typeof route.id === "string" ? route.id : treePath.join("-");
+    route.id = id;
+    if (isIndexRoute(route)) {
+      const indexRoute = {
+        ...route,
+        ...mapRouteProperties(route),
+        id
+      };
+      return indexRoute;
+    } else {
+      const pathOrLayoutRoute = {
+        ...route,
+        ...mapRouteProperties(route),
+        id,
+        children: void 0
+      };
+      if (route.children) {
+        pathOrLayoutRoute.children = convertRoutesToDataRoutes(
+          route.children,
+          mapRouteProperties,
+          treePath
+          // manifest,
+        );
+      }
+      return pathOrLayoutRoute;
+    }
+  });
+}
+function isIndexRoute(route) {
+  return route.index === true;
+}
+
+exports.convertRoutesToDataRoutes = convertRoutesToDataRoutes;
+exports.joinUrlSegments = joinUrlSegments;
+exports.removeLeadingSlash = removeLeadingSlash;
+exports.stripBase = stripBase;
+exports.withLeadingSlash = withLeadingSlash;
+exports.withTrailingSlash = withTrailingSlash;

package/dist/shared/vite-react-ssg.054e813a.mjs

@@ -0,0 +1,65 @@
+function joinUrlSegments(a, b) {
+  if (!a || !b)
+    return a || b || "";
+  if (a[a.length - 1] === "/")
+    a = a.substring(0, a.length - 1);
+  if (b[0] !== "/")
+    b = `/${b}`;
+  return a + b;
+}
+function removeLeadingSlash(str) {
+  return str[0] === "/" ? str.slice(1) : str;
+}
+function stripBase(path, base) {
+  if (path === base)
+    return "/";
+  const devBase = withTrailingSlash(base);
+  return path.startsWith(devBase) ? path.slice(devBase.length - 1) : path;
+}
+function withTrailingSlash(path) {
+  if (path[path.length - 1] !== "/")
+    return `${path}/`;
+  return path;
+}
+function withLeadingSlash(path) {
+  if (path[0] !== "/")
+    return `/${path}`;
+  return path;
+}
+
+function convertRoutesToDataRoutes(routes, mapRouteProperties, parentPath = []) {
+  return routes.map((route, index) => {
+    const treePath = [...parentPath, String(index)];
+    const id = typeof route.id === "string" ? route.id : treePath.join("-");
+    route.id = id;
+    if (isIndexRoute(route)) {
+      const indexRoute = {
+        ...route,
+        ...mapRouteProperties(route),
+        id
+      };
+      return indexRoute;
+    } else {
+      const pathOrLayoutRoute = {
+        ...route,
+        ...mapRouteProperties(route),
+        id,
+        children: void 0
+      };
+      if (route.children) {
+        pathOrLayoutRoute.children = convertRoutesToDataRoutes(
+          route.children,
+          mapRouteProperties,
+          treePath
+          // manifest,
+        );
+      }
+      return pathOrLayoutRoute;
+    }
+  });
+}
+function isIndexRoute(route) {
+  return route.index === true;
+}
+
+export { withTrailingSlash as a, convertRoutesToDataRoutes as c, joinUrlSegments as j, removeLeadingSlash as r, stripBase as s, withLeadingSlash as w };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-react-ssg",
   "type": "module",
-  "version": "0.6.3",
+  "version": "0.7.0-beta.1",
   "packageManager": "pnpm@9.4.0",
   "description": "",
   "author": "Riri <Daydreamerriri@outlook.com>",
@@ -136,4 +136,4 @@
     "vite-plugin-pwa": "^0.17.4",
     "vitest": "1.6.0"
   }
-}
+}