From 712aca94f563b7ea8e2a11c30df327e65f7bd828 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Fri, 19 Jan 2024 16:17:07 +0530
Subject: [PATCH] fix(client): handle head orphans added in first load

---
 src/client/app/composables/head.ts | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/client/app/composables/head.ts b/src/client/app/composables/head.ts
index 6b0e23f8..efccd208 100644
--- a/src/client/app/composables/head.ts
+++ b/src/client/app/composables/head.ts
@@ -8,14 +8,23 @@ import {
 import type { Route } from '../router'
 
 export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) {
-  let managedHeadElements: (HTMLElement | undefined)[] = []
   let isFirstUpdate = true
+  let managedHeadElements: (HTMLElement | undefined)[] = []
 
   const updateHeadTags = (newTags: HeadConfig[]) => {
     if (import.meta.env.PROD && isFirstUpdate) {
       // in production, the initial meta tags are already pre-rendered so we
       // skip the first update.
       isFirstUpdate = false
+      newTags.forEach((tag) => {
+        const selector = toSelector(tag[0], tag[1])
+        ;[...document.querySelectorAll(selector)].some((el) => {
+          if (el.isEqualNode(createHeadElement(tag))) {
+            managedHeadElements.push(el as HTMLElement)
+            return true
+          }
+        })
+      })
       return
     }
 
@@ -96,3 +105,9 @@ function isMetaDescription(headConfig: HeadConfig) {
 function filterOutHeadDescription(head: HeadConfig[]) {
   return head.filter((h) => !isMetaDescription(h))
 }
+
+function toSelector(tag: string, attrs: Record<string, string>) {
+  return `${tag}${Object.keys(attrs)
+    .map((key) => `[${key}="${attrs[key].replace(/(["'\\])/g, '\\$1')}"]`)
+    .join('')}`
+}