@tanstack/start-client-core 1.132.0-alpha.2 → 1.132.0-alpha.4

package/dist/esm/serverFnFetcher.js

@@ -0,0 +1,217 @@
+import { isPlainObject, encode, parseRedirect, isNotFound } from "@tanstack/router-core";
+import { fromCrossJSON, toJSONAsync } from "seroval";
+import invariant from "tiny-invariant";
+import { getClientSerovalPlugins } from "./serializer/getClientSerovalPlugins.js";
+import { X_TSS_SERIALIZED, TSS_FORMDATA_CONTEXT } from "./constants.js";
+let serovalPlugins = null;
+async function serverFnFetcher(url, args, handler) {
+  if (!serovalPlugins) {
+    serovalPlugins = getClientSerovalPlugins();
+  }
+  const _first = args[0];
+  if (isPlainObject(_first) && _first.method) {
+    const first = _first;
+    const type = first.data instanceof FormData ? "formData" : "payload";
+    const headers = new Headers({
+      "x-tsr-redirect": "manual",
+      ...type === "payload" ? {
+        "content-type": "application/json",
+        accept: "application/x-ndjson, application/json"
+      } : {},
+      ...first.headers instanceof Headers ? Object.fromEntries(first.headers.entries()) : first.headers
+    });
+    if (first.method === "GET") {
+      const encodedPayload = encode({
+        payload: await serializePayload(first)
+      });
+      if (encodedPayload) {
+        if (url.includes("?")) {
+          url += `&${encodedPayload}`;
+        } else {
+          url += `?${encodedPayload}`;
+        }
+      }
+    }
+    if (url.includes("?")) {
+      url += `&createServerFn`;
+    } else {
+      url += `?createServerFn`;
+    }
+    if (first.response === "raw") {
+      url += `&raw`;
+    }
+    return await getResponse(
+      async () => handler(url, {
+        method: first.method,
+        headers,
+        signal: first.signal,
+        ...await getFetcherRequestOptions(first)
+      })
+    );
+  }
+  return await getResponse(
+    () => handler(url, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(args)
+    })
+  );
+}
+async function serializePayload(opts) {
+  const payloadToSerialize = {};
+  if (opts.data) {
+    payloadToSerialize["data"] = opts.data;
+  }
+  if (opts.context && Object.keys(opts.context).length > 0) {
+    payloadToSerialize["context"] = opts.context;
+  }
+  return serialize(payloadToSerialize);
+}
+async function serialize(data) {
+  return JSON.stringify(
+    await Promise.resolve(toJSONAsync(data, { plugins: serovalPlugins }))
+  );
+}
+async function getFetcherRequestOptions(opts) {
+  if (opts.method === "POST") {
+    if (opts.data instanceof FormData) {
+      opts.data.set(TSS_FORMDATA_CONTEXT, await serialize(opts.context));
+      return {
+        body: opts.data
+      };
+    }
+    return {
+      body: await serializePayload(opts)
+    };
+  }
+  return {};
+}
+async function getResponse(fn) {
+  const response = await (async () => {
+    try {
+      return await fn();
+    } catch (error) {
+      if (error instanceof Response) {
+        return error;
+      }
+      throw error;
+    }
+  })();
+  const contentType = response.headers.get("content-type");
+  invariant(contentType, "expected content-type header to be set");
+  const serializedByStart = !!response.headers.get(X_TSS_SERIALIZED);
+  if (!response.ok) {
+    if (serializedByStart && contentType.includes("application/json")) {
+      const jsonPayload = await response.json();
+      const result = fromCrossJSON(jsonPayload, { plugins: serovalPlugins });
+      throw result;
+    }
+    throw new Error(await response.text());
+  }
+  if (serializedByStart) {
+    let result;
+    if (contentType.includes("application/x-ndjson")) {
+      const refs = /* @__PURE__ */ new Map();
+      result = await processServerFnResponse({
+        response,
+        onMessage: (msg) => fromCrossJSON(msg, { refs, plugins: serovalPlugins }),
+        onError(msg, error) {
+          console.error(msg, error);
+        }
+      });
+    }
+    if (contentType.includes("application/json")) {
+      const jsonPayload = await response.json();
+      result = fromCrossJSON(jsonPayload, { plugins: serovalPlugins });
+    }
+    invariant(result, "expected result to be resolved");
+    if (result instanceof Error) {
+      throw result;
+    }
+    return result;
+  }
+  if (contentType.includes("application/json")) {
+    const jsonPayload = await response.json();
+    const redirect = parseRedirect(jsonPayload);
+    if (redirect) {
+      throw redirect;
+    }
+    if (isNotFound(jsonPayload)) {
+      throw jsonPayload;
+    }
+    return jsonPayload;
+  }
+  return response;
+}
+async function processServerFnResponse({
+  response,
+  onMessage,
+  onError
+}) {
+  if (!response.body) {
+    throw new Error("No response body");
+  }
+  const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
+  let buffer = "";
+  let firstRead = false;
+  let firstObject;
+  while (!firstRead) {
+    const { value, done } = await reader.read();
+    if (value) buffer += value;
+    if (buffer.length === 0 && done) {
+      throw new Error("Stream ended before first object");
+    }
+    if (buffer.endsWith("\n")) {
+      const lines = buffer.split("\n").filter(Boolean);
+      const firstLine = lines[0];
+      if (!firstLine) throw new Error("No JSON line in the first chunk");
+      firstObject = JSON.parse(firstLine);
+      firstRead = true;
+      buffer = lines.slice(1).join("\n");
+    } else {
+      const newlineIndex = buffer.indexOf("\n");
+      if (newlineIndex >= 0) {
+        const line = buffer.slice(0, newlineIndex).trim();
+        buffer = buffer.slice(newlineIndex + 1);
+        if (line.length > 0) {
+          firstObject = JSON.parse(line);
+          firstRead = true;
+        }
+      }
+    }
+  }
+  (async () => {
+    try {
+      while (true) {
+        const { value, done } = await reader.read();
+        if (value) buffer += value;
+        const lastNewline = buffer.lastIndexOf("\n");
+        if (lastNewline >= 0) {
+          const chunk = buffer.slice(0, lastNewline);
+          buffer = buffer.slice(lastNewline + 1);
+          const lines = chunk.split("\n").filter(Boolean);
+          for (const line of lines) {
+            try {
+              onMessage(JSON.parse(line));
+            } catch (e) {
+              onError?.(`Invalid JSON line: ${line}`, e);
+            }
+          }
+        }
+        if (done) {
+          break;
+        }
+      }
+    } catch (err) {
+      onError?.("Stream processing error:", err);
+    }
+  })();
+  return onMessage(firstObject);
+}
+export {
+  serverFnFetcher
+};
+//# sourceMappingURL=serverFnFetcher.js.map

package/dist/esm/serverFnFetcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"serverFnFetcher.js","sources":["../../src/serverFnFetcher.ts"],"sourcesContent":["import {\n  encode,\n  isNotFound,\n  isPlainObject,\n  parseRedirect,\n} from '@tanstack/router-core'\nimport { fromCrossJSON, toJSONAsync } from 'seroval'\nimport invariant from 'tiny-invariant'\nimport { getClientSerovalPlugins } from './serializer/getClientSerovalPlugins'\nimport { TSS_FORMDATA_CONTEXT, X_TSS_SERIALIZED } from './constants'\nimport type { FunctionMiddlewareClientFnOptions } from './createMiddleware'\nimport type { Plugin as SerovalPlugin } from 'seroval'\n\nlet serovalPlugins: Array<SerovalPlugin<any, any>> | null = null\n\nexport async function serverFnFetcher(\n  url: string,\n  args: Array<any>,\n  handler: (url: string, requestInit: RequestInit) => Promise<Response>,\n) {\n  if (!serovalPlugins) {\n    serovalPlugins = getClientSerovalPlugins()\n  }\n  const _first = args[0]\n\n  // If createServerFn was used to wrap the fetcher,\n  // We need to handle the arguments differently\n  if (isPlainObject(_first) && _first.method) {\n    const first = _first as FunctionMiddlewareClientFnOptions<\n      any,\n      any,\n      any,\n      any\n    > & {\n      headers: HeadersInit\n    }\n    const type = first.data instanceof FormData ? 'formData' : 'payload'\n\n    // Arrange the headers\n    const headers = new Headers({\n      'x-tsr-redirect': 'manual',\n      ...(type === 'payload'\n        ? {\n            'content-type': 'application/json',\n            accept: 'application/x-ndjson, application/json',\n          }\n        : {}),\n      ...(first.headers instanceof Headers\n        ? Object.fromEntries(first.headers.entries())\n        : first.headers),\n    })\n\n    // If the method is GET, we need to move the payload to the query string\n    if (first.method === 'GET') {\n      const encodedPayload = encode({\n        payload: await serializePayload(first),\n      })\n\n      if (encodedPayload) {\n        if (url.includes('?')) {\n          url += `&${encodedPayload}`\n        } else {\n          url += `?${encodedPayload}`\n        }\n      }\n    }\n\n    if (url.includes('?')) {\n      url += `&createServerFn`\n    } else {\n      url += `?createServerFn`\n    }\n    if (first.response === 'raw') {\n      url += `&raw`\n    }\n\n    return await getResponse(async () =>\n      handler(url, {\n        method: first.method,\n        headers,\n        signal: first.signal,\n        ...(await getFetcherRequestOptions(first)),\n      }),\n    )\n  }\n\n  // If not a custom fetcher, it was probably\n  // a `use server` function, so just proxy the arguments\n  // through as a POST request\n  return await getResponse(() =>\n    handler(url, {\n      method: 'POST',\n      headers: {\n        Accept: 'application/json',\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify(args),\n    }),\n  )\n}\n\nasync function serializePayload(\n  opts: FunctionMiddlewareClientFnOptions<any, any, any, any>,\n) {\n  const payloadToSerialize: any = {}\n  if (opts.data) {\n    payloadToSerialize['data'] = opts.data\n  }\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  if (opts.context && Object.keys(opts.context).length > 0) {\n    payloadToSerialize['context'] = opts.context\n  }\n\n  return serialize(payloadToSerialize)\n}\n\nasync function serialize(data: any) {\n  return JSON.stringify(\n    await Promise.resolve(toJSONAsync(data, { plugins: serovalPlugins! })),\n  )\n}\n\nasync function getFetcherRequestOptions(\n  opts: FunctionMiddlewareClientFnOptions<any, any, any, any>,\n) {\n  if (opts.method === 'POST') {\n    if (opts.data instanceof FormData) {\n      opts.data.set(TSS_FORMDATA_CONTEXT, await serialize(opts.context))\n      return {\n        body: opts.data,\n      }\n    }\n\n    return {\n      body: await serializePayload(opts),\n    }\n  }\n\n  return {}\n}\n\n/**\n * Retrieves a response from a given function and manages potential errors\n * and special response types including redirects and not found errors.\n *\n * @param fn - The function to execute for obtaining the response.\n * @returns The processed response from the function.\n * @throws If the response is invalid or an error occurs during processing.\n */\nasync function getResponse(fn: () => Promise<Response>) {\n  const response = await (async () => {\n    try {\n      return await fn()\n    } catch (error) {\n      if (error instanceof Response) {\n        return error\n      }\n\n      throw error\n    }\n  })()\n\n  const contentType = response.headers.get('content-type')\n  invariant(contentType, 'expected content-type header to be set')\n  const serializedByStart = !!response.headers.get(X_TSS_SERIALIZED)\n  // If the response is not ok, throw an error\n  if (!response.ok) {\n    if (serializedByStart && contentType.includes('application/json')) {\n      const jsonPayload = await response.json()\n      const result = fromCrossJSON(jsonPayload, { plugins: serovalPlugins! })\n      throw result\n    }\n\n    throw new Error(await response.text())\n  }\n\n  if (serializedByStart) {\n    let result\n    if (contentType.includes('application/x-ndjson')) {\n      const refs = new Map()\n      result = await processServerFnResponse({\n        response,\n        onMessage: (msg) =>\n          fromCrossJSON(msg, { refs, plugins: serovalPlugins! }),\n        onError(msg, error) {\n          // TODO how could we notify consumer that an error occurred?\n          console.error(msg, error)\n        },\n      })\n    }\n    if (contentType.includes('application/json')) {\n      const jsonPayload = await response.json()\n      result = fromCrossJSON(jsonPayload, { plugins: serovalPlugins! })\n    }\n    invariant(result, 'expected result to be resolved')\n    if (result instanceof Error) {\n      throw result\n    }\n    return result\n  }\n\n  if (contentType.includes('application/json')) {\n    const jsonPayload = await response.json()\n    const redirect = parseRedirect(jsonPayload)\n    if (redirect) {\n      throw redirect\n    }\n    if (isNotFound(jsonPayload)) {\n      throw jsonPayload\n    }\n    return jsonPayload\n  }\n\n  return response\n}\n\nasync function processServerFnResponse({\n  response,\n  onMessage,\n  onError,\n}: {\n  response: Response\n  onMessage: (msg: any) => any\n  onError?: (msg: string, error?: any) => void\n}) {\n  if (!response.body) {\n    throw new Error('No response body')\n  }\n\n  const reader = response.body.pipeThrough(new TextDecoderStream()).getReader()\n\n  let buffer = ''\n  let firstRead = false\n  let firstObject\n\n  while (!firstRead) {\n    const { value, done } = await reader.read()\n    if (value) buffer += value\n\n    if (buffer.length === 0 && done) {\n      throw new Error('Stream ended before first object')\n    }\n\n    // common case: buffer ends with newline\n    if (buffer.endsWith('\\n')) {\n      const lines = buffer.split('\\n').filter(Boolean)\n      const firstLine = lines[0]\n      if (!firstLine) throw new Error('No JSON line in the first chunk')\n      firstObject = JSON.parse(firstLine)\n      firstRead = true\n      buffer = lines.slice(1).join('\\n')\n    } else {\n      // fallback: wait for a newline to parse first object safely\n      const newlineIndex = buffer.indexOf('\\n')\n      if (newlineIndex >= 0) {\n        const line = buffer.slice(0, newlineIndex).trim()\n        buffer = buffer.slice(newlineIndex + 1)\n        if (line.length > 0) {\n          firstObject = JSON.parse(line)\n          firstRead = true\n        }\n      }\n    }\n  }\n\n  // process rest of the stream asynchronously\n  ;(async () => {\n    try {\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      while (true) {\n        const { value, done } = await reader.read()\n        if (value) buffer += value\n\n        const lastNewline = buffer.lastIndexOf('\\n')\n        if (lastNewline >= 0) {\n          const chunk = buffer.slice(0, lastNewline)\n          buffer = buffer.slice(lastNewline + 1)\n          const lines = chunk.split('\\n').filter(Boolean)\n\n          for (const line of lines) {\n            try {\n              onMessage(JSON.parse(line))\n            } catch (e) {\n              onError?.(`Invalid JSON line: ${line}`, e)\n            }\n          }\n        }\n\n        if (done) {\n          break\n        }\n      }\n    } catch (err) {\n      onError?.('Stream processing error:', err)\n    }\n  })()\n\n  return onMessage(firstObject)\n}\n"],"names":[],"mappings":";;;;;AAaA,IAAI,iBAAwD;AAE5D,eAAsB,gBACpB,KACA,MACA,SACA;AACA,MAAI,CAAC,gBAAgB;AACnB,qBAAiB,wBAAA;AAAA,EACnB;AACA,QAAM,SAAS,KAAK,CAAC;AAIrB,MAAI,cAAc,MAAM,KAAK,OAAO,QAAQ;AAC1C,UAAM,QAAQ;AAQd,UAAM,OAAO,MAAM,gBAAgB,WAAW,aAAa;AAG3D,UAAM,UAAU,IAAI,QAAQ;AAAA,MAC1B,kBAAkB;AAAA,MAClB,GAAI,SAAS,YACT;AAAA,QACE,gBAAgB;AAAA,QAChB,QAAQ;AAAA,MAAA,IAEV,CAAA;AAAA,MACJ,GAAI,MAAM,mBAAmB,UACzB,OAAO,YAAY,MAAM,QAAQ,SAAS,IAC1C,MAAM;AAAA,IAAA,CACX;AAGD,QAAI,MAAM,WAAW,OAAO;AAC1B,YAAM,iBAAiB,OAAO;AAAA,QAC5B,SAAS,MAAM,iBAAiB,KAAK;AAAA,MAAA,CACtC;AAED,UAAI,gBAAgB;AAClB,YAAI,IAAI,SAAS,GAAG,GAAG;AACrB,iBAAO,IAAI,cAAc;AAAA,QAC3B,OAAO;AACL,iBAAO,IAAI,cAAc;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AAEA,QAAI,IAAI,SAAS,GAAG,GAAG;AACrB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AACA,QAAI,MAAM,aAAa,OAAO;AAC5B,aAAO;AAAA,IACT;AAEA,WAAO,MAAM;AAAA,MAAY,YACvB,QAAQ,KAAK;AAAA,QACX,QAAQ,MAAM;AAAA,QACd;AAAA,QACA,QAAQ,MAAM;AAAA,QACd,GAAI,MAAM,yBAAyB,KAAK;AAAA,MAAA,CACzC;AAAA,IAAA;AAAA,EAEL;AAKA,SAAO,MAAM;AAAA,IAAY,MACvB,QAAQ,KAAK;AAAA,MACX,QAAQ;AAAA,MACR,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,gBAAgB;AAAA,MAAA;AAAA,MAElB,MAAM,KAAK,UAAU,IAAI;AAAA,IAAA,CAC1B;AAAA,EAAA;AAEL;AAEA,eAAe,iBACb,MACA;AACA,QAAM,qBAA0B,CAAA;AAChC,MAAI,KAAK,MAAM;AACb,uBAAmB,MAAM,IAAI,KAAK;AAAA,EACpC;AAEA,MAAI,KAAK,WAAW,OAAO,KAAK,KAAK,OAAO,EAAE,SAAS,GAAG;AACxD,uBAAmB,SAAS,IAAI,KAAK;AAAA,EACvC;AAEA,SAAO,UAAU,kBAAkB;AACrC;AAEA,eAAe,UAAU,MAAW;AAClC,SAAO,KAAK;AAAA,IACV,MAAM,QAAQ,QAAQ,YAAY,MAAM,EAAE,SAAS,gBAAiB,CAAC;AAAA,EAAA;AAEzE;AAEA,eAAe,yBACb,MACA;AACA,MAAI,KAAK,WAAW,QAAQ;AAC1B,QAAI,KAAK,gBAAgB,UAAU;AACjC,WAAK,KAAK,IAAI,sBAAsB,MAAM,UAAU,KAAK,OAAO,CAAC;AACjE,aAAO;AAAA,QACL,MAAM,KAAK;AAAA,MAAA;AAAA,IAEf;AAEA,WAAO;AAAA,MACL,MAAM,MAAM,iBAAiB,IAAI;AAAA,IAAA;AAAA,EAErC;AAEA,SAAO,CAAA;AACT;AAUA,eAAe,YAAY,IAA6B;AACtD,QAAM,WAAW,OAAO,YAAY;AAClC,QAAI;AACF,aAAO,MAAM,GAAA;AAAA,IACf,SAAS,OAAO;AACd,UAAI,iBAAiB,UAAU;AAC7B,eAAO;AAAA,MACT;AAEA,YAAM;AAAA,IACR;AAAA,EACF,GAAA;AAEA,QAAM,cAAc,SAAS,QAAQ,IAAI,cAAc;AACvD,YAAU,aAAa,wCAAwC;AAC/D,QAAM,oBAAoB,CAAC,CAAC,SAAS,QAAQ,IAAI,gBAAgB;AAEjE,MAAI,CAAC,SAAS,IAAI;AAChB,QAAI,qBAAqB,YAAY,SAAS,kBAAkB,GAAG;AACjE,YAAM,cAAc,MAAM,SAAS,KAAA;AACnC,YAAM,SAAS,cAAc,aAAa,EAAE,SAAS,gBAAiB;AACtE,YAAM;AAAA,IACR;AAEA,UAAM,IAAI,MAAM,MAAM,SAAS,MAAM;AAAA,EACvC;AAEA,MAAI,mBAAmB;AACrB,QAAI;AACJ,QAAI,YAAY,SAAS,sBAAsB,GAAG;AAChD,YAAM,2BAAW,IAAA;AACjB,eAAS,MAAM,wBAAwB;AAAA,QACrC;AAAA,QACA,WAAW,CAAC,QACV,cAAc,KAAK,EAAE,MAAM,SAAS,gBAAiB;AAAA,QACvD,QAAQ,KAAK,OAAO;AAElB,kBAAQ,MAAM,KAAK,KAAK;AAAA,QAC1B;AAAA,MAAA,CACD;AAAA,IACH;AACA,QAAI,YAAY,SAAS,kBAAkB,GAAG;AAC5C,YAAM,cAAc,MAAM,SAAS,KAAA;AACnC,eAAS,cAAc,aAAa,EAAE,SAAS,gBAAiB;AAAA,IAClE;AACA,cAAU,QAAQ,gCAAgC;AAClD,QAAI,kBAAkB,OAAO;AAC3B,YAAM;AAAA,IACR;AACA,WAAO;AAAA,EACT;AAEA,MAAI,YAAY,SAAS,kBAAkB,GAAG;AAC5C,UAAM,cAAc,MAAM,SAAS,KAAA;AACnC,UAAM,WAAW,cAAc,WAAW;AAC1C,QAAI,UAAU;AACZ,YAAM;AAAA,IACR;AACA,QAAI,WAAW,WAAW,GAAG;AAC3B,YAAM;AAAA,IACR;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,eAAe,wBAAwB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,CAAC,SAAS,MAAM;AAClB,UAAM,IAAI,MAAM,kBAAkB;AAAA,EACpC;AAEA,QAAM,SAAS,SAAS,KAAK,YAAY,IAAI,kBAAA,CAAmB,EAAE,UAAA;AAElE,MAAI,SAAS;AACb,MAAI,YAAY;AAChB,MAAI;AAEJ,SAAO,CAAC,WAAW;AACjB,UAAM,EAAE,OAAO,KAAA,IAAS,MAAM,OAAO,KAAA;AACrC,QAAI,MAAO,WAAU;AAErB,QAAI,OAAO,WAAW,KAAK,MAAM;AAC/B,YAAM,IAAI,MAAM,kCAAkC;AAAA,IACpD;AAGA,QAAI,OAAO,SAAS,IAAI,GAAG;AACzB,YAAM,QAAQ,OAAO,MAAM,IAAI,EAAE,OAAO,OAAO;AAC/C,YAAM,YAAY,MAAM,CAAC;AACzB,UAAI,CAAC,UAAW,OAAM,IAAI,MAAM,iCAAiC;AACjE,oBAAc,KAAK,MAAM,SAAS;AAClC,kBAAY;AACZ,eAAS,MAAM,MAAM,CAAC,EAAE,KAAK,IAAI;AAAA,IACnC,OAAO;AAEL,YAAM,eAAe,OAAO,QAAQ,IAAI;AACxC,UAAI,gBAAgB,GAAG;AACrB,cAAM,OAAO,OAAO,MAAM,GAAG,YAAY,EAAE,KAAA;AAC3C,iBAAS,OAAO,MAAM,eAAe,CAAC;AACtC,YAAI,KAAK,SAAS,GAAG;AACnB,wBAAc,KAAK,MAAM,IAAI;AAC7B,sBAAY;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGC,GAAC,YAAY;AACZ,QAAI;AAEF,aAAO,MAAM;AACX,cAAM,EAAE,OAAO,KAAA,IAAS,MAAM,OAAO,KAAA;AACrC,YAAI,MAAO,WAAU;AAErB,cAAM,cAAc,OAAO,YAAY,IAAI;AAC3C,YAAI,eAAe,GAAG;AACpB,gBAAM,QAAQ,OAAO,MAAM,GAAG,WAAW;AACzC,mBAAS,OAAO,MAAM,cAAc,CAAC;AACrC,gBAAM,QAAQ,MAAM,MAAM,IAAI,EAAE,OAAO,OAAO;AAE9C,qBAAW,QAAQ,OAAO;AACxB,gBAAI;AACF,wBAAU,KAAK,MAAM,IAAI,CAAC;AAAA,YAC5B,SAAS,GAAG;AACV,wBAAU,sBAAsB,IAAI,IAAI,CAAC;AAAA,YAC3C;AAAA,UACF;AAAA,QACF;AAEA,YAAI,MAAM;AACR;AAAA,QACF;AAAA,MACF;AAAA,IACF,SAAS,KAAK;AACZ,gBAAU,4BAA4B,GAAG;AAAA,IAC3C;AAAA,EACF,GAAA;AAEA,SAAO,UAAU,WAAW;AAC9B;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/start-client-core",
-  "version": "1.132.0-alpha.2",
+  "version": "1.132.0-alpha.4",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -44,10 +44,12 @@
   },
   "dependencies": {
     "cookie-es": "^1.2.2",
+    "seroval": "^1.3.2",
+    "seroval-plugins": "^1.3.2",
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
-    "@tanstack/router-core": "1.132.0-alpha.2",
-    "@tanstack/start-storage-context": "1.132.0-alpha.2"
+    "@tanstack/router-core": "1.132.0-alpha.4",
+    "@tanstack/start-storage-context": "1.132.0-alpha.4"
   },
   "scripts": {}
 }

package/src/constants.ts

@@ -0,0 +1,5 @@
+export const TSS_FORMDATA_CONTEXT = '__TSS_CONTEXT'
+export const TSS_SERVER_FUNCTION = Symbol.for('TSS_SERVER_FUNCTION')
+
+export const X_TSS_SERIALIZED = 'x-tss-serialized'
+export {}

package/src/createClientRpc.ts

@@ -0,0 +1,26 @@
+import { TSS_SERVER_FUNCTION } from './constants'
+import { serverFnFetcher } from './serverFnFetcher'
+
+let baseUrl: string
+function sanitizeBase(base: string) {
+  return base.replace(/^\/|\/$/g, '')
+}
+
+export const createClientRpc = (functionId: string) => {
+  if (!baseUrl) {
+    const sanitizedAppBase = sanitizeBase(process.env.TSS_APP_BASE || '/')
+    const sanitizedServerBase = sanitizeBase(process.env.TSS_SERVER_FN_BASE!)
+    baseUrl = `${sanitizedAppBase ? `/${sanitizedAppBase}` : ''}/${sanitizedServerBase}/`
+  }
+  const url = baseUrl + functionId
+
+  const clientFn = (...args: Array<any>) => {
+    return serverFnFetcher(url, args, fetch)
+  }
+
+  return Object.assign(clientFn, {
+    url,
+    functionId,
+    [TSS_SERVER_FUNCTION]: true,
+  })
+}

package/src/createServerFn.ts

@@ -1,11 +1,8 @@
 import { isNotFound, isRedirect } from '@tanstack/router-core'
 import { mergeHeaders } from '@tanstack/router-core/ssr/client'
-import { getStartContext } from '@tanstack/start-storage-context'
 import { globalMiddleware } from './registerGlobalMiddleware'
 
-import { startSerializer } from './serializer'
-
-import { createIsomorphicFn } from './createIsomorphicFn'
+import { getRouterInstance } from './getRouterInstance'
 import type {
   SerializerParse,
   SerializerStringify,
@@ -33,10 +30,6 @@ import type {
 
 type TODO = any
 
-const getRouterInstance = createIsomorphicFn()
-  .client(() => window.__TSR_ROUTER__!)
-  .server(() => getStartContext({ throwIfNotFound: false })?.router)
-
 export function createServerFn<
   TMethod extends Method,
   TServerFnResponseType extends ServerFnResponseType = 'data',
@@ -143,10 +136,7 @@ export function createServerFn<
           ...extractedFn,
           // The extracted function on the server-side calls
           // this function
-          __executeServer: async (opts_: any, signal: AbortSignal) => {
-            const opts =
-              opts_ instanceof FormData ? extractFormDataContext(opts_) : opts_
-
+          __executeServer: async (opts: any, signal: AbortSignal) => {
             const ctx = {
               ...extractedFn,
               ...opts,
@@ -521,30 +511,6 @@ export interface ServerFnBuilder<
   >
 }
 
-export function extractFormDataContext(formData: FormData) {
-  const serializedContext = formData.get('__TSR_CONTEXT')
-  formData.delete('__TSR_CONTEXT')
-
-  if (typeof serializedContext !== 'string') {
-    return {
-      context: {},
-      data: formData,
-    }
-  }
-
-  try {
-    const context = startSerializer.parse(serializedContext)
-    return {
-      context,
-      data: formData,
-    }
-  } catch {
-    return {
-      data: formData,
-    }
-  }
-}
-
 export function flattenMiddlewares(
   middlewares: Array<AnyFunctionMiddleware>,
 ): Array<AnyFunctionMiddleware> {

package/src/getRouterInstance.ts

@@ -0,0 +1,7 @@
+import { getStartContext } from '@tanstack/start-storage-context'
+import { createIsomorphicFn } from './createIsomorphicFn'
+
+// TODO should this be a public API
+export const getRouterInstance = createIsomorphicFn()
+  .client(() => window.__TSR_ROUTER__!)
+  .server(() => getStartContext().router)

package/src/index.tsx

@@ -5,10 +5,7 @@ export type {
 
 export { hydrate, json, mergeHeaders } from '@tanstack/router-core/ssr/client'
 
-export { startSerializer } from './serializer'
-
 export type {
-  StartSerializer,
   Serializable,
   SerializerParse,
   SerializerParseBy,
@@ -83,7 +80,16 @@ export {
   applyMiddleware,
   execValidator,
   serverFnBaseToMiddleware,
-  extractFormDataContext,
   flattenMiddlewares,
   executeMiddleware,
 } from './createServerFn'
+
+export { createClientRpc } from './createClientRpc'
+
+export { getDefaultSerovalPlugins } from './serializer/getDefaultSerovalPlugins'
+
+export {
+  TSS_FORMDATA_CONTEXT,
+  TSS_SERVER_FUNCTION,
+  X_TSS_SERIALIZED,
+} from './constants'

package/src/serializer/ServerFunctionSerializationAdapter.ts

@@ -0,0 +1,10 @@
+import { createSerializationAdapter } from '@tanstack/router-core'
+import { createClientRpc } from '../createClientRpc'
+import { TSS_SERVER_FUNCTION } from '../constants'
+
+export const ServerFunctionSerializationAdapter = createSerializationAdapter({
+  key: '$TSS/serverfn',
+  test: (v): v is { functionId: string } => v[TSS_SERVER_FUNCTION],
+  toSerializable: ({ functionId }) => ({ functionId }),
+  fromSerializable: ({ functionId }) => createClientRpc(functionId),
+})

package/src/serializer/getClientSerovalPlugins.ts

@@ -0,0 +1,10 @@
+import { makeSerovalPlugin } from '@tanstack/router-core'
+import { getDefaultSerovalPlugins } from './getDefaultSerovalPlugins'
+import { ServerFunctionSerializationAdapter } from './ServerFunctionSerializationAdapter'
+
+export function getClientSerovalPlugins() {
+  return [
+    ...getDefaultSerovalPlugins(),
+    makeSerovalPlugin(ServerFunctionSerializationAdapter),
+  ]
+}

package/src/serializer/getDefaultSerovalPlugins.ts

@@ -0,0 +1,24 @@
+import invariant from 'tiny-invariant'
+import {
+  makeSerovalPlugin,
+  defaultSerovalPlugins as routerDefaultSerovalPlugins,
+} from '@tanstack/router-core'
+import { FormDataPlugin } from 'seroval-plugins/web'
+import { getRouterInstance } from '../getRouterInstance'
+import type { AnyTransformer } from '@tanstack/router-core'
+
+import type { Plugin } from 'seroval'
+
+export const defaultSerovalPlugins = [
+  ...routerDefaultSerovalPlugins,
+  FormDataPlugin as Plugin<FormData, any>,
+]
+
+export function getDefaultSerovalPlugins() {
+  const router = getRouterInstance()
+  invariant(router, 'Expected router instance to be available')
+  const adapters = router.options.serializationAdapters as
+    | Array<AnyTransformer>
+    | undefined
+  return [...(adapters?.map(makeSerovalPlugin) ?? []), ...defaultSerovalPlugins]
+}

package/src/serializer.ts

@@ -1,12 +1,3 @@
-import { isPlainObject } from '@tanstack/router-core'
-
-export interface StartSerializer {
-  stringify: (obj: unknown) => string
-  parse: (str: string) => unknown
-  encode: <T>(value: T) => T
-  decode: <T>(value: T) => T
-}
-
 export type SerializerStringifyBy<T, TSerializable> = T extends TSerializable
   ? T
   : T extends (...args: Array<any>) => any
@@ -32,188 +23,3 @@ export type Serializable = Date | undefined | Error | FormData | bigint
 export type SerializerStringify<T> = SerializerStringifyBy<T, Serializable>
 
 export type SerializerParse<T> = SerializerParseBy<T, Serializable>
-export const startSerializer: StartSerializer = {
-  stringify: (value: any) =>
-    JSON.stringify(value, function replacer(key, val) {
-      const ogVal = this[key]
-      const serializer = serializers.find((t) => t.stringifyCondition(ogVal))
-
-      if (serializer) {
-        return serializer.stringify(ogVal)
-      }
-
-      return val
-    }),
-  parse: (value: string) =>
-    JSON.parse(value, function parser(key, val) {
-      const ogVal = this[key]
-      if (isPlainObject(ogVal)) {
-        const serializer = serializers.find((t) => t.parseCondition(ogVal))
-
-        if (serializer) {
-          return serializer.parse(ogVal)
-        }
-      }
-
-      return val
-    }),
-  encode: (value: any) => {
-    // When encoding, dive first
-    if (Array.isArray(value)) {
-      return value.map((v) => startSerializer.encode(v))
-    }
-
-    if (isPlainObject(value)) {
-      return Object.fromEntries(
-        Object.entries(value).map(([key, v]) => [
-          key,
-          startSerializer.encode(v),
-        ]),
-      )
-    }
-
-    const serializer = serializers.find((t) => t.stringifyCondition(value))
-    if (serializer) {
-      return serializer.stringify(value)
-    }
-
-    return value
-  },
-  decode: (value: any) => {
-    // Attempt transform first
-    if (isPlainObject(value)) {
-      const serializer = serializers.find((t) => t.parseCondition(value))
-      if (serializer) {
-        return serializer.parse(value)
-      }
-    }
-
-    if (Array.isArray(value)) {
-      return value.map((v) => startSerializer.decode(v))
-    }
-
-    if (isPlainObject(value)) {
-      return Object.fromEntries(
-        Object.entries(value).map(([key, v]) => [
-          key,
-          startSerializer.decode(v),
-        ]),
-      )
-    }
-
-    return value
-  },
-}
-const createSerializer = <TKey extends string, TInput, TSerialized>(
-  key: TKey,
-  check: (value: any) => value is TInput,
-  toValue: (value: TInput) => TSerialized,
-  fromValue: (value: TSerialized) => TInput,
-) => ({
-  key,
-  stringifyCondition: check,
-  stringify: (value: any) => ({ [`$${key}`]: toValue(value) }),
-  parseCondition: (value: any) => Object.hasOwn(value, `$${key}`),
-  parse: (value: any) => fromValue(value[`$${key}`]),
-})
-// Keep these ordered by predicted frequency
-// Make sure to keep DefaultSerializable in sync with these serializers
-// Also, make sure that they are unit tested in serializer.test.tsx
-const serializers = [
-  createSerializer(
-    // Key
-    'undefined',
-    // Check
-    (v): v is undefined => v === undefined,
-    // To
-    () => 0,
-    // From
-    () => undefined,
-  ),
-  createSerializer(
-    // Key
-    'date',
-    // Check
-    (v): v is Date => v instanceof Date,
-    // To
-    (v) => v.toISOString(),
-    // From
-    (v) => new Date(v),
-  ),
-  createSerializer(
-    // Key
-    'error',
-    // Check
-    (v): v is Error => v instanceof Error,
-    // To
-    (v) => ({
-      ...v,
-      message: v.message,
-      stack: process.env.NODE_ENV === 'development' ? v.stack : undefined,
-      cause: v.cause,
-    }),
-    // From
-    (v) => Object.assign(new Error(v.message), v),
-  ),
-  createSerializer(
-    // Key
-    'formData',
-    // Check
-    (v): v is FormData => v instanceof FormData,
-    // To
-    (v) => {
-      const entries: Record<
-        string,
-        Array<FormDataEntryValue> | FormDataEntryValue
-      > = {}
-      v.forEach((value, key) => {
-        const entry = entries[key]
-        if (entry !== undefined) {
-          if (Array.isArray(entry)) {
-            entry.push(value)
-          } else {
-            entries[key] = [entry, value]
-          }
-        } else {
-          entries[key] = value
-        }
-      })
-      return entries
-    },
-    // From
-    (v) => {
-      const formData = new FormData()
-      Object.entries(v).forEach(([key, value]) => {
-        if (Array.isArray(value)) {
-          value.forEach((val) => formData.append(key, val))
-        } else {
-          formData.append(key, value)
-        }
-      })
-      return formData
-    },
-  ),
-  createSerializer(
-    // Key
-    'bigint',
-    // Check
-    (v): v is bigint => typeof v === 'bigint',
-    // To
-    (v) => v.toString(),
-    // From
-    (v) => BigInt(v),
-  ),
-  createSerializer(
-    // Key
-    'server-function',
-    // Check
-    (v): v is { functionId: string } =>
-      typeof v === 'function' &&
-      'functionId' in v &&
-      typeof v.functionId === 'string',
-    // To
-    ({ functionId }) => ({ functionId, __serverFn: true }),
-    // From, dummy impl. the actual server function lookup is done on the server in packages/start-server-core/src/server-functions-handler.ts
-    (v) => v,
-  ),
-] as const