feat(2.0): seroval json mode (#2042)

Co-authored-by: Atila Fassina <atila@fassina.eu>

Author: lxsmnsyc

.changeset/plenty-geese-enter.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/start": minor
+---
+
+seroval json mode

.vscode/settings.json

@@ -4,5 +4,11 @@
   },
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "oxc.oxc-vscode"
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "[typescript]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  }
 }

apps/tests/src/e2e/server-function.test.ts

@@ -67,4 +67,18 @@ test.describe("server-function", () => {
     await page.goto("http://localhost:3000/generator-server-function");
     await expect(page.locator("#server-fn-test")).toContainText("¡Hola, Mundo!");
   });
+
+  test("should build with a server function ping", async ({ page }) => {
+    await page.goto("http://localhost:3000/server-function-ping");
+    await expect(page.locator("#server-fn-test")).toContainText('{"result":true}');
+  });
+
+  test("should build with a server function w/ form data", async ({ page }) => {
+    await page.goto("http://localhost:3000/server-function-form-data");
+    await expect(page.locator("#server-fn-test")).toContainText('{"result":true}');
+  });
+  test("should build with a server function w/ blob data", async ({ page }) => {
+    await page.goto("http://localhost:3000/server-function-blob");
+    await expect(page.locator("#server-fn-test")).toContainText('{"result":true}');
+  });
 });

apps/tests/src/routes/server-function-blob.tsx

@@ -0,0 +1,29 @@
+import { createEffect, createSignal } from "solid-js";
+
+async function ping(value: Blob) {
+  "use server";
+  return value;
+}
+
+const blobURI =
+  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNjYgMTU1LjMnPjxwYXRoIGQ9J00xNjMgMzVTMTEwLTQgNjkgNWwtMyAxYy02IDItMTEgNS0xNCA5bC0yIDMtMTUgMjYgMjYgNWMxMSA3IDI1IDEwIDM4IDdsNDYgOSAxOC0zMHonIGZpbGw9JyM3NmIzZTEnLz48bGluZWFyR3JhZGllbnQgaWQ9J2EnIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJyB4MT0nMjcuNScgeTE9JzMnIHgyPScxNTInIHkyPSc2My41Jz48c3RvcCBvZmZzZXQ9Jy4xJyBzdG9wLWNvbG9yPScjNzZiM2UxJy8+PHN0b3Agb2Zmc2V0PScuMycgc3RvcC1jb2xvcj0nI2RjZjJmZCcvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nIzc2YjNlMScvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZD0nTTE2MyAzNVMxMTAtNCA2OSA1bC0zIDFjLTYgMi0xMSA1LTE0IDlsLTIgMy0xNSAyNiAyNiA1YzExIDcgMjUgMTAgMzggN2w0NiA5IDE4LTMweicgb3BhY2l0eT0nLjMnIGZpbGw9J3VybCgjYSknLz48cGF0aCBkPSdNNTIgMzVsLTQgMWMtMTcgNS0yMiAyMS0xMyAzNSAxMCAxMyAzMSAyMCA0OCAxNWw2Mi0yMVM5MiAyNiA1MiAzNXonIGZpbGw9JyM1MThhYzgnLz48bGluZWFyR3JhZGllbnQgaWQ9J2InIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJyB4MT0nOTUuOCcgeTE9JzMyLjYnIHgyPSc3NCcgeTI9JzEwNS4yJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyM3NmIzZTEnLz48c3RvcCBvZmZzZXQ9Jy41JyBzdG9wLWNvbG9yPScjNDM3N2JiJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjMWYzYjc3Jy8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBkPSdNNTIgMzVsLTQgMWMtMTcgNS0yMiAyMS0xMyAzNSAxMCAxMyAzMSAyMCA0OCAxNWw2Mi0yMVM5MiAyNiA1MiAzNXonIG9wYWNpdHk9Jy4zJyBmaWxsPSd1cmwoI2IpJy8+PGxpbmVhckdyYWRpZW50IGlkPSdjJyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZScgeDE9JzE4LjQnIHkxPSc2NC4yJyB4Mj0nMTQ0LjMnIHkyPScxNDkuOCc+PHN0b3Agb2Zmc2V0PScwJyBzdG9wLWNvbG9yPScjMzE1YWE5Jy8+PHN0b3Agb2Zmc2V0PScuNScgc3RvcC1jb2xvcj0nIzUxOGFjOCcvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nIzMxNWFhOScvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZD0nTTEzNCA4MGE0NSA0NSAwIDAwLTQ4LTE1TDI0IDg1IDQgMTIwbDExMiAxOSAyMC0zNmM0LTcgMy0xNS0yLTIzeicgZmlsbD0ndXJsKCNjKScvPjxsaW5lYXJHcmFkaWVudCBpZD0nZCcgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnIHgxPSc3NS4yJyB5MT0nNzQuNScgeDI9JzI0LjQnIHkyPScyNjAuOCc+PHN0b3Agb2Zmc2V0PScwJyBzdG9wLWNvbG9yPScjNDM3N2JiJy8+PHN0b3Agb2Zmc2V0PScuNScgc3RvcC1jb2xvcj0nIzFhMzM2YicvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nIzFhMzM2YicvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZD0nTTExNCAxMTVhNDUgNDUgMCAwMC00OC0xNUw0IDEyMHM1MyA0MCA5NCAzMGwzLTFjMTctNSAyMy0yMSAxMy0zNHonIGZpbGw9J3VybCgjZCknLz48L3N2Zz4=";
+
+export default function App() {
+  const [output, setOutput] = createSignal<{ result?: boolean }>({});
+
+  createEffect(async () => {
+    const request = await fetch(blobURI);
+    const blob = await request.blob();
+    const result = await ping(blob);
+    const value = await blob.text();
+    const test = await result.text();
+
+    setOutput(prev => ({ ...prev, result: value === test }));
+  });
+
+  return (
+    <main>
+      <span id="server-fn-test">{JSON.stringify(output())}</span>
+    </main>
+  );
+}

apps/tests/src/routes/server-function-form-data.tsx

@@ -0,0 +1,26 @@
+import { createEffect, createSignal } from "solid-js";
+
+async function ping(value: FormData) {
+  "use server";
+  const file = value.get("example") as File;
+  return await file.text();
+}
+
+export default function App() {
+  const [output, setOutput] = createSignal<{ result?: boolean }>({});
+
+  createEffect(async () => {
+    const file = new File(["Hello, World!"], "hello-world.txt");
+    const formData = new FormData();
+    formData.append("example", file);
+    const result = await ping(formData);
+    const value = await file.text();
+    setOutput(prev => ({ ...prev, result: value === result }));
+  });
+
+  return (
+    <main>
+      <span id="server-fn-test">{JSON.stringify(output())}</span>
+    </main>
+  );
+}

apps/tests/src/routes/server-function-ping.tsx

@@ -0,0 +1,23 @@
+import { createEffect, createSignal } from "solid-js";
+
+async function ping(value: string) {
+  "use server";
+
+  return await Promise.resolve(value);
+}
+
+export default function App() {
+  const [output, setOutput] = createSignal<{ result?: boolean }>({});
+
+  createEffect(async () => {
+    const value = `${Math.random() * 1000}`;
+    const result = await ping(value);
+    setOutput(prev => ({ ...prev, result: value === result }));
+  });
+
+  return (
+    <main>
+      <span id="server-fn-test">{JSON.stringify(output())}</span>
+    </main>
+  );
+}

packages/start/package.json

@@ -56,8 +56,8 @@
     "path-to-regexp": "^8.2.0",
     "pathe": "^2.0.3",
     "radix3": "^1.1.2",
-    "seroval": "^1.4.1",
-    "seroval-plugins": "^1.4.0",
+    "seroval": "^1.5.0",
+    "seroval-plugins": "^1.5.0",
     "shiki": "^1.26.1",
     "solid-js": "^1.9.9",
     "source-map-js": "^1.2.1",

packages/start/src/config/index.ts

@@ -21,6 +21,17 @@ export interface SolidStartOptions {
   routeDir?: string;
   extensions?: string[];
   middleware?: string;
+  serialization?: {
+    /**
+     * The serialization mode to use for server functions/actions.
+     * The "js" mode uses a custom binary format that is more efficient than JSON, but requires a custom deserializer (with `eval()`) on the client.
+     * A strong CSP should block `eval()` executions, which would prevent the "js" mode from working.
+     * The "json" mode uses JSON for serialization, which is less efficient but can be deserialized with `JSON.parse` on the client.
+     *
+     * @default "json"
+     */
+    mode?: "js" | "json";
+  };
 }
 
 const absolute = (path: string, root: string) =>
@@ -131,6 +142,7 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
             "import.meta.env.START_APP_ENTRY": JSON.stringify(appEntryPath),
             "import.meta.env.START_CLIENT_ENTRY": JSON.stringify(handlers.client),
             "import.meta.env.START_DEV_OVERLAY": JSON.stringify(start.devOverlay),
+            "import.meta.env.SEROVAL_MODE": JSON.stringify(start.serialization?.mode || "json"),
           },
           builder: {
             sharedPlugins: true,
@@ -176,7 +188,7 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
           envName: VITE_ENVIRONMENTS.client,
           getRuntimeCode: () =>
             `import { createServerReference } from "${normalizePath(
-              fileURLToPath(new URL("../server/server-runtime", import.meta.url))
+              fileURLToPath(new URL("../server/server-runtime", import.meta.url)),
             )}"`,
           replacer: opts => `createServerReference('${opts.functionId}')`,
         },
@@ -185,7 +197,7 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
           envName: VITE_ENVIRONMENTS.server,
           getRuntimeCode: () =>
             `import { createServerReference } from '${normalizePath(
-              fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url))
+              fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url)),
             )}'`,
           replacer: opts => `createServerReference(${opts.fn}, '${opts.functionId}')`,
         },
@@ -194,7 +206,7 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
         envName: VITE_ENVIRONMENTS.server,
         getRuntimeCode: () =>
           `import { createServerReference } from '${normalizePath(
-            fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url))
+            fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url)),
           )}'`,
         replacer: opts => `createServerReference(${opts.fn}, '${opts.functionId}')`,
       },