fix(dev-server): preserve serialized object component props

packages/dev-server/test/structured-component-props.test.ts

@@ -0,0 +1,47 @@
+import { expect, test } from "bun:test";
+import { createProductionHandlers } from "../src/prod.ts";
+
+test("component resolution preserves JSON user/permission props and drops unresolved bindings", async () => {
+  let received: Record<string, string> = {};
+  const handlers = createProductionHandlers(
+    {
+      pages: [
+        {
+          raw: "/",
+          mod: {
+            default: () =>
+              '<div data-component="account-shell" identity="{&quot;displayName&quot;:&quot;Alice&quot;}" permissions="{&quot;read&quot;:true,&quot;update&quot;:false}" preferences="{&quot;theme&quot;:&quot;dark&quot;}" pending="{account.pending}"><p>Account content</p></div>',
+          },
+        },
+      ],
+      api: [],
+      realtime: [],
+      middleware: [],
+      layouts: [],
+      components: [
+        {
+          name: "AccountShell",
+          mod: {
+            render: (props: Record<string, string>) => {
+              received = props;
+              const identity = JSON.parse(props.identity ?? "{}");
+              const permissions = JSON.parse(props.permissions ?? "{}");
+              return permissions.read
+                ? "<main>" + identity.displayName + "<slot /></main>"
+                : "<main>Denied</main>";
+            },
+          },
+        },
+      ],
+    },
+    {},
+  );
+  const response = await handlers.fetch(new Request("http://localhost/"), { upgrade: () => false });
+  expect(response?.status).toBe(200);
+  const html = await response!.text();
+  expect(html).toContain("Alice");
+  expect(html).toContain("Account content");
+  expect(JSON.parse(received.permissions!)).toEqual({ read: true, update: false });
+  expect(JSON.parse(received.preferences!)).toEqual({ theme: "dark" });
+  expect(received.pending).toBeUndefined();
+});