vike-ripple 0.4.2 → 0.4.4

package/package.json

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

package/src/integration/onRenderClient.js

@@ -4,7 +4,7 @@ import { hydrate } from 'ripple'
 import { setPageContext } from '../hooks/usePageContext.js'
 import { setHydrated } from '../hooks/useHydrated.js'
 
-let rendered = false
+let hydrated = false
 
 const onRenderClient = async (pageContext) => {
   const { Page } = pageContext
@@ -14,20 +14,24 @@ const onRenderClient = async (pageContext) => {
   const container = document.getElementById('root')
   if (!container) return
 
-  if (pageContext.isHydration && container.innerHTML !== '') {
+  // Hydration — only on the very first page load (SSR)
+  if (pageContext.isHydration && container.innerHTML !== '' && !hydrated) {
     try {
       hydrate(Page, { target: container, props: {} })
-      rendered = true
+      hydrated = true
       setHydrated()
+      return
     } catch (err) {
       console.warn('[vike-ripple] hydrate failed, falling back to mount:', err)
     }
   }
 
-  if (!rendered) {
-    const { mount } = await import('ripple')
-    mount(Page, { target: container, props: {} })
-    rendered = true
-    setHydrated()
-  }
+  // Mount — initial load (if hydrate failed) AND HMR / client navigation
+  const { mount } = await import('ripple')
+  // Clear container before mount to prevent duplicate content
+  // (during HMR the old content is still in the DOM)
+  if (!pageContext.isHydration) container.innerHTML = ''
+  mount(Page, { target: container, props: {} })
+  hydrated = true
+  setHydrated()
 }

package/src/integration/onRenderHtml.js

@@ -1,6 +1,7 @@
 export { onRenderHtml }
 
 import { render, create_ssr_stream } from 'ripple/server'
+import { tsrx_element } from 'ripple/internal/server'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 import { setPageContext } from '../hooks/usePageContext.js'
 import { getHeadSetting } from './getHeadSetting.js'
@@ -28,14 +29,14 @@ const onRenderHtml = async (pageContext) => {
     for (let i = layouts.length - 1; i >= 0; i--) {
       const L = layouts[i]
       const prev = wrappedPage
-      wrappedPage = (props) => L({ ...props, children: prev })
+      wrappedPage = (props) => L({ ...props, children: tsrx_element(prev) })
     }
   }
   if (Wrapper) {
     const wrappers = Array.isArray(Wrapper) ? Wrapper : [Wrapper]
     for (const W of wrappers) {
       const prev = wrappedPage
-      wrappedPage = (props) => W({ ...props, children: prev })
+      wrappedPage = (props) => W({ ...props, children: tsrx_element(prev) })
     }
   }