The challenges of rendering an OpenLayers map in a popup through React

import { StylesProvider, ThemeProvider as MuiThemeProvider, useTheme } from '@material-ui/core'
import { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'

interface NewWindowPortalProps {
  onClose: () => void
  title: string
}

function copyStyles(sourceDoc: Document, targetDoc: Document) {
  Array.from(sourceDoc.querySelectorAll('link[rel="stylesheet"], style')).forEach(link => {
    targetDoc.head.appendChild(link.cloneNode(true))
  })
}

const NewWindowPortal: React.FC<NewWindowPortalProps> = ({ children, title, onClose }) => {
  const theme = useTheme()
  const nodeRef = useRef<HTMLElement>(document.createElement('div'))
  const windowRef = useRef<Window | null>(null)

  const [isLoading, setLoading] = useState<boolean>(true)

  useEffect(() => {
    // TODO: make height/width/position configurable?
    windowRef.current = window.open('/widget.html', '', 'width=1000,height=600,left=200,top=200')

    if (windowRef.current) {
      windowRef.current.addEventListener('beforeunload', (e: BeforeUnloadEvent) => {
        // safari loads (and unloads) about:blank before loading /widget.html
        if ((e.target as Document).URL !== 'about:blank') {
          onClose()
        }
      })
      windowRef.current.addEventListener('load', () => {
        if (windowRef.current) {
          windowRef.current.document.body.appendChild(nodeRef.current)
          windowRef.current.document.title = title
        }
        setLoading(false)
      })
    }
    return () => {
      windowRef.current?.close()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  useEffect(() => {
    if (!isLoading && windowRef.current) {
      copyStyles(document, windowRef.current.document)
    }
  }, [isLoading])

  return isLoading
    ? null
    : ReactDOM.createPortal(
        <StylesProvider>
          <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
        </StylesProvider>,
        nodeRef.current,
      )
}

export default NewWindowPortal

type Options = {
  mainWindowDoc: Document
  popupDoc: Document

  // Avoid cloning the same stylesheet over and over again.
  mutableCache: WeakMap<Node, Node>

  measurePerformance?: boolean
}

/**
 * Clone all the externally-loaded stylesheets (ex. the fonts).
 */
export function copyExternalStylesheets(options: Options) {
  const { mainWindowDoc, popupDoc, mutableCache, measurePerformance = false } = options

  const start = measurePerformance ? performance.now() : 0

  // Retrieve all the links from the main window
  const stylesheets = mainWindowDoc.querySelectorAll(
    'link[rel="stylesheet"]',
  ) as NodeListOf<HTMLLinkElement>

  // Clone the stylesheets and append them to the popup window
  for (const stylesheet of stylesheets) {
    // Avoid cloning the stylesheet if not needed
    if (mutableCache.has(stylesheet)) continue

    const clonedStylesheet = stylesheet.cloneNode(true) as HTMLLinkElement
    popupDoc.head.appendChild(clonedStylesheet)

    mutableCache.set(stylesheet, clonedStylesheet)
  }

  // Log the overall performance
  if (measurePerformance) {
    console.log(
      `Cloning the external stylesheets in the popup took ${performance.now() - start} ms`,
    )
  }
}

type Options = {
  mainWindowDoc: Document

  // The container that will host all the CSS rules.
  mutableContainer: HTMLStyleElement

  measurePerformance?: boolean
}

/**
 * Clone all the internal CSS rules of a document. The purpose of this function is to clone the
 * dynamically-created stylesheets (all the CSS-in-JS ones).
 *
 * Please note that the styles created by the CSS-in-JS libraries don't have a set 'innerHTML' but
 * they can only be clones by reading `document.styleSheets`.
 *
 * see: https://github.com/mui/material-ui/issues/16756#issue-473252809
 */
export function copyCssRules(options: Options) {
  const { mainWindowDoc, mutableContainer, measurePerformance = false } = options

  const start = performance.now()

  const allStylesheets = mainWindowDoc.styleSheets

  // Filter out the browser extension stylesheets
  // see: https://betterprogramming.pub/how-to-fix-the-failed-to-read-the-cssrules-property-from-cssstylesheet-error-431d84e4a139
  const appStyleSheets = Array.from(allStylesheets).filter(
    styleSheet => !styleSheet.href || styleSheet.href.startsWith(window.location.origin),
  )

  let allCssRules = `
/* Dynamically-copied CSS rules, see copyDocumentStylesheets */
  `

  // Create a string containing all the CSS rules
  for (const stylesheet of appStyleSheets) {
    for (const rule of stylesheet.cssRules) {
      allCssRules += `
${rule.cssText}
`
    }
  }

  mutableContainer.textContent = allCssRules

  // Log the overall performance
  if (measurePerformance) {
    console.log(
      `Updating the popup styles with all the CSS rules took ${performance.now() - start} ms`,
    )
  }
}

import { copyCssRules } from './copyCssRules'

type Options = {
  mainWindowDoc: Document
  mutableContainer: HTMLStyleElement
  initialSync?: boolean
  measurePerformance?: boolean
}

/**
 * Clone all the CSS rule of a document every time something changes in the main window's head.
 * The purpose is intercepting every CSS-in-JS-related change and update the popup's styles accordingly.
 */
export function keepCssRulesInSync(options: Options) {
  const {
    mainWindowDoc,
    mutableContainer,
    initialSync = true,
    measurePerformance = false,
  } = options

  function onStylesChange() {
    copyCssRules({
      mainWindowDoc,
      mutableContainer,
      measurePerformance,
    })
  }

  const observer = new MutationObserver(onStylesChange)
  const mainWindowHead = mainWindowDoc.querySelector('head')

  if (!mainWindowHead) throw new Error('No head found in the main window')

  observer.observe(mainWindowHead, { subtree: false, childList: true })

  if (initialSync) {
    copyCssRules({
      mainWindowDoc,
      mutableContainer,
      measurePerformance,
    })
  }

  return () => observer.disconnect()
}

import type OlMap from 'ol/Map'
import type { PopupPlugin } from '../types'

type Params = {
  map: OlMap

  /**
   * The container that must always be available to allow the map rendered in the popup to
   * immediately switch back to the main window when the popup close. Theoretically, this is not
   * necessary since OL already answered to this issue https://github.com/openlayers/openlayers/issues/13525
   * but the mentioned solution sometimes does not work for the markers (but always works for the
   * other layers). The bug happens in our own code since in this CodeSandbox
   * https://codesandbox.io/s/external-map-bug-markers-jew6cd?file=/main.js:2021-2043
   * you can see that both the standard layers and the marker one always work.
   */
  mainWindowTemporaryContainerId: string
}

/**
 * Create a popup plugin that works around the map limitations when being moved to a popup.
 */
export function createMapPopupPlugin(params: Params) {
  const { map, mainWindowTemporaryContainerId } = params

  const plugin: PopupPlugin = {
    // --------------------------------------------------
    // POPUP CLOSE
    // --------------------------------------------------
    onClose: () => {
      const currentTarget = map.getTarget()

      // The map is not mounted yet
      if (!currentTarget) return

      // With the introduction of the Extracted Map, the map's target could not be a string anymore.
      if (typeof currentTarget === 'string') return

      const mainWindowTemporaryContainer = getMainWindowTemporaryContainer(
        mainWindowTemporaryContainerId,
      )

      const mapWasInPopup = currentTarget.ownerDocument.defaultView !== window

      if (!mapWasInPopup) return

      // Immediately set the map target to a temporary container of the main window to avoid render
      // errors with the map layers.
      // ATTENTION: setting the target to a main window element must be performed synchronously whrn
      // the popup closes!
      map.setTarget(mainWindowTemporaryContainer)
    },
  }

  return { plugin }
}

function getMainWindowTemporaryContainer(id: string) {
  const container = document.getElementById(id)

  // Prompt the developer in case of missing temporary container
  if (!container) {
    throw new Error('No temporary map container available')
  }

  return container
}