vike-ripple 0.3.0 → 0.4.1

package/package.json

@@ -1,20 +1,31 @@
 {
   "name": "vike-ripple",
-  "version": "0.3.0",
-  "description": "Vike extension for Ripple TS — full parity with vike-react/vike-solid/vike-vue",
+  "version": "0.4.1",
+  "description": "Vike extension for Ripple TS — SSR, streaming, Layout, Head, SEO configs, hooks",
   "type": "module",
-  "types": "./src/types/Config.ts",
   "exports": {
     ".": "./src/index.js",
-    "./config": "./src/+config.js",
+    "./config": "./src/config.js",
     "./setup": "./src/setup.js",
-    "./Head": "./src/components/Head/Head-server.js",
-    "./ClientOnly": "./src/components/ClientOnly.js",
     "./usePageContext": "./src/hooks/usePageContext.js",
     "./useData": "./src/hooks/useData.js",
-    "./useConfig": "./src/hooks/useConfig.js",
-    "./src/integration/onRenderHtml.js": "./src/integration/onRenderHtml.js",
-    "./src/integration/onRenderClient.js": "./src/integration/onRenderClient.js"
+    "./useHydrated": "./src/hooks/useHydrated.js",
+    "./useConfig": {
+      "browser": "./src/hooks/useConfig/useConfig-client.js",
+      "default": "./src/hooks/useConfig/useConfig-server.js"
+    },
+    "./Config": {
+      "browser": "./src/components/Config/Config-client.js",
+      "default": "./src/components/Config/Config-server.js"
+    },
+    "./Head": {
+      "browser": "./src/components/Head/Head-client.js",
+      "default": "./src/components/Head/Head-server.js"
+    },
+    "./clientOnly": "./src/helpers/clientOnly.js",
+    "./ClientOnly": "./src/components/ClientOnly.js",
+    "./__internal/integration/onRenderHtml": "./src/integration/onRenderHtml.js",
+    "./__internal/integration/onRenderClient": "./src/integration/onRenderClient.js"
   },
   "bin": {
     "vike-ripple": "./src/setup.js"

package/src/components/ClientOnly.js

@@ -1,5 +1,7 @@
 export { ClientOnly }
 
-function ClientOnly({ children }) {
-  return children
+import { useHydrated } from '../hooks/useHydrated.js'
+
+function ClientOnly({ children, fallback }) {
+  return useHydrated() ? children : (fallback ?? null)
 }

package/src/components/Config/Config-client.js

@@ -1,3 +1,8 @@
-export function Config() {
+export { Config }
+
+import { useConfig } from '../../hooks/useConfig/useConfig-client.js'
+
+function Config(props) {
+  useConfig()(props)
   return null
 }

package/src/components/Config/Config-server.js

@@ -1,6 +1,8 @@
-import { useConfig } from '../hooks/useConfig.js'
+export { Config }
 
-export function Config(values) {
-  useConfig()(values)
+import { useConfig } from '../../hooks/useConfig/useConfig-server.js'
+
+function Config(props) {
+  useConfig()(props)
   return null
 }

package/src/components/Head/Head-client.js

@@ -1,3 +1 @@
-export function Head() {
-  return null
-}
+export function Head() { return null }

package/src/components/Head/Head-server.js

@@ -1,7 +1,8 @@
-import { useConfig } from '../hooks/useConfig.js'
+export { Head }
 
-export function Head({ children }) {
-  const config = useConfig()
-  config({ Head: children })
+import { useConfig } from '../../hooks/useConfig/useConfig-server.js'
+
+function Head({ children }) {
+  useConfig()({ Head: children })
   return null
 }

package/src/{+config.js → config.js}

@@ -1,12 +1,21 @@
-import { ssrEffect } from './integration/ssrEffect.js'
+// ssrEffect inlined to avoid import resolution issues during config loading
+function ssrEffect({ configDefinedAt, configValue }) {
+  if (typeof configValue !== 'boolean') throw new Error(`${configDefinedAt} should be a boolean`)
+  return {
+    meta: {
+      Page: { env: { client: true, server: configValue !== false } },
+      Layout: { env: { client: true, server: configValue !== false } },
+      Wrapper: { env: { client: true, server: configValue !== false } },
+    },
+  }
+}
 
-/** @type {import('vike/types').Config} */
 const config = {
   name: 'vike-ripple',
   require: { vike: '>=0.4.250' },
 
-  onRenderHtml: 'import:vike-ripple/src/integration/onRenderHtml.js:onRenderHtml',
-  onRenderClient: 'import:vike-ripple/src/integration/onRenderClient.js:onRenderClient',
+  onRenderHtml: 'import:vike-ripple/__internal/integration/onRenderHtml:onRenderHtml',
+  onRenderClient: 'import:vike-ripple/__internal/integration/onRenderClient:onRenderClient',
 
   clientRouting: true,
   hydrationCanBeAborted: true,
@@ -16,6 +25,7 @@ const config = {
   meta: {
     Head: { env: { server: true }, cumulative: true },
     Layout: { env: { server: true, client: true }, cumulative: true },
+    Wrapper: { env: { server: true, client: true }, cumulative: true },
     title: { env: { server: true, client: true } },
     description: { env: { server: true } },
     image: { env: { server: true } },
@@ -26,8 +36,8 @@ const config = {
     stream: { env: { server: true }, cumulative: true },
     onBeforeRenderHtml: { env: { server: true }, cumulative: true },
     onAfterRenderHtml: { env: { server: true }, cumulative: true },
-    onBeforeRenderClient: { env: { server: false, client: true }, cumulative: true },
-    onAfterRenderClient: { env: { server: false, client: true }, cumulative: true },
+    onBeforeRenderClient: { env: { client: true }, cumulative: true },
+    onAfterRenderClient: { env: { client: true }, cumulative: true },
     bodyHtmlBegin: { env: { server: true }, cumulative: true, global: true },
     bodyHtmlEnd: { env: { server: true }, cumulative: true, global: true },
     headHtmlBegin: { env: { server: true }, cumulative: true, global: true },

package/src/helpers/clientOnly.js

@@ -0,0 +1,4 @@
+export function clientOnly() {
+  console.warn('[vike-ripple] clientOnly() is deprecated — use <ClientOnly>')
+  return (props) => props.fallback ?? null
+}

package/src/hooks/useConfig/configsCumulative.js

@@ -0,0 +1,7 @@
+export const configsCumulative = [
+  'Head', 'Layout', 'Wrapper',
+  'bodyHtmlBegin', 'bodyHtmlEnd', 'headHtmlBegin', 'headHtmlEnd',
+  'htmlAttributes', 'bodyAttributes',
+  'onBeforeRenderHtml', 'onAfterRenderHtml',
+  'onBeforeRenderClient', 'onAfterRenderClient',
+]

package/src/hooks/useConfig/useConfig-client.js

@@ -0,0 +1,25 @@
+export { useConfig }
+
+import { getPageContext } from 'vike/getPageContext'
+import { usePageContext } from '../usePageContext.js'
+
+function useConfig() {
+  let pageContext = getPageContext({ asyncHook: false })
+  if (pageContext) {
+    return (config) => {
+      pageContext._configViaHook ??= {}
+      Object.assign(pageContext._configViaHook, config)
+    }
+  }
+
+  pageContext = usePageContext()
+  return (config) => {
+    if (!('_headAlreadySet' in (pageContext || {}))) {
+      pageContext._configViaHook ??= {}
+      Object.assign(pageContext._configViaHook, config)
+    } else {
+      if (config.title) document.title = config.title
+      if (config.lang) document.documentElement.lang = config.lang
+    }
+  }
+}

package/src/hooks/useConfig/useConfig-server.js

@@ -0,0 +1,24 @@
+export { useConfig }
+
+import { getPageContext } from 'vike/getPageContext'
+import { usePageContext } from '../usePageContext.js'
+
+function useConfig() {
+  // Vike hook
+  let pageContext = getPageContext({ asyncHook: false })
+  if (pageContext) {
+    return (config) => {
+      pageContext._configViaHook ??= {}
+      Object.assign(pageContext._configViaHook, config)
+    }
+  }
+
+  // Component
+  pageContext = usePageContext()
+  return (config) => {
+    if (!pageContext?._headAlreadySet) {
+      pageContext._configViaHook ??= {}
+      Object.assign(pageContext._configViaHook, config)
+    }
+  }
+}

package/src/hooks/useData.js

@@ -1,6 +1,7 @@
+export { useData }
+
 import { usePageContext } from './usePageContext.js'
 
-export function useData() {
-  const pageContext = usePageContext()
-  return pageContext?.data
+function useData() {
+  return usePageContext()?.data
 }

package/src/hooks/useHydrated.js

@@ -0,0 +1,7 @@
+export { useHydrated }
+export { setHydrated }
+
+let _hydrated = false
+
+function useHydrated() { return _hydrated }
+function setHydrated() { _hydrated = true }

package/src/hooks/usePageContext.js

@@ -1,6 +1,12 @@
-export function usePageContext() {
-  const pageContext = typeof window !== 'undefined'
-    ? window.__vike_pageContext
-    : globalThis.__vike_pageContext
-  return pageContext
+export { usePageContext }
+export { setPageContext }
+
+let _pageContext = null
+
+function usePageContext() {
+  return _pageContext
+}
+
+function setPageContext(ctx) {
+  _pageContext = ctx
 }

package/src/index.js

@@ -1,27 +1,4 @@
-/**
- * vike-ripple — Vike extension for Ripple TS.
- *
- * ## Setup
- * 1. Import config in your renderer/+config.ts:
- *    import vikeRipple from 'vike-ripple/config'
- *
- * 2. Run setup (once):
- *    npx vike-ripple setup
- *
- * 3. Add optimizeDeps to vite.config.ts:
- *    optimizeDeps: { exclude: ['ripple'] }
- *
- * ## Usage
- * - +Head.tsrx — inject <head> content
- * - +Layout.tsrx — layout components
- * - +title.ts — per-page title
- * - +description.ts — per-page description
- * - +ssr.ts — per-page SSR toggle
- * - +stream.ts — per-page streaming toggle
- */
-export default function vikeRipple() {
-  return {
-    name: 'vike-ripple',
-    enforce: 'pre',
-  }
-}
+console.warn(
+  "[vike-ripple] Replace `import vikeRipple from 'vike-ripple'` with `import vikeRipple from 'vike-ripple/config'`",
+)
+export { default } from './config.js'

package/src/integration/getHeadSetting.js

@@ -1,7 +1,7 @@
 export { getHeadSetting }
 
 function getHeadSetting(key, pageContext) {
-  const value = pageContext.config[key]
-  if (value !== undefined && value !== null) return value
+  const v = pageContext.config[key]
+  if (v !== undefined && v !== null) return v
   return pageContext._configViaHook?.[key] ?? null
 }

package/src/integration/onRenderClient.js

@@ -1,62 +1,33 @@
-// https://vike.dev/onRenderClient
 export { onRenderClient }
 
 import { hydrate } from 'ripple'
-import { getHeadSetting } from './getHeadSetting.js'
-import { applyHeadSettings } from './applyHeadSettings.js'
-import { callCumulativeHooks } from '../utils/callCumulativeHooks.js'
+import { setPageContext } from '../hooks/usePageContext.js'
+import { setHydrated } from '../hooks/useHydrated.js'
 
 let rendered = false
 
 const onRenderClient = async (pageContext) => {
-  await callCumulativeHooks(pageContext.config.onBeforeRenderClient, pageContext)
+  const { Page } = pageContext
+  if (!Page) return
 
+  setPageContext(pageContext)
   const container = document.getElementById('root')
   if (!container) return
 
-  pageContext._headAlreadySet = pageContext.isHydration
-
   if (pageContext.isHydration && container.innerHTML !== '') {
     try {
-      hydratePage(pageContext, container)
+      hydrate(Page, { target: container, props: {} })
       rendered = true
+      setHydrated()
     } catch (err) {
       console.warn('[vike-ripple] hydrate failed, falling back to mount:', err)
     }
   }
 
   if (!rendered) {
-    mountPage(pageContext, container)
+    const { mount } = await import('ripple')
+    mount(Page, { target: container, props: {} })
     rendered = true
+    setHydrated()
   }
-
-  updateHead(pageContext)
-
-  await callCumulativeHooks(pageContext.config.onAfterRenderClient, pageContext)
-}
-
-function hydratePage(pageContext, container) {
-  hydrate(pageContext.Page, { target: container, props: {} })
-}
-
-async function mountPage(pageContext, container) {
-  const { mount } = await import('ripple')
-  mount(pageContext.Page, { target: container, props: {} })
-}
-
-function updateHead(pageContext) {
-  if (pageContext._headAlreadySet) return
-
-  const title = getHeadSetting('title', pageContext)
-  if (title && document.title !== title) {
-    document.title = title
-  }
-
-  const lang = getHeadSetting('lang', pageContext)
-  if (lang) {
-    document.documentElement.lang = lang
-  }
-
-  applyHeadSettings(pageContext.config.Head, document.head)
-  applyHeadSettings(pageContext._configViaHook?.Head, document.head)
 }

package/src/integration/onRenderHtml.js

@@ -2,27 +2,48 @@ export { onRenderHtml }
 
 import { render, create_ssr_stream } from 'ripple/server'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
-
-
+import { setPageContext } from '../hooks/usePageContext.js'
 import { getHeadSetting } from './getHeadSetting.js'
-import { callCumulativeHooks } from '../utils/callCumulativeHooks.js'
 import { getTagAttributesString } from '../utils/getTagAttributesString.js'
+import { callCumulativeHooks } from '../utils/callCumulativeHooks.js'
 
 const onRenderHtml = async (pageContext) => {
-  const pageContext2 = pageContext
-  const { Page } = pageContext2
+  const { Page } = pageContext
   if (!Page) throw new Error('No Page')
 
-  await callCumulativeHooks(pageContext2.config.onBeforeRenderHtml, pageContext2)
+  await callCumulativeHooks(pageContext.config.onBeforeRenderHtml, pageContext)
+
+  setPageContext(pageContext)
+
+  const headHtml = getHeadHtml(pageContext)
+  const { headHtmlBegin, headHtmlEnd, bodyHtmlBegin, bodyHtmlEnd } = getHtmlInjections(pageContext)
+  const { htmlAttributesString, bodyAttributesString } = getTagAttributes(pageContext)
+
+  // Wrap in Layout(s) + Wrapper(s)
+  let wrappedPage = Page
+  const Layout = pageContext.config.Layout
+  const Wrapper = pageContext.config.Wrapper
+  if (Layout) {
+    const layouts = Array.isArray(Layout) ? Layout : [Layout]
+    for (let i = layouts.length - 1; i >= 0; i--) {
+      const L = layouts[i]
+      const prev = wrappedPage
+      wrappedPage = (props) => L({ ...props, children: prev })
+    }
+  }
+  if (Wrapper) {
+    const wrappers = Array.isArray(Wrapper) ? Wrapper : [Wrapper]
+    for (const W of wrappers) {
+      const prev = wrappedPage
+      wrappedPage = (props) => W({ ...props, children: prev })
+    }
+  }
 
-  const headHtml = getHeadHtml(pageContext2)
-  const { headHtmlBegin, headHtmlEnd, bodyHtmlBegin, bodyHtmlEnd } = await getHtmlInjections(pageContext2)
-  const { htmlAttributesString, bodyAttributesString } = getTagAttributes(pageContext2)
-  const enableStream = !!(pageContext2.config.stream ?? pageContext2.config.rippleStream)
+  const enableStream = !!(pageContext.config.stream ?? pageContext.config.rippleStream)
 
   if (enableStream) {
     const rippleStream = create_ssr_stream()
-    render(Page, { stream: rippleStream.sink }).catch(e => {
+    render(wrappedPage, { stream: rippleStream.sink }).catch(e => {
       console.error('[ripple] render err:', e?.message)
     })
     return escapeInject`<!DOCTYPE html>
@@ -41,16 +62,19 @@ const onRenderHtml = async (pageContext) => {
       </html>`
   }
 
-  const { head, body, css } = await render(Page, {})
+  const { head, body, css, topLevelError } = await render(wrappedPage, {})
+  if (topLevelError) {
+    console.error('[vike-ripple] SSR render error:', topLevelError)
+    throw topLevelError
+  }
 
+  // Ripple's render() already extracts <head> content into `head` and CSS into `css`
   const cssHtml = css?.size
     ? `<style data-ripple-ssr>${[...css].join('')}<` + `/style>`
     : ''
 
-  const pageHtml = `<div id="root">${body}${cssHtml}</div>`
-
-  pageContext2.pageHtmlString = body
-  await callCumulativeHooks(pageContext2.config.onAfterRenderHtml, pageContext2)
+  pageContext.pageHtmlString = body
+  await callCumulativeHooks(pageContext.config.onAfterRenderHtml, pageContext)
 
   return escapeInject`<!DOCTYPE html>
     <html${dangerouslySkipEscape(htmlAttributesString)}>
@@ -77,44 +101,43 @@ function getHeadHtml(pageContext) {
   const description = getHeadSetting('description', pageContext)
   const image = getHeadSetting('image', pageContext)
 
-  const faviconTag = !favicon ? '' : `<link rel="icon" href="${favicon}" />`
-  const titleTags = !title ? '' : `<title>${title}</title><meta property="og:title" content="${title}" />`
-  const descriptionTags = !description
-    ? ''
-    : `<meta name="description" content="${description}" /><meta property="og:description" content="${description}" />`
-  const imageTags = !image
-    ? ''
-    : `<meta property="og:image" content="${image}"><meta name="twitter:card" content="summary_large_image">`
+  const parts = []
+  if (favicon) parts.push(`<link rel="icon" href="${favicon}" />`)
+  if (title) parts.push(`<title>${title}</title>`)
+  if (description) parts.push(`<meta name="description" content="${description}" />`)
+  if (image) parts.push(`<meta property="og:image" content="${image}">`)
   const viewportTag = getViewportTag(getHeadSetting('viewport', pageContext))
-  const langAttr = getHeadSetting('lang', pageContext)
-  const headElementsHtml = [
+  if (viewportTag) parts.push(viewportTag)
+  const headElements = [
     ...(pageContext.config.Head ?? []),
     ...(pageContext._configViaHook?.Head ?? []),
   ]
     .filter(Boolean)
-    .map(head => (typeof head === 'function' ? head(pageContext) : head))
+    .map(h => (typeof h === 'function' ? h(pageContext) : h))
     .join('\n')
-
-  return `${titleTags}${viewportTag}${headElementsHtml}${faviconTag}${descriptionTags}${imageTags}`
+  if (headElements) parts.push(headElements)
+  return parts.join('\n')
 }
 
-export function getViewportTag(viewport) {
-  if (viewport === null || viewport === undefined) return ''
+function getViewportTag(viewport) {
+  if (!viewport && viewport !== 0) return ''
   if (viewport === 'responsive') return '<meta name="viewport" content="width=device-width, initial-scale=1.0" />'
   if (typeof viewport === 'number') return `<meta name="viewport" content="width=${viewport}" />`
-  return '<meta name="viewport" content="width=device-width, initial-scale=1.0" />'
+  return ''
 }
 
 function getTagAttributes(pageContext) {
-  const htmlAttributesString = getTagAttributesString(pageContext.config.htmlAttributes)
-  const bodyAttributesString = getTagAttributesString(pageContext.config.bodyAttributes)
-  return { htmlAttributesString, bodyAttributesString }
+  return {
+    htmlAttributesString: getTagAttributesString(pageContext.config.htmlAttributes),
+    bodyAttributesString: getTagAttributesString(pageContext.config.bodyAttributes),
+  }
 }
 
-async function getHtmlInjections(pageContext) {
-  const headHtmlBegin = (pageContext.config.headHtmlBegin ?? []).join('\n')
-  const headHtmlEnd = (pageContext.config.headHtmlEnd ?? []).join('\n')
-  const bodyHtmlBegin = (pageContext.config.bodyHtmlBegin ?? []).join('\n')
-  const bodyHtmlEnd = (pageContext.config.bodyHtmlEnd ?? []).join('\n')
-  return { headHtmlBegin, headHtmlEnd, bodyHtmlBegin, bodyHtmlEnd }
+function getHtmlInjections(pageContext) {
+  return {
+    headHtmlBegin: (pageContext.config.headHtmlBegin ?? []).join('\n'),
+    headHtmlEnd: (pageContext.config.headHtmlEnd ?? []).join('\n'),
+    bodyHtmlBegin: (pageContext.config.bodyHtmlBegin ?? []).join('\n'),
+    bodyHtmlEnd: (pageContext.config.bodyHtmlEnd ?? []).join('\n'),
+  }
 }

package/src/integration/ssrEffect.js

@@ -4,12 +4,9 @@ function ssrEffect({ configDefinedAt, configValue }) {
   if (typeof configValue !== 'boolean') throw new Error(`${configDefinedAt} should be a boolean`)
   return {
     meta: {
-      Page: {
-        env: {
-          client: true,
-          server: configValue !== false,
-        },
-      },
+      Page: { env: { client: true, server: configValue !== false } },
+      Layout: { env: { client: true, server: configValue !== false } },
+      Wrapper: { env: { client: true, server: configValue !== false } },
     },
   }
 }

package/src/setup.js

@@ -1,124 +1,82 @@
 #!/usr/bin/env node
-/**
- * vike-ripple setup — patches Vike and Ripple for .tsrx support.
- *
- * Run once:  npx vike-ripple setup
- * Or add to project's package.json:  "postinstall": "vike-ripple setup"
- */
 import { createRequire } from 'module'
 import { join } from 'path'
 import { readFileSync, writeFileSync, existsSync } from 'fs'
-import { fileURLToPath } from 'url'
 
-const __dirname = fileURLToPath(new URL('.', import.meta.url))
 const projectRoot = process.cwd()
 let exitCode = 0
 
-function log(msg)  { console.log('[vike-ripple]', msg) }
-function warn(msg) { console.warn('[vike-ripple]', msg) }
+function log(m)  { console.log('[vike-ripple]', m) }
+function warn(m) { console.warn('[vike-ripple]', m) }
 
-// ── Patch 1: Register .tsrx with Vike ─────────────────────────
 function patchVikeExtensions() {
   const target = resolveVike('dist/utils/isScriptFile.js')
-  if (!target) { warn('vike not found — skipping'); return }
-
+  if (!target) { warn('vike not found'); return }
   let src = readFileSync(target, 'utf-8')
-  if (src.includes("'tsrx'")) { log('.tsrx already registered with Vike'); return }
-
+  if (src.includes("'tsrx'")) { log('.tsrx already registered'); return }
   const patched = src.replace(
     'const scriptFileExtensionList = [...extJsOrTs, ...extJsxOrTsx, ...extTemplates];',
     "const scriptFileExtensionList = [...extJsOrTs, ...extJsxOrTsx, ...extTemplates, 'tsrx'];",
   )
-  if (patched === src) { warn('Could not patch Vike isScriptFile.js'); exitCode = 1; return }
+  if (patched === src) { warn('Could not patch Vike'); exitCode = 1; return }
   writeFileSync(target, patched, 'utf-8')
-  log('Registered .tsrx extension with Vike')
+  log('Registered .tsrx extension')
 }
 
-// ── Patch 2: Fix ?direct in Ripple's load hook ────────────────
 function patchRippleDirect() {
   const target = resolveRipple('src/index.js')
-  if (!target) { warn('@ripple-ts/vite-plugin not found — skipping'); return }
-
+  if (!target) { warn('@ripple-ts/vite-plugin not found'); return }
   let src = readFileSync(target, 'utf-8')
   if (src.includes('Handle ?direct query param')) { log('?direct fix already applied'); return }
-
   const patched = src.replace(
     'if (cssCache.has(id)) {\n\t\t\t\t\treturn cssCache.get(id);\n\t\t\t\t}',
     `if (cssCache.has(id)) {
-					return cssCache.get(id);
-				}
-
-				// Handle ?direct query param added by Vite's SSR module loading
-				if (id.includes('?direct')) {
-					const baseId = id.replace('?direct', '');
-					if (cssCache.has(baseId)) {
-						return cssCache.get(baseId);
-					}
-				}`,
+\t\t\t\t\treturn cssCache.get(id);
+\t\t\t\t}
+\t\t\t\tif (id.includes('?direct')) {
+\t\t\t\t\tconst baseId = id.replace('?direct', '');
+\t\t\t\t\tif (cssCache.has(baseId)) {
+\t\t\t\t\t\treturn cssCache.get(baseId);
+\t\t\t\t\t}
+\t\t\t\t}`,
   )
-  if (patched === src) { warn('Could not patch Ripple plugin load hook'); exitCode = 1; return }
+  if (patched === src) { warn('Could not patch Ripple plugin'); exitCode = 1; return }
   writeFileSync(target, patched, 'utf-8')
-  log('Patched Ripple plugin for ?direct CSS module loading')
+  log('Patched Ripple plugin for ?direct CSS loading')
 }
 
-// ── Patch 3: @apply support ───────────────────────────────────
 function patchRippleApply() {
   const target = resolveRipple('src/index.js')
   if (!target) return
-
   let src = readFileSync(target, 'utf-8')
-
   if (src.includes('TW_PATCH_APPLY')) { log('@apply patch already applied'); return }
-
-  // Upgrade from old TW_PATCH format
   if (src.includes('TW_PATCH:')) {
-    src = src.replace(
-      '// TW_PATCH: prepend tailwindcss so @apply works',
-      '// TW_PATCH_APPLY: bring tailwindcss into scope for @apply',
-    )
-    src = src.replace(
-      "css = '@import \"tailwindcss\";\\n' + css;",
-      "css = '@import \"tailwindcss\" layer(reference);\\n' + css;",
-    )
+    src = src.replace('// TW_PATCH: prepend tailwindcss','// TW_PATCH_APPLY: apply')
+    src = src.replace("css = '@import \"tailwindcss\";\\n' + css;","css = '@import \"tailwindcss\" layer(reference);\\n' + css;")
     writeFileSync(target, src, 'utf-8')
-    log('Upgraded @apply patch to layer(reference) (HMR-safe)')
+    log('Upgraded @apply patch');
     return
   }
-
-  // Fresh install — prepend @import with reference layer
-  const orig = (
-    '\t\t\t\t\tif (css) {\n' +
-    '\t\t\t\t\t\tconst cssId = createVirtualImportId(filename, root, \'style\');\n' +
-    '\t\t\t\t\t\tcssCache.set(cssId, css);'
-  )
-  const patched = (
-    '\t\t\t\t\tif (css) {\n' +
-    '\t\t\t\t\t\t// TW_PATCH_APPLY: bring tailwindcss into scope for @apply\n' +
-    "\t\t\t\t\t\tcss = '@import \"tailwindcss\" layer(reference);\\n' + css;\n" +
-    '\t\t\t\t\t\tconst cssId = createVirtualImportId(filename, root, \'style\');\n' +
-    '\t\t\t\t\t\tcssCache.set(cssId, css);'
-  )
-
-  const result = src.replace(orig, patched)
-  if (result === src) { warn('Could not patch Ripple plugin for @apply'); return }
+  const orig = '\t\t\t\t\tif (css) {\n\t\t\t\t\t\tconst cssId = createVirtualImportId(filename, root, \'style\');\n\t\t\t\t\t\tcssCache.set(cssId, css);'
+  const rep = '\t\t\t\t\tif (css) {\n\t\t\t\t\t\t// TW_PATCH_APPLY: @apply support\n\t\t\t\t\t\tcss = \'@import "tailwindcss" layer(reference);\\n\' + css;\n\t\t\t\t\t\tconst cssId = createVirtualImportId(filename, root, \'style\');\n\t\t\t\t\t\tcssCache.set(cssId, css);'
+  const result = src.replace(orig, rep)
+  if (result === src) { warn('Could not patch @apply'); return }
   writeFileSync(target, result, 'utf-8')
-  log('Patched Ripple plugin for @apply support in <style> blocks')
+  log('Patched Ripple plugin for @apply')
 }
 
-// ── Resolve helpers ────────────────────────────────────────────
 function resolveVike(rel) {
   const p = join(projectRoot, 'node_modules', 'vike', rel)
   if (existsSync(p)) return p
-  try { const r = createRequire(join(projectRoot, 'package.json')); return r.resolve('vike/' + rel) } catch { return null }
+  try { return createRequire(join(projectRoot, 'package.json')).resolve('vike/' + rel) } catch { return null }
 }
 
 function resolveRipple(rel) {
   const p = join(projectRoot, 'node_modules', '@ripple-ts', 'vite-plugin', rel)
   if (existsSync(p)) return p
-  try { const r = createRequire(join(projectRoot, 'package.json')); return r.resolve('@ripple-ts/vite-plugin/' + rel) } catch { return null }
+  try { return createRequire(join(projectRoot, 'package.json')).resolve('@ripple-ts/vite-plugin/' + rel) } catch { return null }
 }
 
-// ── Main ──────────────────────────────────────────────────────
 log('Applying patches...')
 patchVikeExtensions()
 patchRippleDirect()

package/src/utils/callCumulativeHooks.js

@@ -3,9 +3,7 @@ export async function callCumulativeHooks(hooks, ...args) {
   for (const hook of hooks) {
     if (typeof hook === 'function') {
       const result = hook(...args)
-      if (result && typeof result.then === 'function') {
-        await result
-      }
+      if (result && typeof result.then === 'function') await result
     }
   }
 }

package/src/utils/getTagAttributesString.js

@@ -1,10 +1,10 @@
-export function getTagAttributesString(attributes) {
-  if (!attributes) return ''
-  return Object.entries(attributes)
-    .map(([key, value]) => {
-      if (value === true) return ` ${key}`
-      if (value === false || value === null || value === undefined) return ''
-      return ` ${key}="${String(value).replace(/"/g, '"')}"`
+export function getTagAttributesString(attrs) {
+  if (!attrs) return ''
+  return Object.entries(attrs)
+    .map(([k, v]) => {
+      if (v === true) return ` ${k}`
+      if (!v) return ''
+      return ` ${k}="${String(v).replace(/"/g, '"')}"`
     })
     .join('')
 }

package/src/hooks/useConfig.js

@@ -1,14 +0,0 @@
-import { useConfig } from '../hooks/useConfig.js'
-
-export function useConfig() {
-  const pageContext = typeof window !== 'undefined'
-    ? window.__vike_pageContext
-    : globalThis.__vike_pageContext
-
-  return (values) => {
-    if (!pageContext._configViaHook) {
-      pageContext._configViaHook = {}
-    }
-    Object.assign(pageContext._configViaHook, values)
-  }
-}

package/src/integration/applyHeadSettings.js

@@ -1,10 +0,0 @@
-export function applyHeadSettings(headList, target) {
-  if (!headList || !Array.isArray(headList)) return
-  for (const head of headList) {
-    if (typeof head === 'string') {
-      target.insertAdjacentHTML('beforeend', head)
-    } else if (head instanceof Node) {
-      target.appendChild(head.cloneNode(true))
-    }
-  }
-}

package/src/integration/getPageElement.js

@@ -1,32 +0,0 @@
-export { getPageElement }
-
-import { getHeadSetting } from './getHeadSetting.js'
-
-function getPageElement(pageContext) {
-  const { Page } = pageContext
-  if (!Page) {
-    return { page: null, pageElement: null }
-  }
-
-  const Layout = pageContext.config.Layout
-  const Wrapper = pageContext.config.Wrapper
-
-  let page = Page
-
-  if (Layout) {
-    const layouts = Array.isArray(Layout) ? Layout : [Layout]
-    for (let i = layouts.length - 1; i >= 0; i--) {
-      const LayoutComponent = layouts[i]
-      page = function NestedPage(props) { return LayoutComponent({ ...props, children: page }) }
-    }
-  }
-
-  if (Wrapper) {
-    const wrappers = Array.isArray(Wrapper) ? Wrapper : [Wrapper]
-    for (const W of wrappers) {
-      page = function WrappedPage(props) { return W({ ...props, children: page }) }
-    }
-  }
-
-  return { page, pageElement: page }
-}

package/src/types/Config.ts

@@ -1,33 +0,0 @@
-import 'vike/types'
-
-declare global {
-  namespace Vike {
-    interface Config {
-      Head?: unknown[]
-      Layout?: unknown[]
-      title?: string | null
-      description?: string | null
-      image?: string | null
-      viewport?: 'responsive' | number | null
-      favicon?: string | null
-      lang?: string | null
-      ssr?: boolean
-      stream?: boolean
-      rippleStream?: boolean
-      Wrapper?: unknown[]
-      Loading?: unknown
-      onBeforeRenderHtml?: ((pageContext: unknown) => void | Promise<void>)[]
-      onAfterRenderHtml?: ((pageContext: unknown) => void | Promise<void>)[]
-      onBeforeRenderClient?: ((pageContext: unknown) => void | Promise<void>)[]
-      onAfterRenderClient?: ((pageContext: unknown) => void | Promise<void>)[]
-      bodyHtmlBegin?: string[]
-      bodyHtmlEnd?: string[]
-      headHtmlBegin?: string[]
-      headHtmlEnd?: string[]
-      htmlAttributes?: Record<string, string | boolean>
-      bodyAttributes?: Record<string, string | boolean>
-    }
-  }
-}
-
-export type __FakeExport_Config = true

package/src/types/PageContext.ts

@@ -1,13 +0,0 @@
-import 'vike/types'
-
-declare global {
-  namespace Vike {
-    interface PageContext {
-      _configViaHook?: Record<string, unknown>
-      _headAlreadySet?: boolean
-      pageHtmlString?: string
-    }
-  }
-}
-
-export type __FakeExport_PageContext = true