fix: resolve RPC component from hydration boundary

bun.lock

@@ -268,7 +268,7 @@
     },
     "packages/cli": {
       "name": "@wrnexus/cli",
-      "version": "0.8.19",
+      "version": "0.8.20",
       "bin": {
         "wrnexus": "src/index.ts",
       },
@@ -317,7 +317,7 @@
     },
     "packages/csr": {
       "name": "@wrnexus/csr",
-      "version": "0.8.16",
+      "version": "0.8.17",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },
@@ -332,7 +332,7 @@
     },
     "packages/dev-server": {
       "name": "@wrnexus/dev-server",
-      "version": "0.8.18",
+      "version": "0.8.19",
       "dependencies": {
         "@wrnexus/authz": "workspace:*",
         "@wrnexus/cache": "workspace:*",

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.8.19",
+  "version": "0.8.20",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/csr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.8.16",
+  "version": "0.8.17",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/csr/src/reactive-runtime.ts

@@ -1062,7 +1062,12 @@ export const REACTIVE_RUNTIME = String.raw`
         };
       },
     });
-    var componentRpcName = componentEventTarget.getAttribute("data-wrn-component") || componentEventTarget.getAttribute("data-wrn-hydration") || "component";
+    var componentHydrationTarget = componentEventTarget.closest("[data-wrn-hydration]");
+    var componentRpcIdentity = componentEventTarget.getAttribute("data-wrn-component") ||
+      (componentHydrationTarget && componentHydrationTarget.getAttribute("data-wrn-hydration")) ||
+      el.getAttribute("data-wrn-hydration") ||
+      "component";
+    var componentRpcName = String(componentRpcIdentity).split(":", 1)[0] || "component";
     var serverProxy = new Proxy({}, {
       get: function (_target, property) {
         return function () {

packages/csr/test/reactive.test.ts

@@ -828,6 +828,29 @@ test("component server calls send the CSRF cookie in the RPC header", async () =
   expect(new Headers(request?.headers).get("x-csrf-token")).toBe("rpc token");
 });
 
+test("component server calls use the nearest hydration component identity", async () => {
+  const win = mount(
+    `<div data-scope="" data-wrn-hydration="CButton:abc123">` +
+      `<div data-wrn-events="click"><button data-on-click="server.handleClick()">go</button></div>` +
+      `</div>`,
+  );
+  let payload: { component?: string } | undefined;
+  const globals = globalThis as Record<string, unknown>;
+  const originalFetch = globals.fetch;
+  globals.fetch = async (_input: RequestInfo | URL, init?: RequestInit) => {
+    payload = JSON.parse(String(init?.body));
+    return Response.json({ ok: true });
+  };
+  try {
+    (win.document.querySelector("button") as unknown as HTMLElement).click();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  } finally {
+    globals.fetch = originalFetch;
+  }
+
+  expect(payload?.component).toBe("CButton");
+});
+
 test("component server calls prefer the rendered CSRF token over stale cookies", async () => {
   const win = mount(
     `<meta name="wrnexus-csrf" content="current-token">` +

packages/dev-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.8.18",
+  "version": "0.8.19",
   "type": "module",
   "main": "src/index.ts",
   "exports": {