fix: falsy f-* attributes not preserved inside island (#2498)

Fixes #2359

src/runtime/client/mod.tsx

@@ -1,4 +1,5 @@
 import "./polyfills.ts";
+import "./preact_hooks_client.ts";
 import "./partials.ts";
 export { asset, IS_BROWSER, Partial, type PartialProps } from "../shared.ts";
 export { boot, revive } from "./reviver.ts";

src/runtime/client/preact_hooks_client.ts

@@ -1,9 +1,19 @@
 import { options } from "preact";
-import { assetHashingHook } from "../shared_internal.tsx";
+import { assetHashingHook, CLIENT_NAV_ATTR } from "../shared_internal.tsx";
 import { BUILD_ID } from "../build_id.ts";
 
 const oldVNodeHook = options.vnode;
 options.vnode = (vnode) => {
   assetHashingHook(vnode, BUILD_ID);
+
+  if (typeof vnode.type === "string") {
+    if (CLIENT_NAV_ATTR in vnode.props) {
+      const value = vnode.props[CLIENT_NAV_ATTR];
+      if (typeof value === "boolean") {
+        vnode.props[CLIENT_NAV_ATTR] = String(value);
+      }
+    }
+  }
+
   oldVNodeHook?.(vnode);
 };

tests/fixtures_islands/FreshAttrs.tsx

@@ -0,0 +1,23 @@
+import { useSignal } from "@preact/signals";
+import { useEffect } from "preact/hooks";
+
+export interface FreshAttrs {
+  id?: string;
+}
+
+export function FreshAttrs(props: FreshAttrs) {
+  const active = useSignal(false);
+  useEffect(() => {
+    active.value = true;
+  }, []);
+
+  return (
+    <div id={props.id} class={active.value ? "ready" : ""}>
+      <h1>Fresh attrs</h1>
+      <div class="f-client-nav-true" f-client-nav={true}>f-client-nav=true</div>
+      <div class="f-client-nav-false" f-client-nav={false}>
+        f-client-nav=false
+      </div>
+    </div>
+  );
+}

tests/islands_test.tsx

@@ -29,6 +29,7 @@ import * as path from "@std/path";
 import { setBuildCache } from "../src/app.ts";
 import { getBuildCache } from "../src/app.ts";
 import type { FreshConfig } from "../src/config.ts";
+import { FreshAttrs } from "./fixtures_islands/FreshAttrs.tsx";
 
 await buildProd(allIslandApp);
 
@@ -601,6 +602,36 @@ Deno.test({
   },
 });
 
+Deno.test({
+  name: "islands - preserve f-* attributes",
+  fn: async () => {
+    const freshAttrs = getIsland("FreshAttrs.tsx");
+
+    const app = testApp()
+      .use(staticFiles())
+      .island(freshAttrs, "FreshAttrs", FreshAttrs)
+      .get("/", (ctx) =>
+        ctx.render(
+          <Doc>
+            <FreshAttrs />
+          </Doc>,
+        ));
+
+    await withBrowserApp(app, async (page, address) => {
+      await page.goto(address, { waitUntil: "load" });
+      await page.locator(".ready").wait();
+
+      const truthy = await page.locator<HTMLDivElement>(".f-client-nav-true")
+        .evaluate((el) => el.getAttribute("f-client-nav"));
+      const falsy = await page.locator<HTMLDivElement>(".f-client-nav-false")
+        .evaluate((el) => el.getAttribute("f-client-nav"));
+
+      expect(truthy).toEqual("true");
+      expect(falsy).toEqual("false");
+    });
+  },
+});
+
 Deno.test({
   name: "fsRoutes - load islands from group folder",
   fn: async () => {

tests/test_utils.tsx

@@ -25,6 +25,7 @@ import { SelfCounter } from "./fixtures_islands/SelfCounter.tsx";
 import { Multiple1, Multiple2 } from "./fixtures_islands/Multiple.tsx";
 import { Foo } from "./fixture_island_groups/routes/foo/(_islands)/Foo.tsx";
 import { NodeProcess } from "./fixtures_islands/NodeProcess.tsx";
+import { FreshAttrs } from "./fixtures_islands/FreshAttrs.tsx";
 
 export function getIsland(pathname: string) {
   return path.join(
@@ -378,6 +379,7 @@ export const allIslandApp = new App()
   .island(getIsland("PassThrough.tsx"), "PassThrough", PassThrough)
   .island(getIsland("SelfCounter.tsx"), "SelfCounter", SelfCounter)
   .island(getIsland("NodeProcess.tsx"), "NodeProcess", NodeProcess)
+  .island(getIsland("FreshAttrs.tsx"), "FreshAttrs", FreshAttrs)
   .island(
     getIsland("../fixture_island_groups/routes/foo/(_islands)/Foo.tsx"),
     "Foo",