rari 0.5.9 → 0.5.11

package/dist/client.mjs

@@ -1,3 +1,3 @@
-import { C as fetchWithTimeout, S as createNavigationError, _ as LayoutErrorBoundary, a as LoadingSpinner, b as NavigationErrorOverlay, c as createHttpRuntimeClient, d as clearPropsCacheForComponent, f as extractMetadata, g as hasServerSideDataFetching, h as extractStaticParams, i as HttpRuntimeClient, l as createLoadingBoundary, m as extractServerPropsWithCache, n as DefaultLoading, o as NotFound, p as extractServerProps, r as ErrorBoundary, s as createErrorBoundary, t as DefaultError, u as clearPropsCache, v as ClientRouter, w as LayoutManager, x as NavigationErrorHandler, y as StatePreserver } from "./runtime-client-CGCu6fmO.mjs";
+import { C as fetchWithTimeout, S as createNavigationError, _ as LayoutErrorBoundary, a as LoadingSpinner, b as NavigationErrorOverlay, c as createHttpRuntimeClient, d as clearPropsCacheForComponent, f as extractMetadata, g as hasServerSideDataFetching, h as extractStaticParams, i as HttpRuntimeClient, l as createLoadingBoundary, m as extractServerPropsWithCache, n as DefaultLoading, o as NotFound, p as extractServerProps, r as ErrorBoundary, s as createErrorBoundary, t as DefaultError, u as clearPropsCache, v as ClientRouter, w as LayoutManager, x as NavigationErrorHandler, y as StatePreserver } from "./runtime-client-CeW5R9VK.mjs";
 
 export { ClientRouter, DefaultError, DefaultLoading, ErrorBoundary, HttpRuntimeClient, LayoutErrorBoundary, LayoutManager, LoadingSpinner, NavigationErrorHandler, NavigationErrorOverlay, NotFound, StatePreserver, clearPropsCache, clearPropsCacheForComponent, createErrorBoundary, createHttpRuntimeClient, createLoadingBoundary, createNavigationError, extractMetadata, extractServerProps, extractServerPropsWithCache, extractStaticParams, fetchWithTimeout, hasServerSideDataFetching };

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import { a as headers, i as rariRouter, n as defineRariOptions, o as RariResponse, r as rari, t as defineRariConfig } from "./vite-CT18_z0c.mjs";
+import { a as headers, i as rariRouter, n as defineRariOptions, o as RariResponse, r as rari, t as defineRariConfig } from "./vite-S1XOJqX6.mjs";
 import { i as writeManifest, n as generateAppRouteManifest, r as loadManifest, t as AppRouteGenerator } from "./app-routes-BjA_L5R4.mjs";
-import { c as createHttpRuntimeClient, d as clearPropsCacheForComponent, f as extractMetadata, g as hasServerSideDataFetching, h as extractStaticParams, i as HttpRuntimeClient, m as extractServerPropsWithCache, p as extractServerProps, u as clearPropsCache } from "./runtime-client-CGCu6fmO.mjs";
-import "./loading-component-map-UZ-MQYv0.mjs";
+import { c as createHttpRuntimeClient, d as clearPropsCacheForComponent, f as extractMetadata, g as hasServerSideDataFetching, h as extractStaticParams, i as HttpRuntimeClient, m as extractServerPropsWithCache, p as extractServerProps, u as clearPropsCache } from "./runtime-client-CeW5R9VK.mjs";
+import "./loading-component-map-SF6GiuGb.mjs";
 import "./server-build-Cvj5EwXx.mjs";
 
 export { AppRouteGenerator, HttpRuntimeClient, RariResponse, clearPropsCache, clearPropsCacheForComponent, createHttpRuntimeClient, defineRariConfig, defineRariOptions, extractMetadata, extractServerProps, extractServerPropsWithCache, extractStaticParams, generateAppRouteManifest, hasServerSideDataFetching, headers, loadManifest, rari, rariRouter, writeManifest };

package/dist/{loading-component-map-Db2B5rLX.mjs → loading-component-map-DP2Hh1ka.mjs}

@@ -1,3 +1,3 @@
-import { n as getLoadingComponentMapPath, t as generateLoadingComponentMap } from "./loading-component-map-UZ-MQYv0.mjs";
+import { n as getLoadingComponentMapPath, t as generateLoadingComponentMap } from "./loading-component-map-SF6GiuGb.mjs";
 
 export { generateLoadingComponentMap, getLoadingComponentMapPath };

package/dist/{loading-component-map-UZ-MQYv0.mjs → loading-component-map-SF6GiuGb.mjs}

@@ -19,7 +19,7 @@ ${moduleEntries.join(",\n")}
 }
 
 if (typeof globalThis !== 'undefined') {
-  globalThis.__rari_loading_components = loadingComponentModules
+  globalThis.__rari_loading_components = new Map(Object.entries(loadingComponentModules))
 }
 `;
 }

package/dist/runtime/actions.mjs

@@ -1,3 +1,71 @@
+//#region src/runtime/csrf.ts
+function getCsrfToken() {
+	if (typeof window === "undefined") return null;
+	const meta = document.querySelector("meta[name=\"csrf-token\"]");
+	return meta ? meta.getAttribute("content") : null;
+}
+async function refreshCsrfToken() {
+	if (typeof window === "undefined") return false;
+	try {
+		const response = await fetch("/api/rsc/csrf-token");
+		if (!response.ok) {
+			console.warn("Failed to refresh CSRF token:", response.status);
+			return false;
+		}
+		const data = await response.json();
+		if (data.token) {
+			let meta = document.querySelector("meta[name=\"csrf-token\"]");
+			if (!meta) {
+				meta = document.createElement("meta");
+				meta.setAttribute("name", "csrf-token");
+				document.head.appendChild(meta);
+			}
+			meta.setAttribute("content", data.token);
+			return true;
+		}
+		return false;
+	} catch (error) {
+		console.error("Error refreshing CSRF token:", error);
+		return false;
+	}
+}
+async function fetchWithCsrf(url, options = {}) {
+	let token = getCsrfToken();
+	if (!token) {
+		await refreshCsrfToken();
+		token = getCsrfToken();
+	}
+	const headers = new Headers(options.headers);
+	if (token) headers.set("X-CSRF-Token", token);
+	const response = await fetch(url, {
+		...options,
+		headers
+	});
+	if (response.status === 403 && url.includes("/api/rsc/")) {
+		if (await refreshCsrfToken()) {
+			const retryToken = getCsrfToken();
+			if (retryToken) {
+				headers.set("X-CSRF-Token", retryToken);
+				return fetch(url, {
+					...options,
+					headers
+				});
+			}
+		}
+	}
+	return response;
+}
+if (typeof window !== "undefined") {
+	window.getCsrfToken = getCsrfToken;
+	window.fetchWithCsrf = fetchWithCsrf;
+	window.refreshCsrfToken = refreshCsrfToken;
+	if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", () => {
+		refreshCsrfToken();
+	});
+	else refreshCsrfToken();
+}
+
+//#endregion
 //#region src/runtime/actions.ts
 function createServerReference(functionName, moduleId, exportName) {
 	return async (...args) => {
@@ -12,7 +80,7 @@ function createServerReference(functionName, moduleId, exportName) {
 				}
 				return arg;
 			});
-			const response = await fetch("/api/rsc/action", {
+			const response = await (typeof window !== "undefined" && window.fetchWithCsrf ? window.fetchWithCsrf : fetch)("/api/rsc/action", {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				body: JSON.stringify({
@@ -86,6 +154,19 @@ function createFormAction(moduleId, exportName, action) {
 			exportNameInput.name = "__export_name";
 			exportNameInput.value = exportName;
 			form.appendChild(exportNameInput);
+			if (typeof window !== "undefined" && window.getCsrfToken) {
+				const csrfToken = window.getCsrfToken();
+				if (csrfToken) {
+					let csrfInput = form.querySelector("input[name=\"__csrf_token\"]");
+					if (!csrfInput) {
+						csrfInput = document.createElement("input");
+						csrfInput.type = "hidden";
+						csrfInput.name = "__csrf_token";
+						form.appendChild(csrfInput);
+					}
+					csrfInput.value = csrfToken;
+				}
+			}
 			form.action = "/api/rsc/form-action";
 			form.method = "POST";
 			return enhanceFormWithAction(form, action, options);

package/dist/{runtime-client-CGCu6fmO.mjs → runtime-client-CeW5R9VK.mjs}

@@ -1073,7 +1073,7 @@ function ClientRouter({ children, manifest, initialRoute }) {
 				};
 				if (options.replace) window.history.replaceState(historyState, "", targetPath);
 				else window.history.pushState(historyState, "", targetPath);
-				const fetchUrl = window.location.origin + targetPath;
+				const fetchUrl = (window.location.origin.includes(":5173") ? "http://localhost:3000" : window.location.origin) + targetPath;
 				const response = await fetch(fetchUrl, {
 					headers: { Accept: "text/x-component" },
 					signal: abortController.signal

package/dist/{vite-CT18_z0c.mjs → vite-S1XOJqX6.mjs}

@@ -1751,7 +1751,7 @@ function rariRouter(options = {}) {
 			const outDir = path.resolve(root, opts.outDir);
 			await promises.mkdir(outDir, { recursive: true });
 			await promises.writeFile(path.join(outDir, "app-routes.json"), manifestContent, "utf-8");
-			const { generateLoadingComponentMap, getLoadingComponentMapPath } = await import("./loading-component-map-Db2B5rLX.mjs");
+			const { generateLoadingComponentMap, getLoadingComponentMapPath } = await import("./loading-component-map-DP2Hh1ka.mjs");
 			const loadingMapCode = generateLoadingComponentMap({
 				appDir: opts.appDir,
 				loadingComponents: manifest.loading
@@ -1882,7 +1882,7 @@ function rariRouter(options = {}) {
 				});
 				try {
 					const manifest = JSON.parse(cachedManifestContent);
-					const { generateLoadingComponentMap } = await import("./loading-component-map-Db2B5rLX.mjs");
+					const { generateLoadingComponentMap } = await import("./loading-component-map-DP2Hh1ka.mjs");
 					const loadingMapCode = generateLoadingComponentMap({
 						appDir: opts.appDir,
 						loadingComponents: manifest.loading
@@ -2890,6 +2890,24 @@ const ${componentName$1} = registerClientReference(
 						await handleServerComponentHMR(filePath);
 					} else setTimeout(discoverAndRegisterComponents, 1e3);
 				});
+				server.middlewares.use("/app-routes.json", async (req, res) => {
+					try {
+						const manifestPath = path.join(server.config.root, "dist", "app-routes.json");
+						if (fs.existsSync(manifestPath)) {
+							const manifestContent = await fs.promises.readFile(manifestPath, "utf-8");
+							res.statusCode = 200;
+							res.setHeader("Content-Type", "application/json");
+							res.setHeader("Cache-Control", "no-cache");
+							res.end(manifestContent);
+						} else {
+							res.statusCode = 404;
+							res.end("Manifest not found");
+						}
+					} catch (error) {
+						res.statusCode = 500;
+						res.end(`Error reading manifest: ${error instanceof Error ? error.message : String(error)}`);
+					}
+				});
 				server.middlewares.use("/api/vite/hmr-transform", async (req, res) => {
 					if (req.method !== "POST") {
 						res.statusCode = 405;

package/dist/vite.mjs

@@ -1,7 +1,7 @@
-import { a as headers, i as rariRouter, n as defineRariOptions, o as RariResponse, r as rari, t as defineRariConfig } from "./vite-CT18_z0c.mjs";
+import { a as headers, i as rariRouter, n as defineRariOptions, o as RariResponse, r as rari, t as defineRariConfig } from "./vite-S1XOJqX6.mjs";
 import { i as writeManifest, n as generateAppRouteManifest, r as loadManifest, t as AppRouteGenerator } from "./app-routes-BjA_L5R4.mjs";
-import { c as createHttpRuntimeClient, d as clearPropsCacheForComponent, f as extractMetadata, g as hasServerSideDataFetching, h as extractStaticParams, i as HttpRuntimeClient, m as extractServerPropsWithCache, p as extractServerProps, u as clearPropsCache } from "./runtime-client-CGCu6fmO.mjs";
-import "./loading-component-map-UZ-MQYv0.mjs";
+import { c as createHttpRuntimeClient, d as clearPropsCacheForComponent, f as extractMetadata, g as hasServerSideDataFetching, h as extractStaticParams, i as HttpRuntimeClient, m as extractServerPropsWithCache, p as extractServerProps, u as clearPropsCache } from "./runtime-client-CeW5R9VK.mjs";
+import "./loading-component-map-SF6GiuGb.mjs";
 import "./server-build-Cvj5EwXx.mjs";
 
 export { AppRouteGenerator, HttpRuntimeClient, RariResponse, clearPropsCache, clearPropsCacheForComponent, createHttpRuntimeClient, defineRariConfig, defineRariOptions, extractMetadata, extractServerProps, extractServerPropsWithCache, extractStaticParams, generateAppRouteManifest, hasServerSideDataFetching, headers, loadManifest, rari, rariRouter, writeManifest };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rari",
   "type": "module",
-  "version": "0.5.9",
+  "version": "0.5.11",
   "description": "Runtime Accelerated Rendering Infrastructure (Rari)",
   "author": "Ryan Skinner",
   "license": "MIT",
@@ -89,19 +89,19 @@
     "picocolors": "^1.1.1"
   },
   "optionalDependencies": {
-    "rari-darwin-arm64": "0.5.5",
-    "rari-darwin-x64": "0.5.5",
-    "rari-linux-arm64": "0.5.5",
-    "rari-linux-x64": "0.5.5",
-    "rari-win32-x64": "0.5.5"
+    "rari-darwin-arm64": "0.5.6",
+    "rari-darwin-x64": "0.5.6",
+    "rari-linux-arm64": "0.5.6",
+    "rari-linux-x64": "0.5.6",
+    "rari-win32-x64": "0.5.6"
   },
   "devDependencies": {
-    "@types/node": "^24.10.1",
+    "@types/node": "^24.10.2",
     "@types/react": "^19.2.7",
     "@typescript/native-preview": "7.0.0-dev.20251203.1",
     "chokidar": "^4.0.3",
     "eslint": "^9.39.1",
-    "oxlint": "^1.31.0",
+    "oxlint": "^1.32.0",
     "rolldown-vite": "^7.2.10",
     "tsdown": "^0.15.12"
   }

package/src/router/ClientRouter.tsx

@@ -286,7 +286,10 @@ export function ClientRouter({ children, manifest, initialRoute }: ClientRouterP
           )
         }
 
-        const fetchUrl = window.location.origin + targetPath
+        const rariServerUrl = window.location.origin.includes(':5173')
+          ? 'http://localhost:3000'
+          : window.location.origin
+        const fetchUrl = rariServerUrl + targetPath
 
         const response = await fetch(fetchUrl, {
           headers: { Accept: 'text/x-component' },

package/src/router/loading-component-map.ts

@@ -32,7 +32,7 @@ ${moduleEntries.join(',\n')}
 }
 
 if (typeof globalThis !== 'undefined') {
-  globalThis.__rari_loading_components = loadingComponentModules
+  globalThis.__rari_loading_components = new Map(Object.entries(loadingComponentModules))
 }
 `
 

package/src/runtime/AppRouterProvider.tsx

@@ -214,7 +214,14 @@ export function AppRouterProvider({ children, initialPayload, onNavigate }: AppR
         const processedProps = processProps(props, modules, layoutPath)
         return React.createElement(type, serverKey ? { ...processedProps, key: serverKey } : processedProps)
       }
-      return rsc.map(child => rscToReact(child, modules, layoutPath))
+      return rsc.map((child, index) => {
+        const element = rscToReact(child, modules, layoutPath)
+        if (element && typeof element === 'object' && !element.key) {
+          // eslint-disable-next-line react/no-clone-element
+          return React.cloneElement(element, { key: index })
+        }
+        return element
+      })
     }
 
     return rsc
@@ -696,12 +703,24 @@ export function AppRouterProvider({ children, initialPayload, onNavigate }: AppR
           )
 
           if (hasMain) {
-            newChildren = children.map((child: any) => cloneWithLoadingInjected(child))
+            newChildren = children.map((child: any, index: number) => {
+              const cloned = cloneWithLoadingInjected(child)
+
+              return cloned && typeof cloned === 'object' && !cloned.key
+              // eslint-disable-next-line react/no-clone-element
+                ? React.cloneElement(cloned, { key: child?.key || index })
+                : cloned
+            })
           }
           else {
-            newChildren = children.map((child: any) => {
+            newChildren = children.map((child: any, index: number) => {
               if (child && typeof child === 'object') {
-                return cloneWithLoadingInjected(child)
+                const cloned = cloneWithLoadingInjected(child)
+
+                return cloned && !cloned.key
+                // eslint-disable-next-line react/no-clone-element
+                  ? React.cloneElement(cloned, { key: child.key || index })
+                  : cloned
               }
               return child
             })
@@ -739,7 +758,7 @@ export function AppRouterProvider({ children, initialPayload, onNavigate }: AppR
     if (rscPayload?.element) {
       contentToRender = injectLoadingIntoLayout(rscPayload.element, loadingComponentElement)
     }
-    else {
+    else if (loadingComponentElement) {
       contentToRender = loadingComponentElement
     }
   }

package/src/runtime/actions.ts

@@ -1,3 +1,5 @@
+import './csrf'
+
 export interface ServerActionResponse {
   success: boolean
   result?: any
@@ -29,7 +31,11 @@ export function createServerReference(
         return arg
       })
 
-      const response = await fetch('/api/rsc/action', {
+      const fetchFn = typeof window !== 'undefined' && (window as any).fetchWithCsrf
+        ? (window as any).fetchWithCsrf
+        : fetch
+
+      const response = await fetchFn('/api/rsc/action', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -150,6 +156,20 @@ export function createFormAction(
       exportNameInput.value = exportName
       form.appendChild(exportNameInput)
 
+      if (typeof window !== 'undefined' && (window as any).getCsrfToken) {
+        const csrfToken = (window as any).getCsrfToken()
+        if (csrfToken) {
+          let csrfInput = form.querySelector('input[name="__csrf_token"]') as HTMLInputElement
+          if (!csrfInput) {
+            csrfInput = document.createElement('input')
+            csrfInput.type = 'hidden'
+            csrfInput.name = '__csrf_token'
+            form.appendChild(csrfInput)
+          }
+          csrfInput.value = csrfToken
+        }
+      }
+
       form.action = '/api/rsc/form-action'
       form.method = 'POST'
 

package/src/runtime/csrf.ts

@@ -0,0 +1,88 @@
+export function getCsrfToken(): string | null {
+  if (typeof window === 'undefined')
+    return null
+  const meta = document.querySelector('meta[name="csrf-token"]')
+  return meta ? meta.getAttribute('content') : null
+}
+
+export async function refreshCsrfToken(): Promise<boolean> {
+  if (typeof window === 'undefined')
+    return false
+
+  try {
+    const response = await fetch('/api/rsc/csrf-token')
+    if (!response.ok) {
+      console.warn('Failed to refresh CSRF token:', response.status)
+      return false
+    }
+    const data = await response.json()
+    if (data.token) {
+      let meta = document.querySelector('meta[name="csrf-token"]')
+      if (!meta) {
+        meta = document.createElement('meta')
+        meta.setAttribute('name', 'csrf-token')
+        document.head.appendChild(meta)
+      }
+      meta.setAttribute('content', data.token)
+      return true
+    }
+    return false
+  }
+  catch (error) {
+    console.error('Error refreshing CSRF token:', error)
+    return false
+  }
+}
+
+export async function fetchWithCsrf(
+  url: string,
+  options: RequestInit = {},
+): Promise<Response> {
+  let token = getCsrfToken()
+
+  if (!token) {
+    await refreshCsrfToken()
+    token = getCsrfToken()
+  }
+
+  const headers = new Headers(options.headers)
+  if (token) {
+    headers.set('X-CSRF-Token', token)
+  }
+
+  const response = await fetch(url, {
+    ...options,
+    headers,
+  })
+
+  if (response.status === 403 && url.includes('/api/rsc/')) {
+    const refreshed = await refreshCsrfToken()
+    if (refreshed) {
+      const retryToken = getCsrfToken()
+      if (retryToken) {
+        headers.set('X-CSRF-Token', retryToken)
+        return fetch(url, {
+          ...options,
+          headers,
+        })
+      }
+    }
+  }
+
+  return response
+}
+
+if (typeof window !== 'undefined') {
+  ;(window as any).getCsrfToken = getCsrfToken
+  ;(window as any).fetchWithCsrf = fetchWithCsrf
+  ;(window as any).refreshCsrfToken = refreshCsrfToken
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      refreshCsrfToken()
+    })
+  }
+  else {
+    refreshCsrfToken()
+  }
+}

package/src/runtime/entry-client.js

@@ -62,7 +62,7 @@ export async function renderApp() {
     if (!manifest) {
       try {
         const manifestUrl = window.location.origin.includes(':5173')
-          ? 'http://localhost:3000/app-routes.json'
+          ? '/app-routes.json'
           : '/app-routes.json'
 
         const manifestResponse = await fetch(manifestUrl, {

package/src/runtime/rsc-client-runtime.js

@@ -885,7 +885,7 @@ function ServerComponentWrapper({
     let mounted = true
 
     if (prevPropsKeyRef.current !== propsKey) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect, react-hooks-extra/no-direct-set-state-in-use-effect
+      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
       setState({ data: null, loading: true, error: null })
       prevPropsKeyRef.current = propsKey
     }

package/src/vite/index.ts

@@ -1162,6 +1162,27 @@ const ${componentName} = registerClientReference(
         }
       })
 
+      server.middlewares.use('/app-routes.json', async (req, res) => {
+        try {
+          const manifestPath = path.join(server.config.root, 'dist', 'app-routes.json')
+          if (fs.existsSync(manifestPath)) {
+            const manifestContent = await fs.promises.readFile(manifestPath, 'utf-8')
+            res.statusCode = 200
+            res.setHeader('Content-Type', 'application/json')
+            res.setHeader('Cache-Control', 'no-cache')
+            res.end(manifestContent)
+          }
+          else {
+            res.statusCode = 404
+            res.end('Manifest not found')
+          }
+        }
+        catch (error) {
+          res.statusCode = 500
+          res.end(`Error reading manifest: ${error instanceof Error ? error.message : String(error)}`)
+        }
+      })
+
       server.middlewares.use('/api/vite/hmr-transform', async (req, res) => {
         if (req.method !== 'POST') {
           res.statusCode = 405