import Router from '../router' export default function initializeBuildWatcher () { const shadowHost = document.createElement('div') shadowHost.id = '__next-prerender-indicator' // Make sure container is fixed and on a high zIndex so it shows shadowHost.style.position = 'fixed' shadowHost.style.bottom = '20px' shadowHost.style.right = '10px' shadowHost.style.width = 0 shadowHost.style.height = 0 shadowHost.style.zIndex = 99998 shadowHost.style.transition = 'all 100ms ease' shadowHost.title = 'Click to hide for page' document.body.appendChild(shadowHost) let shadowRoot let prefix = '' if (shadowHost.attachShadow) { shadowRoot = shadowHost.attachShadow({ mode: 'open' }) } else { // If attachShadow is undefined then the browser does not support // the Shadow DOM, we need to prefix all the names so there // will be no conflicts shadowRoot = shadowHost prefix = '__next-prerender-indicator-' } // Container const container = createContainer(prefix) shadowRoot.appendChild(container) // CSS const css = createCss(prefix) shadowRoot.appendChild(css) // State let isVisible = window.__NEXT_DATA__.nextExport function updateContainer () { if (isVisible) { container.classList.add(`${prefix}visible`) } else { container.classList.remove(`${prefix}visible`) } } shadowHost.addEventListener('click', () => { shadowHost.style.opacity = 0 shadowHost.style.pointerEvents = 'none' }) shadowHost.addEventListener('mouseenter', () => { container.classList.add(`${prefix}expanded`) }) shadowHost.addEventListener('mouseleave', () => { container.classList.remove(`${prefix}expanded`) }) Router.events.on('routeChangeComplete', () => { isVisible = window.next.isPrerendered shadowHost.style.opacity = 1 updateContainer() }) updateContainer() } function createContainer (prefix) { const container = document.createElement('div') container.id = `${prefix}container` container.innerHTML = `