vike-ripple 0.4.6 → 0.4.8

package/package.json

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

package/src/integration/onRenderClient.js

@@ -3,31 +3,66 @@ export { onRenderClient }
 import { setPageContext } from '../hooks/usePageContext.js'
 import { setHydrated } from '../hooks/useHydrated.js'
 
+// tsrx_element — wraps a component fn as a Ripple TSRX element (matches ripple/internal)
+const tsrx_element = (fn) => ({
+  render: fn,
+  [Symbol.for('ripple.element')]: true
+})
+
+/** @type {(() => void) | null} */
+let dispose = null
+
 const onRenderClient = async (pageContext) => {
-  console.log('[vike-ripple] onRenderClient called', {
-    isHydration: pageContext.isHydration,
-    isFirstRender: 'isFirstRender' in pageContext,
-    hasPage: !!pageContext.Page,
-    url: pageContext.urlOriginal,
-    location: window.location.href,
-  })
-
-  const { Page } = pageContext
+  const { Page, config } = pageContext
   if (!Page) return
 
   setPageContext(pageContext)
   const container = document.getElementById('root')
-  if (!container) {
-    console.warn('[vike-ripple] no #root container')
-    return
+  if (!container) return
+
+  // ── Build same component tree as SSR ──
+  // Apply Layouts (innermost first → outermost last)
+  const Layout = config.Layout ?? config.layout
+  const Wrapper = config.Wrapper ?? config.wrapper
+  let component = Page
+  if (Layout) {
+    const layouts = Array.isArray(Layout) ? Layout : [Layout]
+    for (let i = 0; i < layouts.length; i++) {
+      const L = layouts[i]
+      const prev = component
+      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) })
+    }
   }
 
-  console.log('[vike-ripple] container child count before:', container.childElementCount)
+  // ── Clean up previous root ──
+  if (dispose) {
+    dispose()
+    dispose = null
+  }
 
-  // Just mount — mount() clears container (target.textContent = '') and renders
-  const { mount } = await import('ripple')
-  mount(Page, { target: container, props: {} })
-  setHydrated()
+  // ── 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)
+    }
+  }
 
-  console.log('[vike-ripple] container child count after:', container.childElementCount)
+  // mount() clears container internally (target.textContent = '')
+  dispose = mount(component, { target: container, props: {} })
+  setHydrated()
 }

package/src/integration/onRenderHtml.js

@@ -26,7 +26,7 @@ const onRenderHtml = async (pageContext) => {
   const Wrapper = pageContext.config.Wrapper
   if (Layout) {
     const layouts = Array.isArray(Layout) ? Layout : [Layout]
-    for (let i = layouts.length - 1; i >= 0; i--) {
+    for (let i = 0; i < layouts.length; i++) {
       const L = layouts[i]
       const prev = wrappedPage
       wrappedPage = (props) => L({ ...props, children: tsrx_element(prev) })