Add custom fetch function support and improve documentation

- Add ability to pass custom fetch function via object parameters
- Client-side: findFetchInArgs() extracts custom fetch from arguments
- Server-side: injectFetchInArgs() provides global fetch by default
- User-provided fetch functions always take precedence
- Add comprehensive AbortController/AbortSignal documentation
- Add custom fetch usage examples and guide
- Bump version to 2.1.0

Author: remorses

README.md

@@ -154,6 +154,131 @@ export async function failingFunction({}) {
 }
 ```
 
+## Aborting requests with AbortSignal
+
+You can abort ongoing server actions using `AbortController` and `AbortSignal`. Pass an abort signal in your arguments (either directly or as a field in an object parameter), and it will be used to:
+
+- **Client-side**: Abort the fetch request
+- **Server-side**: Allow server functions to respond to request cancellations
+
+```ts
+// pages/api/server-actions.js
+"poor man's use server";
+
+export async function longRunningTask(signal: AbortSignal) {
+  for (let i = 0; i < 10; i++) {
+    // Check if the request was aborted
+    if (signal.aborted) {
+      throw new Error('Task aborted: ' + signal.reason);
+    }
+    await sleep(1000);
+  }
+  return { completed: true };
+}
+
+// Also works with async generators
+export async function* streamData({ signal }: { signal: AbortSignal }) {
+  for (let i = 0; i < 20; i++) {
+    if (signal.aborted) {
+      throw new Error('Stream aborted: ' + signal.reason);
+    }
+    await sleep(500);
+    yield { count: i };
+  }
+}
+```
+
+Client usage:
+
+```tsx
+// pages/index.tsx
+import { longRunningTask, streamData } from './api/server-actions';
+
+export default function Page() {
+  const handleAbortableTask = async () => {
+    const controller = new AbortController();
+    
+    // Abort after 2 seconds
+    setTimeout(() => controller.abort('Timeout'), 2000);
+
+    try {
+      await longRunningTask(controller.signal);
+    } catch (error) {
+      console.log(error); // "Task aborted: Timeout"
+    }
+  };
+
+  const handleAbortableStream = async () => {
+    const controller = new AbortController();
+    const generator = streamData({ signal: controller.signal });
+    
+    for await (const { count } of generator) {
+      console.log(count);
+      if (count > 5) {
+        controller.abort('User stopped stream');
+        break;
+      }
+    }
+  };
+
+  return <div>...</div>;
+}
+```
+
+**Note**: You can pass `AbortSignal` or `AbortController` directly as arguments, or as fields within object parameters. The server function will receive the request's abort signal, allowing it to detect when the client cancels the request (e.g., when navigating away).
+
+## Custom fetch function
+
+You can provide a custom `fetch` function to your server actions by including it as a `fetch` field in an object parameter. This is useful for adding custom headers, authentication, or using a custom fetch implementation.
+
+```ts
+// pages/api/server-actions.js
+"poor man's use server";
+
+export async function fetchExternalData({ url, fetch }) {
+  // The fetch parameter will be either:
+  // - The custom fetch function passed from the client
+  // - The global fetch function (injected automatically on the server)
+  const response = await fetch(url);
+  return response.json();
+}
+```
+
+Client usage with custom fetch:
+
+```tsx
+// pages/index.tsx
+import { fetchExternalData } from './api/server-actions';
+
+export default function Page() {
+  const handleFetch = async () => {
+    // Define a custom fetch with authentication
+    const customFetch = (url, options) => {
+      return fetch(url, {
+        ...options,
+        headers: {
+          ...options?.headers,
+          'Authorization': 'Bearer my-token',
+        },
+      });
+    };
+
+    const data = await fetchExternalData({ 
+      url: 'https://api.example.com/data',
+      fetch: customFetch 
+    });
+    console.log(data);
+  };
+
+  return <div>...</div>;
+}
+```
+
+**How it works**:
+- **Client-side**: If you provide a `fetch` field in an object parameter, it will be used for the RPC call instead of the global `fetch`
+- **Server-side**: The global `fetch` function is automatically injected into object parameters (unless you already provided your own)
+- User-provided fetch functions always take precedence over the injected one
+
 ## How it works
 
 The plugin will replace the content of files inside `pages/api` with `"poor man's use server"` at the top to make the exported functions callable from the browser.

server-actions-for-next-pages/CHANGELOG.md

@@ -1,5 +1,15 @@
 # server-actions-for-next-pages
 
+## 2.1.0
+
+### Minor Changes
+
+- Add custom fetch function support - you can now pass a `fetch` field in object parameters to customize fetch behavior (e.g., add authentication headers)
+- Client-side: Custom fetch functions can be provided and will be used for RPC calls instead of global fetch
+- Server-side: Global fetch is automatically injected into object parameters unless already provided by the user
+- Add comprehensive documentation for AbortController/AbortSignal support in README
+- Add documentation for custom fetch functionality with usage examples
+
 ## 2.0.0
 
 ### Major Changes

server-actions-for-next-pages/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server-actions-for-next-pages",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Use Next.js server actions in your pages directory",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

server-actions-for-next-pages/src/browser.ts

@@ -1,6 +1,6 @@
 import { JsonRpcRequest } from './jsonRpc';
 import { EventSourceParserStream } from 'eventsource-parser/stream';
-import { registerAbortControllerSerializers, findAbortSignalInArgs } from './superjson-setup';
+import { registerAbortControllerSerializers, findAbortSignalInArgs, findFetchInArgs } from './superjson-setup';
 
 type NextRpcCall = (...params: any[]) => any;
 
@@ -46,8 +46,9 @@ export function createRpcFetcher(
       const superjson = await import('superjson');
       registerAbortControllerSerializers(superjson.default);
       const abortSignal = findAbortSignalInArgs(args);
+      const customFetch = findFetchInArgs(args) || fetch;
       const { json, meta } = superjson.serialize(args);
-      const res = await fetch(url, {
+      const res = await customFetch(url, {
         method: 'POST',
         body: JSON.stringify(
           {
@@ -90,8 +91,9 @@ export function createRpcFetcher(
     const superjson = await import('superjson');
     registerAbortControllerSerializers(superjson.default);
     const abortSignal = findAbortSignalInArgs(args);
+    const customFetch = findFetchInArgs(args) || fetch;
     const { json, meta } = superjson.serialize(args);
-    const res = await fetch(url, {
+    const res = await customFetch(url, {
       method: 'POST',
       body: JSON.stringify(
         {

server-actions-for-next-pages/src/server.ts

@@ -2,7 +2,7 @@ import { NextApiHandler } from 'next';
 import { JsonRpcResponse } from './jsonRpc';
 import { NextRequest, NextResponse } from 'next/server';
 import { getEdgeContext, getRequestAbortSignal } from './context-internal';
-import { registerAbortControllerSerializers, replaceAbortSignalsInArgs } from './superjson-setup';
+import { registerAbortControllerSerializers, replaceAbortSignalsInArgs, injectFetchInArgs } from './superjson-setup';
 // @ts-ignore
 import type SuperJSON from 'superjson';
 
@@ -105,6 +105,9 @@ export function createRpcHandler(
         meta: argsMeta,
       }) as any[];
 
+      // Inject global fetch into args (won't override if user provided their own)
+      args = injectFetchInArgs(args, fetch);
+      
       const requestAbortSignal = getRequestAbortSignal();
       if (requestAbortSignal) {
         args = replaceAbortSignalsInArgs(args, requestAbortSignal);

server-actions-for-next-pages/src/superjson-setup.ts

@@ -78,3 +78,26 @@ export function replaceAbortSignalsInArgs(args: any[], newSignal: AbortSignal):
     return arg;
   });
 }
+
+export function findFetchInArgs(args: any[]): typeof fetch | undefined {
+  for (const arg of args) {
+    if (arg && typeof arg === 'object' && !Array.isArray(arg)) {
+      if (typeof arg.fetch === 'function') {
+        return arg.fetch;
+      }
+    }
+  }
+  return undefined;
+}
+
+export function injectFetchInArgs(args: any[], fetchFn: typeof fetch): any[] {
+  return args.map((arg) => {
+    if (arg && typeof arg === 'object' && !Array.isArray(arg)) {
+      // Only inject if fetch is not already present
+      if (!('fetch' in arg)) {
+        return { ...arg, fetch: fetchFn };
+      }
+    }
+    return arg;
+  });
+}