@ripple-ts/vite-plugin 0.3.81 → 0.3.82

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @ripple-ts/vite-plugin
 
+## 0.3.82
+
+### Patch Changes
+
+- [`67f3794`](https://github.com/Ripple-TS/ripple/commit/67f3794d2f1ffd55dd23a47327d925d9a76a4171)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Compose `RenderRoute` layouts
+  during client hydration. The generated client entry hydrated the bare page
+  component, so a route's `layout` only existed in the server-rendered HTML: the
+  layout component never ran in the browser, its CSS was missing from the client
+  graph, and once the SSR style block was removed after hydration the layout's
+  styles disappeared (visible as a flash of unstyled content). The client entry
+  now loads the layout module and wraps the page the same way the server does, and
+  layout entries are included in the client build's static route imports so their
+  CSS is bundled.
+- Updated dependencies []:
+  - @tsrx/ripple@0.1.30
+  - @ripple-ts/adapter@0.3.82
+
 ## 0.3.81
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Vite plugin for Ripple",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.81",
+  "version": "0.3.82",
   "type": "module",
   "module": "src/index.js",
   "main": "src/index.js",
@@ -32,14 +32,14 @@
     "url": "https://github.com/Ripple-TS/ripple/issues"
   },
   "dependencies": {
-    "@ripple-ts/adapter": "0.3.81",
-    "@tsrx/ripple": "0.1.29"
+    "@tsrx/ripple": "0.1.30",
+    "@ripple-ts/adapter": "0.3.82"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",
     "type-fest": "^5.6.0",
     "vite": "^8.0.12",
-    "ripple": "0.3.81"
+    "ripple": "0.3.82"
   },
   "publishConfig": {
     "access": "public"

package/src/index.js

@@ -529,8 +529,7 @@ export function ripple(inlineOptions = {}) {
 
 				renderRouteEntries = loadedRippleConfig.router.routes
 					.filter((/** @type {Route} */ r) => r.type === 'render')
-					.map((/** @type {RenderRoute} */ r) => r.entry)
-					.map(get_route_entry_path)
+					.flatMap((/** @type {RenderRoute} */ r) => [get_route_entry_path(r.entry), r.layout])
 					.filter((entry) => typeof entry === 'string');
 
 				// Deduplicate entries (multiple routes can share the same component)

package/src/project-codegen.js

@@ -106,33 +106,44 @@ async function resolveRouteComponent(data) {
   if (!entryPath) return null;
 
   const loadModule = routeModules[entryPath] ?? (() => import(/* @vite-ignore */ entryPath));
-  return getComponentExport(await loadModule(), exportName);
+  const Component = getComponentExport(await loadModule(), exportName);
+  if (!Component) return null;
+
+  // Load the route layout so hydration sees the same component tree as the
+  // server render and the layout's CSS is part of the client graph.
+  const layoutPath = typeof route?.layout === 'string' ? route.layout : undefined;
+  if (layoutPath) {
+    const loadLayout = routeModules[layoutPath] ?? (() => import(/* @vite-ignore */ layoutPath));
+    const Layout = getComponentExport(await loadLayout());
+    if (Layout) return { Component, Layout };
+  }
+
+  return { Component };
 }
 
 (async () => {
   try {
     const data = JSON.parse(document.getElementById('__ripple_data').textContent);
     const target = document.getElementById('root');
-    const Component = await resolveRouteComponent(data);
+    const resolved = await resolveRouteComponent(data);
 
-    if (!Component || !target) {
+    if (!resolved || !target) {
       console.error('[ripple] Unable to hydrate route: missing component export or #root target.');
       return;
     }
 
+    // With a layout, hydrate the layout and pass the page as its children
+    // prop — the same tree the server rendered.
+    const { Component, Layout } = resolved;
+    const pageProps = { params: data.params };
+    const root = Layout ?? Component;
+    const props = Layout ? { ...pageProps, children: () => Component(pageProps) } : pageProps;
+
     try {
-      hydrate(Component, {
-        target,
-        props: { params: data.params },
-        rootBoundary,
-      });
+      hydrate(root, { target, props, rootBoundary });
     } catch (error) {
       console.warn('[ripple] Hydration failed, falling back to mount.', error);
-      mount(Component, {
-        target,
-        props: { params: data.params },
-        rootBoundary,
-      });
+      mount(root, { target, props, rootBoundary });
     }
   } catch (error) {
     console.error('[ripple] Failed to bootstrap client hydration.', error);

package/tests/project-codegen.test.js

@@ -17,7 +17,7 @@ describe('project codegen', () => {
 		expect(source).toContain('function getRouteEntryExportName(entry)');
 		expect(source).toContain('return Array.isArray(entry) ? entry[0] : undefined;');
 		expect(source).toContain('const rootBoundary = rippleConfig.rootBoundary;');
-		expect(source).toContain('rootBoundary,');
+		expect(source).toContain('hydrate(root, { target, props, rootBoundary });');
 	});
 
 	it('generates server components from named entry tuples', () => {