@elurjs/kit 2.4.6 → 2.4.8

package/CHANGELOG.md

@@ -1,10 +1,34 @@
 # Changelog
 
-All notable changes to Nix.js Kit are documented in this file.
+All notable changes to Elur Kit are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.4.8]
+
+### Changed
+
+- **Hydrator split into a separate chunk** — the auto-generated
+  `entry-client.ts` now dynamically imports `hydrateIslands` instead of
+  statically importing it. Vite emits the hydrator as its own chunk, so
+  the initial `entry-client.js` bundle contains only the SPA router
+  (~18 KB → ~9 KB gzipped). The hydrator loads on idle via
+  `requestIdleCallback`, after the first paint.
+
+## [2.4.7]
+
+### Changed
+
+- **Client entry now defers hydration with `requestIdleCallback`** — the
+  auto-generated `entry-client.ts` wraps `hydrateIslands(registry)` in
+  `requestIdleCallback(hydrate, { timeout: 2000 })` (with a `setTimeout`
+  fallback) so the browser can paint the server-rendered HTML before
+  hydrating islands. This reduces LCP element render delay on mobile
+  devices where the main thread was blocked by synchronous hydration.
+  Islands with directive `"load"` already have SSR-rendered DOM, so
+  users see content immediately — hydration only adds interactivity.
+
 ## [2.4.6]
 
 ### Fixed

package/dist/lib/cli.cjs

@@ -211,11 +211,23 @@ function buildEntrySource(islands, outFile, hydrateImport = "@elurjs/kit/island"
 	const islandHydration = registryLines ? `const registry = {
 ${registryLines}
 };
-hydrateIslands(registry);
-document.addEventListener("elur:rendered", () => {
+// Dynamically import the hydrator so Vite splits it into a separate chunk.
+// This keeps the initial entry-client bundle small (router only) — the
+// hydrator loads on idle, after the first paint.
+const hydrate = async () => {
+  const { hydrateIslands, cleanupHydratedIslands } = await import(${JSON.stringify(hydrateImport)});
   cleanupHydratedIslands();
   hydrateIslands(registry);
-});
+  document.addEventListener("elur:rendered", () => {
+    cleanupHydratedIslands();
+    hydrateIslands(registry);
+  });
+};
+if ("requestIdleCallback" in window) {
+  requestIdleCallback(hydrate, { timeout: 2000 });
+} else {
+  setTimeout(hydrate, 0);
+}
 
 // Vite HMR: when an island module (or the entry itself) updates, dispose the
 // current islands and re-hydrate from the updated modules — the registry's
@@ -223,8 +235,7 @@ document.addEventListener("elur:rendered", () => {
 // needed (progressive enhancement, audit §10.2 / §12.2).
 if (import.meta.hot) {
   import.meta.hot.accept((newModule) => {
-    cleanupHydratedIslands();
-    hydrateIslands(registry);
+    hydrate();
     if (newModule) {
       // Re-run the module so its side effects (router, listeners) apply.
     }
@@ -232,7 +243,6 @@ if (import.meta.hot) {
 }` : "";
 	return `// AUTO-GENERATED by @elurjs/kit. Do not edit.
 import { startClientRouter } from ${JSON.stringify(routerImport)};
-import { hydrateIslands, cleanupHydratedIslands } from ${JSON.stringify(hydrateImport)};
 
 startClientRouter();
 ${islandHydration}