fix(ilha): fix interactivity with snapshot: true (#24)

* fix(ilha): fix interactivity with snapshot: true

* fix(pr): improvements

* chore(changelog): update

Author: yzuyr

.gitignore

@@ -32,3 +32,5 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 
 # Finder (MacOS) folder config
 .DS_Store
+
+templates/*/bun.lock

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## `ilha`
 
+### 0.3.1 - 2026-04-24
+
+- Fixes hydratable() snapshot interactivity regression.
+
 ### 0.3.0 - 2026-04-24
 
 - **Breaking:** Removes `.slot()` builder method and `slots` render context. Child islands are now interpolated directly inside `html\`\``` templates.
@@ -71,6 +75,10 @@ Initial release of **@ilha/form** — a tiny, typed form binding library for ilh
 
 ## `@ilha/router`
 
+### 0.2.3 - 2026-04-24
+
+- Updates Ilha dependency to 0.3.1
+
 ### 0.2.2 - 2026-04-24
 
 - Updates Ilha dependency to 0.3.0
@@ -112,6 +120,10 @@ Initial release of **@ilha/router** — a lightweight, isomorphic router for ilh
 
 ## `@ilha/store`
 
+### 0.1.4 - 2026-04-24
+
+- Updates Ilha dependency to 0.3.1
+
 ### 0.1.3 - 2026-04-24
 
 - Updates Ilha dependency to 0.3.0

apps/website/docs/index.tsx

@@ -76,9 +76,9 @@ const Libraries = ilha
         <div class="flex-1 p-2 overflow-x-auto bg-[#FBFBFB]" data-action="copy">
             <div class="tabs w-full">
             <nav role="tablist" aria-orientation="horizontal" class="w-full rounded-full">
-                <button type="button" role="tab" aria-selected="true" tabindex="0" data-library="router" class="rounded-full">@ilha/router</button>
-                <button type="button" role="tab" aria-selected="false" tabindex="0" data-library="store" class="rounded-full">@ilha/store</button>
-                <button type="button" role="tab" aria-selected="false" tabindex="0" data-library="form" class="rounded-full">@ilha/form</button>
+                <button type="button" role="tab" aria-selected="${state.library() === "router"}" tabindex="0" data-library="router" class="rounded-full">@ilha/router</button>
+                <button type="button" role="tab" aria-selected="${state.library() === "store"}" tabindex="0" data-library="store" class="rounded-full">@ilha/store</button>
+                <button type="button" role="tab" aria-selected="${state.library() === "form"}" tabindex="0" data-library="form" class="rounded-full">@ilha/form</button>
               </nav>
             </div>
           <div class="text-sm lg:text-[1rem]">

apps/website/package.json

@@ -12,13 +12,13 @@
     "@codesandbox/sandpack-react": "^2.20.0",
     "basecoat-css": "^0.3.11",
     "dedent": "^1.7.2",
-    "ilha": "^0.3.0",
+    "ilha": "workspace:*",
     "shiki": "^4.0.2"
   },
   "devDependencies": {
     "@fontsource-variable/geist": "^5.2.8",
     "@fontsource-variable/geist-mono": "^5.2.7",
-    "@ilha/router": "^0.2.2",
+    "@ilha/router": "workspace:*",
     "@rspress/core": "^2.0.9",
     "@rspress/plugin-llms": "^2.0.9",
     "@rspress/plugin-sitemap": "^2.0.9",

packages/ilha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ilha",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A tiny, framework-free island architecture library",
   "license": "MIT",
   "author": "Ryuz <ryuzer@proton.me>",

packages/ilha/src/index.test.ts

@@ -2261,6 +2261,31 @@ describe(".derived", () => {
       cleanup(el);
     });
 
+    it("client sync derived re-runs after hydration with snapshot", async () => {
+      let accessor!: (v?: number) => number | void;
+
+      const Island = ilha
+        .state("count", 2)
+        .derived("doubled", ({ state }) => state.count() * 2)
+        .render(({ state, derived }) => {
+          accessor = state.count as typeof accessor;
+          return `<p>${derived.doubled.value}</p>`;
+        });
+
+      const ssr = await Island.hydratable({}, { name: "snap", snapshot: true });
+      document.body.innerHTML = ssr;
+      const wrapper = document.querySelector("[data-ilha='snap']")!;
+
+      const unmount = Island.mount(wrapper);
+      expect(wrapper.querySelector("p")!.textContent).toBe("4");
+
+      accessor(10);
+      expect(wrapper.querySelector("p")!.textContent).toBe("20");
+
+      unmount();
+      document.body.innerHTML = "";
+    });
+
     it("client async derived re-runs when tracked state changes", async () => {
       let accessor!: (v?: string) => string | void;
       const calls: string[] = [];

packages/ilha/src/index.ts

@@ -534,16 +534,23 @@ function buildDerivedSignals<
     let skipFirst = derivedSnapshot != null && entry.key in derivedSnapshot;
 
     const stopEffect = effect(() => {
-      if (skipFirst) {
-        skipFirst = false;
-        return;
-      }
-
       ac.abort();
       ac = new AbortController();
       const currentAc = ac;
       const result = entry.fn({ state, input, signal: currentAc.signal });
 
+      if (skipFirst) {
+        skipFirst = false;
+        if (result instanceof Promise) {
+          result.catch(() => {
+            // Suppress unhandled rejection for the skipped initial run.
+            // The snapshot already provides the correct value; we only ran
+            // entry.fn to establish reactive subscriptions.
+          });
+        }
+        return;
+      }
+
       if (!(result instanceof Promise)) {
         const prevSub = setActiveSub(undefined);
         env({ loading: false, value: result as unknown, error: undefined });

packages/router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilha/router",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "A tiny SPA router for Ilha",
   "license": "MIT",
   "author": "Ryuz <ryuzer@proton.me>",
@@ -27,7 +27,7 @@
     "test": "bun test"
   },
   "dependencies": {
-    "ilha": "0.3.0",
+    "ilha": "0.3.1",
     "rou3": "0.8.1"
   },
   "devDependencies": {

packages/store/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilha/store",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Typed store.",
   "license": "MIT",
   "author": "Ryuz <ryuzer@proton.me>",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "alien-signals": "3.1.2",
-    "ilha": "0.3.0"
+    "ilha": "0.3.1"
   },
   "devDependencies": {
     "zod": "^4.3.6"