fix stylesheet from styled components

package.json

@@ -49,6 +49,9 @@
       "useData": [
         "./dist/components/useData.d.ts"
       ],
+      "ClientOnly": [
+        "./dist/components/ClientOnly.d.js"
+      ],
       "renderer/onRenderHtml": [
         "./dist/renderer/onRenderHtml.d.ts"
       ],

src/components/ClientOnly.tsx

@@ -1,42 +1,17 @@
-export { ClientOnly }
+import React from 'react'
+import { FC, ReactElement, ReactNode, useEffect, useState } from 'react'
 
-import React, { lazy, useEffect, useState, startTransition } from 'react'
-import type { ComponentType, ReactNode } from 'react'
-
-function ClientOnly<T>({
-  load,
-  children,
-  fallback,
-  deps = []
-}: {
-  load: () => Promise<{ default: React.ComponentType<T> } | React.ComponentType<T>>
-  children: (Component: React.ComponentType<T>) => ReactNode
-  fallback: ReactNode
-  deps?: Parameters<typeof useEffect>[1]
-}) {
-  const [Component, setComponent] = useState<ComponentType<unknown> | null>(null)
+type Props = {
+  children: ReactNode
+}
+export const ClientOnly: FC<Props> = ({ children }): ReactElement<any, any> | null => {
+  const [hasMounted, setHasMounted] = useState(false)
 
   useEffect(() => {
-    const loadComponent = () => {
-      const Component = lazy(() =>
-        load()
-          .then((LoadedComponent) => {
-            return {
-              default: () => children('default' in LoadedComponent ? LoadedComponent.default : LoadedComponent)
-            }
-          })
-          .catch((error) => {
-            console.error('Component loading failed:', error)
-            return { default: () => <p>Error loading component.</p> }
-          })
-      )
-      setComponent(Component)
-    }
+    setHasMounted(true)
+  }, [])
 
-    startTransition(() => {
-      loadComponent()
-    })
-  }, deps)
+  if (!hasMounted) return null
 
-  return Component ? <Component /> : fallback
+  return <>{children}</>
 }

src/renderer/+config.ts

@@ -20,8 +20,8 @@ const toggleSsrRelatedConfig: ConfigEffect = ({ configDefinedAt, configValue })
 }
 
 export default {
-  onRenderHtml: 'import:vike-builders/renderer/onRenderHtml:onRenderHtml',
-  onRenderClient: 'import:vike-builders/renderer/onRenderClient:onRenderClient',
+  onRenderHtml: 'import:@platformbuilders/vike-builders/renderer/onRenderHtml:onRenderHtml',
+  onRenderClient: 'import:@platformbuilders/vike-builders/renderer/onRenderClient:onRenderClient',
   passToClient: ['pageProps', 'title'],
   clientRouting: false,
   hydrationCanBeAborted: true,
@@ -38,9 +38,6 @@ export default {
     description: {
       env: { server: true }
     },
-    theme: {
-      env: { server: true , client: true}
-    },
     favicon: {
       env: { server: true }
     },
@@ -83,8 +80,6 @@ declare global {
        *
        */
       lang?: string
-
-      theme?: any
       /**
        * If true, render mode is SSR or pre-rendering (aka SSG). In other words, the
        * page's HTML will be rendered at build-time or request-time.

src/renderer/getPageElement.tsx

@@ -1,18 +1,15 @@
 import React from 'react'
-import { ThemeProvider } from 'styled-components'
 import type { PageContext } from 'vike/types'
-import { themeFormatter } from '@platformbuilders/theme-toolkit'
 import { PageContextProvider } from './PageContextProvider.js'
 
 function PassThrough({ children }: any) {
   return <>{children}</>
 }
 export function PageShell({ children, pageContext }: { children: React.ReactNode; pageContext: PageContext }) {
   const Layout = pageContext.config.Layout || PassThrough
-  const themeJson = themeFormatter(pageContext.config.theme) ?? {}
   return (
     <PageContextProvider pageContext={pageContext}>
-      <Layout theme={themeJson}>{children}</Layout>
+      <Layout>{children}</Layout>
     </PageContextProvider>
   )
 }

src/renderer/onRenderHtml.tsx

@@ -3,19 +3,35 @@ import { ServerStyleSheet } from 'styled-components'
 import { dangerouslySkipEscape, escapeInject } from 'vike/server'
 import type { OnRenderHtmlAsync } from 'vike/types'
 import { PageShell } from './getPageElement.js'
+import { getTitle } from './getTitle.js'
+import { PageContextProvider } from './PageContextProvider.js'
 import React from 'react'
 
 const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRenderHtmlAsync> => {
+  const { description, favicon } = pageContext.config
+  const faviconTag = !favicon ? '' : escapeInject`<link rel="icon" href="${favicon}" />`
+  const descriptionTag = !description ? '' : escapeInject`<meta name="description" content="${description}" />`
+
+  const title = getTitle(pageContext)
+  const titleTag = !title ? '' : escapeInject`<title>${title}</title>`
+
+  const Head = pageContext.config.Head || (() => <></>)
+  const head = (
+    <PageContextProvider pageContext={pageContext}>
+      <Head />
+    </PageContextProvider>
+  )
+
+  const headHtml = dangerouslySkipEscape(ReactDOMServer.renderToString(head))
+
   const sheet = new ServerStyleSheet()
   let pageHtml
-  let test = 't'
   if (!pageContext.Page) {
     // SPA
     pageHtml = ''
   } else {
     // SSR / HTML-only
     const { Page, data } = pageContext
-    test = 'passou aqui'
     pageHtml = ReactDOMServer.renderToString(
       sheet.collectStyles(
         <PageShell pageContext={pageContext}>
@@ -25,22 +41,21 @@ const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRender
     )
   }
   // See https://vike.dev/head
-  const title = String(pageContext.exports.title) || 'Vite SSR app'
   const desc = String(pageContext.exports.description) || 'App using Vite + Vike'
 
   const documentHtml = escapeInject`<!DOCTYPE html>
     <html lang="pt-br">
       <head>
         <meta charset="UTF-8" />
+        ${faviconTag}
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta name="description" content="${desc}" />
-        <title>${title}</title>
+        ${titleTag}
+        ${descriptionTag}
+        ${headHtml}
         ${dangerouslySkipEscape(sheet.getStyleTags())}
       </head>
       
       <body>
-      <div>${test}</div>
-
         <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
       </body>
     </html>`