@solidjs/web 2.0.0-rc.1 → 2.0.0-rc.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime: client rendering, hydration, SSR, and DOM-specific control flow (Portal, Dynamic).",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.2",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -378,11 +378,11 @@
     "seroval-plugins": "~1.5.4"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-rc.1"
+    "solid-js": "^2.0.0-rc.2"
   },
   "devDependencies": {
     "@codspeed/vitest-plugin": "^5.4.0",
-    "solid-js": "2.0.0-rc.1"
+    "solid-js": "2.0.0-rc.2"
   },
   "scripts": {
     "build": "npm-run-all -nl build:clean types:copy-jsx build:js",

package/serialization/dist/decode.cjs

@@ -8,6 +8,9 @@ const state = globalThis[STATE] || (globalThis[STATE] = {
   materialized: new WeakMap(),
   materializedValues: new WeakSet()
 });
+function setContainerTraceStreamMint(fn) {
+  state.streamOf = fn;
+}
 const TRACE = Symbol.for("dom-expressions.container-trace");
 function materialize(marker) {
   let value = state.materialized.get(marker.$tr);
@@ -20,9 +23,10 @@ function materialize(marker) {
 }
 function parseTrace(value, ctx) {
   const trace = value[TRACE];
+  const sub = trace.subscribe();
   return {
     a: trace.array ? 1 : 0,
-    i: ctx.parse(trace.subscribe())
+    i: ctx.parse(state.streamOf ? state.streamOf(sub) : sub)
   };
 }
 const ContainerTracePlugin = {
@@ -36,9 +40,10 @@ const ContainerTracePlugin = {
     },
     async async(value, ctx) {
       const trace = value[TRACE];
+      const sub = trace.subscribe();
       return {
         a: trace.array ? 1 : 0,
-        i: await ctx.parse(trace.subscribe())
+        i: await ctx.parse(state.streamOf ? state.streamOf(sub) : sub)
       };
     },
     stream: parseTrace
@@ -56,6 +61,18 @@ const ContainerTracePlugin = {
   }
 };
 
+setContainerTraceStreamMint(iterable => {
+  const stream = seroval.createStream();
+  (async () => {
+    try {
+      for await (const value of iterable) stream.next(value);
+      stream.return(undefined);
+    } catch (error) {
+      stream.throw(error);
+    }
+  })();
+  return stream;
+});
 const DEFAULT_WEB_PLUGINS = Object.freeze([web.AbortSignalPlugin,
 web.CustomEventPlugin, web.DOMExceptionPlugin, web.EventPlugin,
 web.FormDataPlugin, web.HeadersPlugin, web.ReadableStreamPlugin, web.RequestPlugin, web.ResponsePlugin, web.URLSearchParamsPlugin, web.URLPlugin,

package/serialization/dist/decode.js

@@ -1,4 +1,4 @@
-import { Feature, fromCrossJSON } from 'seroval';
+import { Feature, fromCrossJSON, createStream } from 'seroval';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 
 const STATE = Symbol.for("dom-expressions.container-trace-state");
@@ -6,6 +6,9 @@ const state = globalThis[STATE] || (globalThis[STATE] = {
   materialized: new WeakMap(),
   materializedValues: new WeakSet()
 });
+function setContainerTraceStreamMint(fn) {
+  state.streamOf = fn;
+}
 const TRACE = Symbol.for("dom-expressions.container-trace");
 function materialize(marker) {
   let value = state.materialized.get(marker.$tr);
@@ -18,9 +21,10 @@ function materialize(marker) {
 }
 function parseTrace(value, ctx) {
   const trace = value[TRACE];
+  const sub = trace.subscribe();
   return {
     a: trace.array ? 1 : 0,
-    i: ctx.parse(trace.subscribe())
+    i: ctx.parse(state.streamOf ? state.streamOf(sub) : sub)
   };
 }
 const ContainerTracePlugin = {
@@ -34,9 +38,10 @@ const ContainerTracePlugin = {
     },
     async async(value, ctx) {
       const trace = value[TRACE];
+      const sub = trace.subscribe();
       return {
         a: trace.array ? 1 : 0,
-        i: await ctx.parse(trace.subscribe())
+        i: await ctx.parse(state.streamOf ? state.streamOf(sub) : sub)
       };
     },
     stream: parseTrace
@@ -54,6 +59,18 @@ const ContainerTracePlugin = {
   }
 };
 
+setContainerTraceStreamMint(iterable => {
+  const stream = createStream();
+  (async () => {
+    try {
+      for await (const value of iterable) stream.next(value);
+      stream.return(undefined);
+    } catch (error) {
+      stream.throw(error);
+    }
+  })();
+  return stream;
+});
 const DEFAULT_WEB_PLUGINS = Object.freeze([AbortSignalPlugin,
 CustomEventPlugin, DOMExceptionPlugin, EventPlugin,
 FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin,

package/serialization/dist/serialization.cjs

@@ -8,6 +8,9 @@ const state = globalThis[STATE] || (globalThis[STATE] = {
   materialized: new WeakMap(),
   materializedValues: new WeakSet()
 });
+function setContainerTraceStreamMint(fn) {
+  state.streamOf = fn;
+}
 const TRACE = Symbol.for("dom-expressions.container-trace");
 function materialize(marker) {
   let value = state.materialized.get(marker.$tr);
@@ -20,9 +23,10 @@ function materialize(marker) {
 }
 function parseTrace(value, ctx) {
   const trace = value[TRACE];
+  const sub = trace.subscribe();
   return {
     a: trace.array ? 1 : 0,
-    i: ctx.parse(trace.subscribe())
+    i: ctx.parse(state.streamOf ? state.streamOf(sub) : sub)
   };
 }
 const ContainerTracePlugin = {
@@ -36,9 +40,10 @@ const ContainerTracePlugin = {
     },
     async async(value, ctx) {
       const trace = value[TRACE];
+      const sub = trace.subscribe();
       return {
         a: trace.array ? 1 : 0,
-        i: await ctx.parse(trace.subscribe())
+        i: await ctx.parse(state.streamOf ? state.streamOf(sub) : sub)
       };
     },
     stream: parseTrace
@@ -56,6 +61,18 @@ const ContainerTracePlugin = {
   }
 };
 
+setContainerTraceStreamMint(iterable => {
+  const stream = seroval.createStream();
+  (async () => {
+    try {
+      for await (const value of iterable) stream.next(value);
+      stream.return(undefined);
+    } catch (error) {
+      stream.throw(error);
+    }
+  })();
+  return stream;
+});
 const DEFAULT_WEB_PLUGINS = Object.freeze([web.AbortSignalPlugin,
 web.CustomEventPlugin, web.DOMExceptionPlugin, web.EventPlugin,
 web.FormDataPlugin, web.HeadersPlugin, web.ReadableStreamPlugin, web.RequestPlugin, web.ResponsePlugin, web.URLSearchParamsPlugin, web.URLPlugin,

package/serialization/dist/serialization.js

@@ -1,4 +1,4 @@
-import { Feature, fromCrossJSON, toCrossJSONStream, Serializer, getCrossReferenceHeader } from 'seroval';
+import { Feature, fromCrossJSON, createStream, toCrossJSONStream, Serializer, getCrossReferenceHeader } from 'seroval';
 export { OpaqueReference, createPlugin } from 'seroval';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 
@@ -7,6 +7,9 @@ const state = globalThis[STATE] || (globalThis[STATE] = {
   materialized: new WeakMap(),
   materializedValues: new WeakSet()
 });
+function setContainerTraceStreamMint(fn) {
+  state.streamOf = fn;
+}
 const TRACE = Symbol.for("dom-expressions.container-trace");
 function materialize(marker) {
   let value = state.materialized.get(marker.$tr);
@@ -19,9 +22,10 @@ function materialize(marker) {
 }
 function parseTrace(value, ctx) {
   const trace = value[TRACE];
+  const sub = trace.subscribe();
   return {
     a: trace.array ? 1 : 0,
-    i: ctx.parse(trace.subscribe())
+    i: ctx.parse(state.streamOf ? state.streamOf(sub) : sub)
   };
 }
 const ContainerTracePlugin = {
@@ -35,9 +39,10 @@ const ContainerTracePlugin = {
     },
     async async(value, ctx) {
       const trace = value[TRACE];
+      const sub = trace.subscribe();
       return {
         a: trace.array ? 1 : 0,
-        i: await ctx.parse(trace.subscribe())
+        i: await ctx.parse(state.streamOf ? state.streamOf(sub) : sub)
       };
     },
     stream: parseTrace
@@ -55,6 +60,18 @@ const ContainerTracePlugin = {
   }
 };
 
+setContainerTraceStreamMint(iterable => {
+  const stream = createStream();
+  (async () => {
+    try {
+      for await (const value of iterable) stream.next(value);
+      stream.return(undefined);
+    } catch (error) {
+      stream.throw(error);
+    }
+  })();
+  return stream;
+});
 const DEFAULT_WEB_PLUGINS = Object.freeze([AbortSignalPlugin,
 CustomEventPlugin, DOMExceptionPlugin, EventPlugin,
 FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin,

package/server-functions/dist/client.cjs

@@ -396,6 +396,30 @@ const config = {
   responseHandler: undefined,
   serializeArgs: undefined
 };
+const CALL_OBSERVERS = new Set();
+function notifyCallObservers(type, id, instance, value, meta) {
+  if (CALL_OBSERVERS.size === 0) return;
+  const field = type === "request" ? "request" : "response";
+  const time = performance.now();
+  for (const observer of new Set(CALL_OBSERVERS)) {
+    try {
+      observer({
+        type,
+        id,
+        instance,
+        [field]: value.clone(),
+        meta,
+        time
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
+function observeServerFunctionCalls(observer) {
+  CALL_OBSERVERS.add(observer);
+  return () => CALL_OBSERVERS.delete(observer);
+}
 function serializeArguments(args) {
   if (!config.serializeArgs) {
     throw new Error("Server function arguments are sent as JSON by default and these " + "arguments are not JSON-serializable. Call enableRichArguments() " + '(from "@solidjs/web/server-functions/rich-args") once at startup ' + "to send Dates, Maps, Sets, typed arrays, etc. through the codec — " + "or pass a single Blob/FormData/File argument, which has a native " + "HTTP encoding.");
@@ -425,6 +449,11 @@ function provideRPC() {
     decodeResponse
   });
 }
+function serverFunctionFailure(response, value) {
+  const error = value ?? new Error(`Server function call failed with status ${response.status}`);
+  if (error instanceof Error && !("status" in error)) error.status = response.status;
+  return error;
+}
 async function createRequest(base, id, instance, options, meta) {
   const headers = {
     ...options.headers,
@@ -445,7 +474,12 @@ async function createRequest(base, id, instance, options, meta) {
       meta
     })) || init;
   }
-  return fetch(base, init);
+  if (CALL_OBSERVERS.size === 0) return fetch(base, init);
+  const request = new Request(new URL(base, globalThis.location?.href || "http://localhost"), init);
+  notifyCallObservers("request", id, instance, request, meta);
+  const response = await fetch(request);
+  notifyCallObservers("response", id, instance, response, meta);
+  return response;
 }
 async function initializeResponse(base, id, instance, options, args, meta) {
   if (args.length === 0) {
@@ -528,6 +562,7 @@ async function fetchServerFunction(base, id, options, args, meta, callArgs = arg
     });
     if (handled !== undefined) return handled;
   }
+  const failed = response.headers.has(ERROR_HEADER) || response.status >= 500;
   if (response.headers.has(SINGLE_FLIGHT_HEADER)) {
     const consumer = getFlightDataConsumer();
     if (consumer) {
@@ -535,8 +570,8 @@ async function fetchServerFunction(base, id, options, args, meta, callArgs = arg
       await consumer(payload.data, {
         response
       });
-      if (response.headers.has(ERROR_HEADER) && !response.headers.has("Location") && !response.headers.has(REVALIDATE_HEADER)) {
-        throw payload.value;
+      if (failed && !response.headers.has("Location") && !response.headers.has(REVALIDATE_HEADER)) {
+        throw serverFunctionFailure(response, payload.value);
       }
       return payload.value;
     }
@@ -545,8 +580,8 @@ async function fetchServerFunction(base, id, options, args, meta, callArgs = arg
     return response;
   }
   const result = await decodeResponse(response.clone());
-  if (response.headers.has(ERROR_HEADER)) {
-    throw result;
+  if (failed) {
+    throw serverFunctionFailure(response, result);
   }
   if (controller && result?.[Symbol.asyncIterator]) {
     return {
@@ -658,10 +693,10 @@ function live(fn) {
             iterable.onstatus && iterable.onstatus(state, error);
           } catch {}
         };
-        const emitClosed = () => {
+        const emitClosed = error => {
           if (ended) return;
           ended = true;
-          emit("closed");
+          emit("closed", error);
         };
         const closeIt = value => {
           const current = it;
@@ -713,6 +748,11 @@ function live(fn) {
               return r;
             } catch (error) {
               if (!connected) throw error;
+              if (error !== null && typeof error === "object" && typeof error.status === "number" && error.status >= 400 && error.status < 500) {
+                stopped = true;
+                emitClosed(error);
+                throw error;
+              }
               it = undefined;
               emit("reconnecting", error);
               await new Promise(resolve => {
@@ -787,6 +827,7 @@ exports.getServerFunctionsCodec = getServerFunctionsCodec;
 exports.hasFlashCookie = hasFlashCookie;
 exports.isServerFunction = isServerFunction;
 exports.live = live;
+exports.observeServerFunctionCalls = observeServerFunctionCalls;
 exports.registerServerReference = registerServerReference;
 exports.serializeString = serializeString;
 exports.subscribeFlightData = subscribeFlightData;

package/server-functions/dist/client.js

@@ -394,6 +394,30 @@ const config = {
   responseHandler: undefined,
   serializeArgs: undefined
 };
+const CALL_OBSERVERS = new Set();
+function notifyCallObservers(type, id, instance, value, meta) {
+  if (CALL_OBSERVERS.size === 0) return;
+  const field = type === "request" ? "request" : "response";
+  const time = performance.now();
+  for (const observer of new Set(CALL_OBSERVERS)) {
+    try {
+      observer({
+        type,
+        id,
+        instance,
+        [field]: value.clone(),
+        meta,
+        time
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
+function observeServerFunctionCalls(observer) {
+  CALL_OBSERVERS.add(observer);
+  return () => CALL_OBSERVERS.delete(observer);
+}
 function serializeArguments(args) {
   if (!config.serializeArgs) {
     throw new Error("Server function arguments are sent as JSON by default and these " + "arguments are not JSON-serializable. Call enableRichArguments() " + '(from "@solidjs/web/server-functions/rich-args") once at startup ' + "to send Dates, Maps, Sets, typed arrays, etc. through the codec — " + "or pass a single Blob/FormData/File argument, which has a native " + "HTTP encoding.");
@@ -423,6 +447,11 @@ function provideRPC() {
     decodeResponse
   });
 }
+function serverFunctionFailure(response, value) {
+  const error = value ?? new Error(`Server function call failed with status ${response.status}`);
+  if (error instanceof Error && !("status" in error)) error.status = response.status;
+  return error;
+}
 async function createRequest(base, id, instance, options, meta) {
   const headers = {
     ...options.headers,
@@ -443,7 +472,12 @@ async function createRequest(base, id, instance, options, meta) {
       meta
     })) || init;
   }
-  return fetch(base, init);
+  if (CALL_OBSERVERS.size === 0) return fetch(base, init);
+  const request = new Request(new URL(base, globalThis.location?.href || "http://localhost"), init);
+  notifyCallObservers("request", id, instance, request, meta);
+  const response = await fetch(request);
+  notifyCallObservers("response", id, instance, response, meta);
+  return response;
 }
 async function initializeResponse(base, id, instance, options, args, meta) {
   if (args.length === 0) {
@@ -526,6 +560,7 @@ async function fetchServerFunction(base, id, options, args, meta, callArgs = arg
     });
     if (handled !== undefined) return handled;
   }
+  const failed = response.headers.has(ERROR_HEADER) || response.status >= 500;
   if (response.headers.has(SINGLE_FLIGHT_HEADER)) {
     const consumer = getFlightDataConsumer();
     if (consumer) {
@@ -533,8 +568,8 @@ async function fetchServerFunction(base, id, options, args, meta, callArgs = arg
       await consumer(payload.data, {
         response
       });
-      if (response.headers.has(ERROR_HEADER) && !response.headers.has("Location") && !response.headers.has(REVALIDATE_HEADER)) {
-        throw payload.value;
+      if (failed && !response.headers.has("Location") && !response.headers.has(REVALIDATE_HEADER)) {
+        throw serverFunctionFailure(response, payload.value);
       }
       return payload.value;
     }
@@ -543,8 +578,8 @@ async function fetchServerFunction(base, id, options, args, meta, callArgs = arg
     return response;
   }
   const result = await decodeResponse(response.clone());
-  if (response.headers.has(ERROR_HEADER)) {
-    throw result;
+  if (failed) {
+    throw serverFunctionFailure(response, result);
   }
   if (controller && result?.[Symbol.asyncIterator]) {
     return {
@@ -656,10 +691,10 @@ function live(fn) {
             iterable.onstatus && iterable.onstatus(state, error);
           } catch {}
         };
-        const emitClosed = () => {
+        const emitClosed = error => {
           if (ended) return;
           ended = true;
-          emit("closed");
+          emit("closed", error);
         };
         const closeIt = value => {
           const current = it;
@@ -711,6 +746,11 @@ function live(fn) {
               return r;
             } catch (error) {
               if (!connected) throw error;
+              if (error !== null && typeof error === "object" && typeof error.status === "number" && error.status >= 400 && error.status < 500) {
+                stopped = true;
+                emitClosed(error);
+                throw error;
+              }
               it = undefined;
               emit("reconnecting", error);
               await new Promise(resolve => {
@@ -760,4 +800,4 @@ function getServerFunctionInvocation() {
   return undefined;
 }
 
-export { ChunkReader, ERROR_HEADER, FLASH_COOKIE, FUNCTION_HEADER, GET, INSTANCE_HEADER, REVALIDATE_HEADER, SINGLE_FLIGHT_HEADER, clearFlashCookie, configureServerFunctionsClient, createChunk, createServerReference, decodeErrorHeaderValue, decodeResponse, decodeResponsePayload, deserializeStream, encodeErrorHeaderValue, frameAddress, getFlightDataConsumer, getServerFunctionInvocation, getServerFunctionMetadata, getServerFunctionsCodec, hasFlashCookie, isServerFunction, live, registerServerReference, serializeString, subscribeFlightData, withMeta };
+export { ChunkReader, ERROR_HEADER, FLASH_COOKIE, FUNCTION_HEADER, GET, INSTANCE_HEADER, REVALIDATE_HEADER, SINGLE_FLIGHT_HEADER, clearFlashCookie, configureServerFunctionsClient, createChunk, createServerReference, decodeErrorHeaderValue, decodeResponse, decodeResponsePayload, deserializeStream, encodeErrorHeaderValue, frameAddress, getFlightDataConsumer, getServerFunctionInvocation, getServerFunctionMetadata, getServerFunctionsCodec, hasFlashCookie, isServerFunction, live, observeServerFunctionCalls, registerServerReference, serializeString, subscribeFlightData, withMeta };

package/server-functions/dist/server.cjs

@@ -362,6 +362,7 @@ async function decodeResponsePayload(response, codecOptions) {
   };
 }
 
+typeof setImmediate === "function" ? setImmediate : fn => setTimeout(fn, 0);
 const RequestContext = Symbol.for("solid.RequestContext");
 function getRequestEvent() {
   return globalThis[RequestContext] ? globalThis[RequestContext].getStore() || solidJs.sharedConfig.context && solidJs.sharedConfig.context.event || console.warn("RequestEvent is missing. This is most likely due to accessing `getRequestEvent` non-managed async scope in a partially polyfilled environment. Try moving it above all `await` calls.") : undefined;
@@ -493,7 +494,8 @@ const config = {
   transformFlightResult: undefined,
   transformDirectResult: undefined,
   handleNoJS: undefined,
-  endpoint: "/_server"
+  endpoint: "/_server",
+  csrf: true
 };
 function configureServerFunctionsServer({
   provideEvent,
@@ -504,6 +506,7 @@ function configureServerFunctionsServer({
   transformDirectResult,
   handleNoJS,
   endpoint,
+  csrf,
   codec
 } = {}) {
   if (provideEvent !== undefined) config.provideEvent = provideEvent;
@@ -514,6 +517,7 @@ function configureServerFunctionsServer({
   if (transformDirectResult !== undefined) config.transformDirectResult = transformDirectResult;
   if (handleNoJS !== undefined) config.handleNoJS = handleNoJS;
   if (endpoint !== undefined) config.endpoint = endpoint;
+  if (csrf !== undefined) config.csrf = csrf;
   if (codec !== undefined) configureServerFunctionsCodec(codec);
 }
 function provideEvent(event, fn) {
@@ -950,31 +954,96 @@ function sanitizeServerError(value) {
   if (isSafeError(value)) return value;
   return new Error(GENERIC_SERVER_ERROR_MESSAGE);
 }
+function observeServerFunctionCalls() {
+  return () => {};
+}
+async function matchesOrigin(origin, request, matcher) {
+  if (matcher === undefined) return origin === new URL(request.url).origin;
+  if (typeof matcher === "function") return !!(await matcher(origin, request));
+  return Array.isArray(matcher) ? matcher.includes(origin) : origin === matcher;
+}
+async function allowsServerFunctionRequest(request, options) {
+  const fetchSite = request.headers.get("Sec-Fetch-Site");
+  if (fetchSite === "same-origin") return true;
+  if (fetchSite === "same-site" || fetchSite === "cross-site" || fetchSite === "none") {
+    return false;
+  }
+  const origin = request.headers.get("Origin");
+  if (origin !== null) return matchesOrigin(origin, request, options.origin);
+  const referer = request.headers.get("Referer");
+  if (referer !== null) {
+    try {
+      return matchesOrigin(new URL(referer).origin, request, options.origin);
+    } catch {
+      return false;
+    }
+  }
+  return options.allowRequestsWithoutOriginCheck === true;
+}
+const CSRF_VARY = ["Sec-Fetch-Site", "Origin", "Referer"];
+function withCSRFVary(response) {
+  const current = response.headers.get("Vary");
+  if (current === "*") return response;
+  const values = current ? current.split(",").map(value => value.trim()) : [];
+  const names = new Set(values.map(value => value.toLowerCase()));
+  for (const value of CSRF_VARY) {
+    if (!names.has(value.toLowerCase())) values.push(value);
+  }
+  const vary = values.join(", ");
+  try {
+    response.headers.set("Vary", vary);
+    return response;
+  } catch {
+    const headers = new Headers(response.headers);
+    headers.set("Vary", vary);
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers
+    });
+  }
+}
+function forbiddenResponse() {
+  return withCSRFVary(new Response(DEV ? "Forbidden" : null, {
+    status: 403,
+    headers: {
+      "Cache-Control": "no-store"
+    }
+  }));
+}
 async function handleServerFunctionRequest(request, options = {}) {
   const codec = options.codec !== undefined ? options.codec : getServerFunctionsCodec();
   const url = new URL(request.url);
+  const csrf = options.csrf !== undefined ? options.csrf : config.csrf;
+  const protectsRequest = csrf !== false;
+  if (protectsRequest && !(await allowsServerFunctionRequest(request, csrf === true ? {} : csrf))) {
+    return forbiddenResponse();
+  }
   const instance = request.headers.get(INSTANCE_HEADER);
   const functionId = resolveFunctionId(request, url);
   if (!functionId) {
-    return new Response(DEV ? "Server function not found" : null, {
+    const response = new Response(DEV ? "Server function not found" : null, {
       status: 404
     });
+    return protectsRequest ? withCSRFVary(response) : response;
   }
   let serverFunction;
   try {
     serverFunction = getServerFunction(functionId);
   } catch {
-    return new Response(DEV ? `Unknown server function: ${functionId}` : null, {
+    const response = new Response(DEV ? `Unknown server function: ${functionId}` : null, {
       status: 404
     });
+    return protectsRequest ? withCSRFVary(response) : response;
   }
   if (request.method === "GET" && METHODS.get(functionId) !== "GET") {
-    return new Response(DEV ? `Method not allowed for server function: ${functionId}` : null, {
+    const response = new Response(DEV ? `Method not allowed for server function: ${functionId}` : null, {
       status: 405,
       headers: {
         Allow: "POST"
       }
     });
+    return protectsRequest ? withCSRFVary(response) : response;
   }
   const event = options.createEvent ? options.createEvent(request) : {
     request,
@@ -1133,7 +1202,8 @@ async function handleServerFunctionRequest(request, options = {}) {
       return encodeResult(safe, headers, 200, codec, request.signal);
     }
   };
-  return commitEventResponse(await dispatch(), event);
+  const response = commitEventResponse(await dispatch(), event);
+  return protectsRequest ? withCSRFVary(response) : response;
 }
 
 exports.ERROR_HEADER = ERROR_HEADER;
@@ -1162,6 +1232,7 @@ exports.handleServerFunctionRequest = handleServerFunctionRequest;
 exports.hasFlashCookie = hasFlashCookie;
 exports.isServerFunction = isServerFunction;
 exports.live = live;
+exports.observeServerFunctionCalls = observeServerFunctionCalls;
 exports.registerServerFunction = registerServerFunction;
 exports.registerServerReference = registerServerReference;
 exports.sanitizeServerError = sanitizeServerError;