wip

packages/vike-react/src/renderer/applyDocumentClientSide.ts

@@ -0,0 +1,27 @@
+export { applyDocumentClientSide }
+
+import type { PageContextClient } from 'vike/types'
+import { getDocumentElementsIsomoprh } from './getDocument.js'
+
+function applyDocumentClientSide(pageContext: PageContextClient): void {
+  const { title, lang, favicon } = getDocumentElementsIsomoprh(pageContext)
+  // We skip if the value is undefined because we shouldn't remove values set in HTML (by the Head setting).
+  if (title !== undefined) window.document.title = title
+  if (lang !== undefined) window.document.documentElement.lang = lang
+  if (favicon !== undefined) setFavicon(favicon)
+}
+
+// https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically/260876#260876
+function setFavicon(faviconUrl: string | null) {
+  let link: HTMLLinkElement | null = document.querySelector("link[rel~='icon']")
+  if (!faviconUrl) {
+    if (link) window.document.head.removeChild(link)
+    return
+  }
+  if (!link) {
+    link = window.document.createElement('link')
+    link.rel = 'icon'
+    window.document.head.appendChild(link)
+  }
+  link.href = faviconUrl
+}

packages/vike-react/src/renderer/getDocument.ts

@@ -6,16 +6,16 @@ import type { Document } from '../types/Document.js'
 import { assert } from '../utils/assert.js'
 
 function getDocumentElementsIsomoprh(pageContext: PageContext): {
-  title: null | string
-  lang: string
-  favicon: null | string
+  title: undefined | string
+  lang: undefined | string
+  favicon: undefined | string
 } {
   const document = getDocument(pageContext)
 
-  let title = document.title ?? null
-  let lang = document.locale || 'en'
+  let title = document.title
+  let lang = document.locale
   // TODO
-  const favicon = (document.icon as string) ?? null
+  const favicon = document.icon as string | undefined
 
   return {
     title,

packages/vike-react/src/renderer/onRenderClient.tsx

@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom/client'
 import { getHeadSetting } from './getHeadSetting.js'
 import type { OnRenderClientSync } from 'vike/types'
 import { getPageElement } from './getPageElement.js'
-import { getDocument } from './getDocument.js'
+import { applyDocumentClientSide } from './applyDocumentClientSide.js'
 
 let root: ReactDOM.Root
 const onRenderClient: OnRenderClientSync = (pageContext): ReturnType<OnRenderClientSync> => {
@@ -42,6 +42,8 @@ const onRenderClient: OnRenderClientSync = (pageContext): ReturnType<OnRenderCli
       if (title !== undefined) document.title = title
       if (lang !== undefined) document.documentElement.lang = lang
       if (favicon !== undefined) setFavicon(favicon)
+
+      applyDocumentClientSide(pageContext)
     }
 
     root.render(page)