fix: defer reactive props in branch pre-rendering

packages/dev-server/test/component-composition-runtime.test.ts

@@ -90,6 +90,58 @@ test("a component in an initially hidden client branch is server-prepared for in
   expect(branches[0].body).not.toContain("data-component=");
 });
 
+test("typed components in client branches use defaults until reactive props are available", async () => {
+  const root = mkdtempSync(join(tmpdir(), "wrnexus-component-reactive-branch-"));
+  roots.push(root);
+  const app = join(root, "app");
+  mkdirSync(join(app, "pages"), { recursive: true });
+  mkdirSync(join(app, "components"), { recursive: true });
+  writeFileSync(join(app, "pages/index.ts"), "export default () => '';\n");
+  writeFileSync(join(app, "components/Panel.wrn"), "component Panel { view { <section /> } }\n");
+  const marker = "[&quot;items&quot;,&quot;{items}&quot;]";
+  const definition = Buffer.from(
+    JSON.stringify([
+      {
+        cond: "open",
+        body: `<div data-component="Panel" items="{items}" visible="{true}" data-wrn-prop-bind-0="${marker}"></div>`,
+      },
+    ]),
+    "utf8",
+  ).toString("base64");
+  let observed: Record<string, string> | undefined;
+
+  const handlers = createHandlers({
+    mode: "development",
+    hmr: false,
+    router: buildRouter(app),
+    loadModule: async (file) =>
+      basename(file) === "Panel.wrn"
+        ? {
+            render: (props: Record<string, string>) => {
+              observed = props;
+              return '<section data-scope="items: [], visible: false" data-wrn-scope="e30="></section>';
+            },
+          }
+        : {
+            default: () =>
+              `<template data-wrn-if="${definition}"></template><template data-wrn-control-end></template>`,
+          },
+    getMiddleware: async () => [],
+    assets: { serve: async () => null },
+  } satisfies RuntimeDeps);
+
+  const response = await handlers.fetch(new Request("https://example.test/"), {
+    upgrade: () => false,
+  });
+  const html = await response!.text();
+  expect(observed).toEqual({});
+  const encoded = /data-wrn-if="([A-Za-z0-9+/=]+)"/.exec(html)?.[1];
+  const branches = JSON.parse(Buffer.from(encoded!, "base64").toString("utf8"));
+  expect(branches[0].body).toContain("<section");
+  expect(branches[0].body).toContain("data-wrn-prop-bind-0");
+  expect(branches[0].body).not.toContain("data-component=");
+});
+
 test("SSR carries a parent prop binding onto the rendered child scope", async () => {
   const root = mkdtempSync(join(tmpdir(), "wrnexus-component-prop-"));
   roots.push(root);