vike-ripple 0.4.8 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-ripple",
-  "version": "0.4.8",
+  "version": "0.5.0",
   "description": "Vike extension for Ripple TS — SSR, streaming, Layout, Head, SEO configs, hooks",
   "type": "module",
   "exports": {

package/src/integration/onRenderClient.js

@@ -22,6 +22,10 @@ const onRenderClient = async (pageContext) => {
 
   // ── Build same component tree as SSR ──
   // Apply Layouts (innermost first → outermost last)
+  // Children must be tsrx_element(() => Component({})) — NOT tsrx_element(Component).
+  // The normal form passes Component as the render function; Ripple's render_tsrx_element
+  // calls it with (anchor, block), which Component interprets as props, corrupting block tracking.
+  // The () => Component({}) wrapper gives Component the proper props object.
   const Layout = config.Layout ?? config.layout
   const Wrapper = config.Wrapper ?? config.wrapper
   let component = Page
@@ -30,14 +34,14 @@ const onRenderClient = async (pageContext) => {
     for (let i = 0; i < layouts.length; i++) {
       const L = layouts[i]
       const prev = component
-      component = (props) => L({ ...props, children: tsrx_element(prev) })
+      component = (props) => L({ ...props, children: tsrx_element(() => prev({})) })
     }
   }
   if (Wrapper) {
     const wrappers = Array.isArray(Wrapper) ? Wrapper : [Wrapper]
     for (const W of wrappers) {
       const prev = component
-      component = (props) => W({ ...props, children: tsrx_element(prev) })
+      component = (props) => W({ ...props, children: tsrx_element(() => prev({})) })
     }
   }
 
@@ -47,22 +51,8 @@ const onRenderClient = async (pageContext) => {
     dispose = null
   }
 
-  // ── Hydrate or mount ──
-  // Hydrate preserves SSR HTML; mount clears and re-renders.
-  // mount() is the stable fallback when hydration fails (e.g. during HMR reload).
-  const { mount, hydrate } = await import('ripple')
-
-  if (pageContext.isHydration && container.innerHTML !== '') {
-    try {
-      dispose = hydrate(component, { target: container, props: {} })
-      setHydrated()
-      return
-    } catch (err) {
-      console.warn('[vike-ripple] hydrate failed, falling back to mount:', err)
-    }
-  }
-
-  // mount() clears container internally (target.textContent = '')
+  // Always use mount() — hydrate() crashes Ripple's hmr wrapper (hydrate_node is null).
+  const { mount } = await import('ripple')
   dispose = mount(component, { target: container, props: {} })
   setHydrated()
 }