feat(1.0): seroval json (#2043)

Co-authored-by: Atila Fassina <atila@fassina.eu>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

.changeset/icy-rings-exist.md

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

apps/fixtures/serialization-modes/README.md

@@ -0,0 +1,19 @@
+# Serialization checks
+
+This fixture is designed to point out the differences between Seroval 2 modes.
+
+```ts
+export default defineConfig({
+  middleware: "./src/middleware.ts",
+  serialization: {
+    mode: "js" // "json"
+  }
+});
+```
+
+On JS mode, seroval will use a custom serializer, while this improves performance and reduces payload size, it runs an `eval()` on client-side,
+so a strict CSP will block deserialization. On JSON mode, the payload will be slightly larger, but deserialization happens via `JSON.parse` and thus CSP will not block it.
+
+> [!IMPORTANT]
+> For backwards compatibility, `v1` has "js" as the default.
+> On `v2`, "json" is the new default.

apps/fixtures/serialization-modes/app.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "@solidjs/start/config";
+
+export default defineConfig({
+  middleware: "./src/middleware.ts",
+  serialization: {
+    mode: "js"
+  }
+});

apps/fixtures/serialization-modes/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "fixture-serialization-modes",
+  "type": "module",
+  "scripts": {
+    "dev": "vinxi dev",
+    "build": "vinxi build",
+    "start": "vinxi start",
+    "version": "vinxi version"
+  },
+  "dependencies": {
+    "@solidjs/meta": "^0.29.4",
+    "@solidjs/router": "^0.15.0",
+    "@solidjs/start": "workspace:*",
+    "shieldwall": "^0.4.0",
+    "solid-js": "^1.9.5",
+    "vinxi": "^0.5.7"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}

apps/fixtures/serialization-modes/public/favicon.ico

@@ -0,0 +1,39 @@
+body {
+  font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+a {
+  margin-right: 1rem;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h1 {
+  color: #335d92;
+  text-transform: uppercase;
+  font-size: 4rem;
+  font-weight: 100;
+  line-height: 1.1;
+  margin: 4rem auto;
+  max-width: 14rem;
+}
+
+p {
+  max-width: 14rem;
+  margin: 2rem auto;
+  line-height: 1.35;
+}
+
+@media (min-width: 480px) {
+  h1 {
+    max-width: none;
+  }
+
+  p {
+    max-width: none;
+  }
+}

apps/fixtures/serialization-modes/src/app.css

@@ -0,0 +1,22 @@
+import { MetaProvider, Title } from "@solidjs/meta";
+import { Router } from "@solidjs/router";
+import { FileRoutes } from "@solidjs/start/router";
+import { Suspense } from "solid-js";
+import "./app.css";
+
+export default function App() {
+  return (
+    <Router
+      root={props => (
+        <MetaProvider>
+          <Title>SolidStart - Basic</Title>
+          <a href="/">Index</a>
+          <a href="/about">About</a>
+          <Suspense>{props.children}</Suspense>
+        </MetaProvider>
+      )}
+    >
+      <FileRoutes />
+    </Router>
+  );
+}

apps/fixtures/serialization-modes/src/app.tsx

@@ -0,0 +1,21 @@
+.increment {
+  font-family: inherit;
+  font-size: inherit;
+  padding: 1em 2em;
+  color: #335d92;
+  background-color: rgba(68, 107, 158, 0.1);
+  border-radius: 2em;
+  border: 2px solid rgba(68, 107, 158, 0);
+  outline: none;
+  width: 200px;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+
+.increment:focus {
+  border: 2px solid #335d92;
+}
+
+.increment:active {
+  background-color: rgba(68, 107, 158, 0.2);
+}

apps/fixtures/serialization-modes/src/components/Counter.css

@@ -0,0 +1,11 @@
+import { createSignal } from "solid-js";
+import "./Counter.css";
+
+export default function Counter() {
+  const [count, setCount] = createSignal(0);
+  return (
+    <button class="increment" onClick={() => setCount(count() + 1)} type="button">
+      Clicks: {count()}
+    </button>
+  );
+}

apps/fixtures/serialization-modes/src/components/Counter.tsx

@@ -0,0 +1,4 @@
+// @refresh reload
+import { mount, StartClient } from "@solidjs/start/client";
+
+mount(() => <StartClient />, document.getElementById("app")!);