diff --git a/hero.js b/hero.js index 3393b6c..6b79b4e 100644 --- a/hero.js +++ b/hero.js @@ -308,6 +308,7 @@ const CSS = ` `; function ensureStyle() { + if (DEBUG.has('nostyle')) return; if (document.getElementById(STYLE_ID)) return; const style = document.createElement('style'); style.id = STYLE_ID; @@ -336,7 +337,7 @@ class WestraHero { this.hero = container.closest('.hero') || container.parentElement; // Where the module's custom properties go: an element the app // never hydrates, so writing to it cannot disturb hydration. - this.host = document.body; + this.host = DEBUG.has('nobody') ? document.createElement('div') : document.body; this.reduced = window.matchMedia('(prefers-reduced-motion: reduce)'); this.dark = window.matchMedia('(prefers-color-scheme: dark)'); @@ -357,7 +358,7 @@ class WestraHero { this.mark = mark; // Both inside the piece, and nothing outside it (see .westra-line). this.container = container; - container.append(this.canvas, this.name); + if (!DEBUG.has('nodom')) container.append(this.canvas, this.name); this.width = 0; this.height = 1; @@ -601,6 +602,13 @@ class WestraHero { } } +// Temporary, to find what disturbs hydration on the live site: +// ?hero=off mounts nothing, ?hero=nostyle skips the stylesheet, +// ?hero=nobody skips the custom properties on , ?hero=nodom +// adds nothing to the piece. Removed once known. +const DEBUG = new Set((new URLSearchParams(location.search).get('hero') || '').split(',')); + export function mount(container) { + if (DEBUG.has('off')) return { stop() {} }; return new WestraHero(container); }