From c66f7e1cac086c61513e4626ee70ccad7b37d98f Mon Sep 17 00:00:00 2001 From: Daniel Choudhury Date: Tue, 8 Aug 2023 12:53:58 +0700 Subject: [PATCH] Mark printed elements by portal head, but it does double print --- packages/web/src/components/PortalHead.tsx | 24 ++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/web/src/components/PortalHead.tsx b/packages/web/src/components/PortalHead.tsx index 8bfedacf055c..8b67a91b7beb 100644 --- a/packages/web/src/components/PortalHead.tsx +++ b/packages/web/src/components/PortalHead.tsx @@ -4,22 +4,34 @@ import { createPortal } from 'react-dom' import { useServerInsertedHTML } from './ServerInject' +function addDataAttributeMarker(children: React.ReactNode) { + return React.Children.toArray(children).map((child, i) => { + return React.cloneElement(child as React.ReactElement, { + 'data-rwjs-head': true, + key: 'data-rwjs-head-' + i, + }) + }) +} + const PortalHead: React.FC = ({ children }) => { + const findableChildren = addDataAttributeMarker(children) + useServerInsertedHTML(() => { // Add "data-rwjs-head" attribute to anything inside , // This is then later moved to the in the final block of the transform stream (see streamHelpers.ts) - return React.Children.toArray(children).map((child, index) => { - return React.cloneElement(child as React.ReactElement, { - 'data-rwjs-head': `bazinga-${index}`, - }) - }) + return findableChildren }) if (typeof window === 'undefined') { // Don't do anything on the server, handled by above callback return null } else { - return createPortal(<>{children}, document.head) + //@TODO HALP These get rendered twice even with the same key, after the React bundle loads + // but we can't remove this because neeeded for client side nav/render + // Portals must work differently to standard react diffing. + + // Logic needs to be something like: if (clientSideRouting) { return createPortal } else { return null } + return createPortal(findableChildren, document.head) } }