rari 0.5.9 → 0.5.10

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rari",
   "type": "module",
-  "version": "0.5.9",
+  "version": "0.5.10",
   "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/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/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
     }