986 lines
27 KiB
JavaScript
986 lines
27 KiB
JavaScript
const iframeStorageBridge = (nonce) => `
|
|
(function () {
|
|
const NONCE = ${JSON.stringify(nonce)};
|
|
const memoryStore = Object.create(null);
|
|
|
|
const post = (type, payload) => {
|
|
window.parent.postMessage({ type, nonce: NONCE, ...payload }, '*');
|
|
};
|
|
|
|
const isValid = (data) => data && data.nonce === NONCE;
|
|
|
|
const mockStorage = {
|
|
getItem(key) {
|
|
return Object.hasOwn(memoryStore, key)
|
|
? memoryStore[key]
|
|
: null;
|
|
},
|
|
setItem(key, value) {
|
|
const v = String(value);
|
|
memoryStore[key] = v;
|
|
post('storage-set', { key, value: v });
|
|
},
|
|
removeItem(key) {
|
|
delete memoryStore[key];
|
|
post('storage-remove', { key });
|
|
},
|
|
clear() {
|
|
for (const key of Object.keys(memoryStore))
|
|
delete memoryStore[key];
|
|
post('storage-clear', {});
|
|
},
|
|
key(index) {
|
|
const keys = Object.keys(memoryStore);
|
|
return keys[index] ?? null;
|
|
},
|
|
get length() {
|
|
return Object.keys(memoryStore).length;
|
|
}
|
|
};
|
|
|
|
const defineLocalStorage = () => {
|
|
try {
|
|
Object.defineProperty(window, 'localStorage', {
|
|
value: mockStorage,
|
|
writable: false,
|
|
configurable: true
|
|
});
|
|
} catch {
|
|
window.localStorage = mockStorage;
|
|
}
|
|
};
|
|
|
|
defineLocalStorage();
|
|
|
|
window.addEventListener('message', (event) => {
|
|
const data = event.data;
|
|
if (!isValid(data) || data.type !== 'storage-sync-data') return;
|
|
|
|
const incoming = data.data || {};
|
|
for (const key of Object.keys(incoming))
|
|
memoryStore[key] = incoming[key];
|
|
|
|
if (typeof window.initTheme === 'function')
|
|
window.initTheme();
|
|
window.dispatchEvent(new Event('storage-ready'));
|
|
});
|
|
|
|
// Clipboard API is unavailable in data: URL iframe, so we use postMessage
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
window.copyErrorMessage = function(button) {
|
|
post('clipboard-copy', { text: button.dataset.errorText });
|
|
button.classList.add('copied');
|
|
setTimeout(function() { button.classList.remove('copied'); }, 2000);
|
|
};
|
|
});
|
|
|
|
post('storage-sync-request', {});
|
|
})();
|
|
`;
|
|
const parentStorageBridge = (nonce) => `
|
|
(function () {
|
|
const host = document.querySelector('nuxt-error-overlay');
|
|
if (!host) return;
|
|
|
|
const NONCE = ${JSON.stringify(nonce)};
|
|
const isValid = (data) => data && data.nonce === NONCE;
|
|
|
|
// Handle clipboard copy from iframe
|
|
window.addEventListener('message', function(e) {
|
|
if (isValid(e) && e.data.type === 'clipboard-copy') {
|
|
navigator.clipboard.writeText(e.data.text).catch(function() {});
|
|
}
|
|
});
|
|
|
|
const collectLocalStorage = () => {
|
|
const all = {};
|
|
for (let i = 0; i < localStorage.length; i++) {
|
|
const k = localStorage.key(i);
|
|
if (k != null) all[k] = localStorage.getItem(k);
|
|
}
|
|
return all;
|
|
};
|
|
|
|
const attachWhenReady = () => {
|
|
const root = host.shadowRoot;
|
|
if (!root)
|
|
return false;
|
|
const iframe = root.getElementById('frame');
|
|
if (!iframe || !iframe.contentWindow)
|
|
return false;
|
|
|
|
const handlers = {
|
|
'storage-set': (d) => localStorage.setItem(d.key, d.value),
|
|
'storage-remove': (d) => localStorage.removeItem(d.key),
|
|
'storage-clear': () => localStorage.clear(),
|
|
'storage-sync-request': () => {
|
|
iframe.contentWindow.postMessage({
|
|
type: 'storage-sync-data',
|
|
data: collectLocalStorage(),
|
|
nonce: NONCE
|
|
}, '*');
|
|
}
|
|
};
|
|
|
|
window.addEventListener('message', (event) => {
|
|
const data = event.data;
|
|
if (!isValid(data)) return;
|
|
const fn = handlers[data.type];
|
|
if (fn) fn(data);
|
|
});
|
|
|
|
return true;
|
|
};
|
|
|
|
if (attachWhenReady())
|
|
return;
|
|
|
|
const obs = new MutationObserver(() => {
|
|
if (attachWhenReady())
|
|
obs.disconnect();
|
|
});
|
|
|
|
obs.observe(host, { childList: true, subtree: true });
|
|
})();
|
|
`;
|
|
const errorCSS = `
|
|
:host {
|
|
--preview-width: 240px;
|
|
--preview-height: 180px;
|
|
--base-width: 1200px;
|
|
--base-height: 900px;
|
|
--z-base: 999999998;
|
|
--error-pip-left: auto;
|
|
--error-pip-top: auto;
|
|
--error-pip-right: 5px;
|
|
--error-pip-bottom: 5px;
|
|
--error-pip-origin: bottom right;
|
|
--app-preview-left: auto;
|
|
--app-preview-top: auto;
|
|
--app-preview-right: 5px;
|
|
--app-preview-bottom: 5px;
|
|
all: initial;
|
|
display: contents;
|
|
}
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
#frame {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
border: none;
|
|
z-index: var(--z-base);
|
|
}
|
|
#frame[inert] {
|
|
left: var(--error-pip-left);
|
|
top: var(--error-pip-top);
|
|
right: var(--error-pip-right);
|
|
bottom: var(--error-pip-bottom);
|
|
width: var(--base-width);
|
|
height: var(--base-height);
|
|
transform: scale(calc(240 / 1200));
|
|
transform-origin: var(--error-pip-origin);
|
|
overflow: hidden;
|
|
border-radius: calc(1200 * 8px / 240);
|
|
}
|
|
#preview {
|
|
position: fixed;
|
|
left: var(--app-preview-left);
|
|
top: var(--app-preview-top);
|
|
right: var(--app-preview-right);
|
|
bottom: var(--app-preview-bottom);
|
|
width: var(--preview-width);
|
|
height: var(--preview-height);
|
|
overflow: hidden;
|
|
border-radius: 6px;
|
|
pointer-events: none;
|
|
z-index: var(--z-base);
|
|
background: white;
|
|
display: none;
|
|
}
|
|
#preview iframe {
|
|
transform-origin: var(--error-pip-origin);
|
|
}
|
|
#frame:not([inert]) + #preview {
|
|
display: block;
|
|
}
|
|
#toggle {
|
|
position: fixed;
|
|
left: var(--app-preview-left);
|
|
top: var(--app-preview-top);
|
|
right: calc(var(--app-preview-right) - 3px);
|
|
bottom: calc(var(--app-preview-bottom) - 3px);
|
|
width: var(--preview-width);
|
|
height: var(--preview-height);
|
|
background: none;
|
|
border: 3px solid #00DC82;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
opacity: 0.8;
|
|
transition: opacity 0.2s, box-shadow 0.2s;
|
|
z-index: calc(var(--z-base) + 1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
#toggle:hover,
|
|
#toggle:focus {
|
|
opacity: 1;
|
|
box-shadow: 0 0 20px rgba(0, 220, 130, 0.6);
|
|
}
|
|
#toggle:focus-visible {
|
|
outline: 3px solid #00DC82;
|
|
outline-offset: 0;
|
|
box-shadow: 0 0 24px rgba(0, 220, 130, 0.8);
|
|
}
|
|
#frame[inert] ~ #toggle {
|
|
left: var(--error-pip-left);
|
|
top: var(--error-pip-top);
|
|
right: calc(var(--error-pip-right) - 3px);
|
|
bottom: calc(var(--error-pip-bottom) - 3px);
|
|
cursor: grab;
|
|
}
|
|
:host(.dragging) #frame[inert] ~ #toggle {
|
|
cursor: grabbing;
|
|
}
|
|
#frame:not([inert]) ~ #toggle,
|
|
#frame:not([inert]) + #preview {
|
|
cursor: grab;
|
|
}
|
|
:host(.dragging-preview) #frame:not([inert]) ~ #toggle,
|
|
:host(.dragging-preview) #frame:not([inert]) + #preview {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
#pip-close {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
background: rgba(0, 0, 0, 0.75);
|
|
color: #fff;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
pointer-events: auto;
|
|
}
|
|
#pip-close:focus-visible {
|
|
outline: 2px solid #00DC82;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
#pip-restore {
|
|
position: fixed;
|
|
right: 16px;
|
|
bottom: 16px;
|
|
padding: 8px 14px;
|
|
border-radius: 999px;
|
|
border: 2px solid #00DC82;
|
|
background: #111;
|
|
color: #fff;
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
|
|
font-size: 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
z-index: calc(var(--z-base) + 2);
|
|
cursor: grab;
|
|
}
|
|
#pip-restore:focus-visible {
|
|
outline: 2px solid #00DC82;
|
|
outline-offset: 2px;
|
|
}
|
|
:host(.dragging-restore) #pip-restore {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
#frame[hidden],
|
|
#toggle[hidden],
|
|
#preview[hidden],
|
|
#pip-restore[hidden],
|
|
#pip-close[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
#toggle {
|
|
transition: none;
|
|
}
|
|
}
|
|
`;
|
|
function webComponentScript(base64HTML, startMinimized) {
|
|
return `
|
|
(function () {
|
|
try {
|
|
// =========================
|
|
// Host + Shadow
|
|
// =========================
|
|
const host = document.querySelector('nuxt-error-overlay');
|
|
if (!host)
|
|
return;
|
|
const shadow = host.attachShadow({ mode: 'open' });
|
|
|
|
// =========================
|
|
// DOM helpers
|
|
// =========================
|
|
const el = (tag) => document.createElement(tag);
|
|
const on = (node, type, fn, opts) => node.addEventListener(type, fn, opts);
|
|
const hide = (node, v) => node.toggleAttribute('hidden', !!v);
|
|
const setVar = (name, value) => host.style.setProperty(name, value);
|
|
const unsetVar = (name) => host.style.removeProperty(name);
|
|
|
|
// =========================
|
|
// Create DOM
|
|
// =========================
|
|
const style = el('style');
|
|
style.textContent = ${JSON.stringify(errorCSS)};
|
|
|
|
const iframe = el('iframe');
|
|
iframe.id = 'frame';
|
|
iframe.src = 'data:text/html;base64,${base64HTML}';
|
|
iframe.title = 'Detailed error stack trace';
|
|
iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
|
|
|
|
const preview = el('div');
|
|
preview.id = 'preview';
|
|
|
|
const toggle = el('div');
|
|
toggle.id = 'toggle';
|
|
toggle.setAttribute('aria-expanded', 'true');
|
|
toggle.setAttribute('role', 'button');
|
|
toggle.setAttribute('tabindex', '0');
|
|
toggle.innerHTML = '<span class="sr-only">Toggle detailed error view</span>';
|
|
|
|
const liveRegion = el('div');
|
|
liveRegion.setAttribute('role', 'status');
|
|
liveRegion.setAttribute('aria-live', 'polite');
|
|
liveRegion.className = 'sr-only';
|
|
|
|
const pipCloseButton = el('button');
|
|
pipCloseButton.id = 'pip-close';
|
|
pipCloseButton.setAttribute('type', 'button');
|
|
pipCloseButton.setAttribute('aria-label', 'Hide error preview overlay');
|
|
pipCloseButton.innerHTML = '×';
|
|
pipCloseButton.hidden = true;
|
|
toggle.appendChild(pipCloseButton);
|
|
|
|
const pipRestoreButton = el('button');
|
|
pipRestoreButton.id = 'pip-restore';
|
|
pipRestoreButton.setAttribute('type', 'button');
|
|
pipRestoreButton.setAttribute('aria-label', 'Show error overlay');
|
|
pipRestoreButton.innerHTML = '<span aria-hidden="true">⟲</span><span>Show error overlay</span>';
|
|
pipRestoreButton.hidden = true;
|
|
|
|
// Order matters: #frame + #preview adjacency
|
|
shadow.appendChild(style);
|
|
shadow.appendChild(liveRegion);
|
|
shadow.appendChild(iframe);
|
|
shadow.appendChild(preview);
|
|
shadow.appendChild(toggle);
|
|
shadow.appendChild(pipRestoreButton);
|
|
|
|
// =========================
|
|
// Constants / keys
|
|
// =========================
|
|
const POS_KEYS = {
|
|
position: 'nuxt-error-overlay:position',
|
|
hiddenPretty: 'nuxt-error-overlay:error-pip:hidden',
|
|
hiddenPreview: 'nuxt-error-overlay:app-preview:hidden'
|
|
};
|
|
|
|
const CSS_VARS = {
|
|
pip: {
|
|
left: '--error-pip-left',
|
|
top: '--error-pip-top',
|
|
right: '--error-pip-right',
|
|
bottom: '--error-pip-bottom'
|
|
},
|
|
preview: {
|
|
left: '--app-preview-left',
|
|
top: '--app-preview-top',
|
|
right: '--app-preview-right',
|
|
bottom: '--app-preview-bottom'
|
|
}
|
|
};
|
|
|
|
const MIN_GAP = 5;
|
|
const DRAG_THRESHOLD = 2;
|
|
|
|
// =========================
|
|
// Local storage safe access + state
|
|
// =========================
|
|
let storageReady = true;
|
|
let isPrettyHidden = false;
|
|
let isPreviewHidden = false;
|
|
|
|
const safeGet = (k) => {
|
|
try {
|
|
return localStorage.getItem(k);
|
|
} catch {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const safeSet = (k, v) => {
|
|
if (!storageReady)
|
|
return;
|
|
try {
|
|
localStorage.setItem(k, v);
|
|
} catch {}
|
|
};
|
|
|
|
// =========================
|
|
// Sizing helpers
|
|
// =========================
|
|
const vvSize = () => {
|
|
const v = window.visualViewport;
|
|
return v ? { w: v.width, h: v.height } : { w: window.innerWidth, h: window.innerHeight };
|
|
};
|
|
|
|
const previewSize = () => {
|
|
const styles = getComputedStyle(host);
|
|
const w = parseFloat(styles.getPropertyValue('--preview-width')) || 240;
|
|
const h = parseFloat(styles.getPropertyValue('--preview-height')) || 180;
|
|
return { w, h };
|
|
};
|
|
|
|
const sizeForTarget = (target) => {
|
|
if (!target)
|
|
return previewSize();
|
|
const rect = target.getBoundingClientRect();
|
|
if (rect.width && rect.height)
|
|
return { w: rect.width, h: rect.height };
|
|
return previewSize();
|
|
};
|
|
|
|
// =========================
|
|
// Dock model + offset/alignment calculations
|
|
// =========================
|
|
const dock = { edge: null, offset: null, align: null, gap: null };
|
|
|
|
const maxOffsetFor = (edge, size) => {
|
|
const vv = vvSize();
|
|
if (edge === 'left' || edge === 'right')
|
|
return Math.max(MIN_GAP, vv.h - size.h - MIN_GAP);
|
|
return Math.max(MIN_GAP, vv.w - size.w - MIN_GAP);
|
|
};
|
|
|
|
const clampOffset = (edge, value, size) => {
|
|
const max = maxOffsetFor(edge, size);
|
|
return Math.min(Math.max(value, MIN_GAP), max);
|
|
};
|
|
|
|
const updateDockAlignment = (size) => {
|
|
if (!dock.edge || dock.offset == null)
|
|
return;
|
|
const max = maxOffsetFor(dock.edge, size);
|
|
if (dock.offset <= max / 2) {
|
|
dock.align = 'start';
|
|
dock.gap = dock.offset;
|
|
} else {
|
|
dock.align = 'end';
|
|
dock.gap = Math.max(0, max - dock.offset);
|
|
}
|
|
};
|
|
|
|
const appliedOffsetFor = (size) => {
|
|
if (!dock.edge || dock.offset == null)
|
|
return null;
|
|
const max = maxOffsetFor(dock.edge, size);
|
|
|
|
if (dock.align === 'end' && typeof dock.gap === 'number') {
|
|
return clampOffset(dock.edge, max - dock.gap, size);
|
|
}
|
|
if (dock.align === 'start' && typeof dock.gap === 'number') {
|
|
return clampOffset(dock.edge, dock.gap, size);
|
|
}
|
|
return clampOffset(dock.edge, dock.offset, size);
|
|
};
|
|
|
|
const nearestEdgeAt = (x, y) => {
|
|
const { w, h } = vvSize();
|
|
const d = { left: x, right: w - x, top: y, bottom: h - y };
|
|
return Object.keys(d).reduce((a, b) => (d[a] < d[b] ? a : b));
|
|
};
|
|
|
|
const cornerDefaultDock = () => {
|
|
const vv = vvSize();
|
|
const size = previewSize();
|
|
const offset = Math.max(MIN_GAP, vv.w - size.w - MIN_GAP);
|
|
return { edge: 'bottom', offset };
|
|
};
|
|
|
|
const currentTransformOrigin = () => {
|
|
if (!dock.edge) return null;
|
|
if (dock.edge === 'left' || dock.edge === 'top')
|
|
return 'top left';
|
|
if (dock.edge === 'right')
|
|
return 'top right';
|
|
return 'bottom left';
|
|
};
|
|
|
|
// =========================
|
|
// Persist / load dock
|
|
// =========================
|
|
const loadDock = () => {
|
|
const raw = safeGet(POS_KEYS.position);
|
|
if (!raw)
|
|
return;
|
|
try {
|
|
const parsed = JSON.parse(raw);
|
|
const { edge, offset, align, gap } = parsed || {};
|
|
if (!['left', 'right', 'top', 'bottom'].includes(edge))
|
|
return;
|
|
if (typeof offset !== 'number')
|
|
return;
|
|
|
|
dock.edge = edge;
|
|
dock.offset = clampOffset(edge, offset, previewSize());
|
|
dock.align = align === 'start' || align === 'end' ? align : null;
|
|
dock.gap = typeof gap === 'number' ? gap : null;
|
|
|
|
if (!dock.align || dock.gap == null)
|
|
updateDockAlignment(previewSize());
|
|
} catch {}
|
|
};
|
|
|
|
const persistDock = () => {
|
|
if (!dock.edge || dock.offset == null)
|
|
return;
|
|
safeSet(POS_KEYS.position, JSON.stringify({
|
|
edge: dock.edge,
|
|
offset: dock.offset,
|
|
align: dock.align,
|
|
gap: dock.gap
|
|
}));
|
|
};
|
|
|
|
// =========================
|
|
// Apply dock
|
|
// =========================
|
|
const dockToVars = (vars) => ({
|
|
set: (side, v) => host.style.setProperty(vars[side], v),
|
|
clear: (side) => host.style.removeProperty(vars[side])
|
|
});
|
|
|
|
const dockToEl = (node) => ({
|
|
set: (side, v) => { node.style[side] = v; },
|
|
clear: (side) => { node.style[side] = ''; }
|
|
});
|
|
|
|
const applyDock = (target, size, opts) => {
|
|
if (!dock.edge || dock.offset == null) {
|
|
target.clear('left');
|
|
target.clear('top');
|
|
target.clear('right');
|
|
target.clear('bottom');
|
|
return;
|
|
}
|
|
|
|
target.set('left', 'auto');
|
|
target.set('top', 'auto');
|
|
target.set('right', 'auto');
|
|
target.set('bottom', 'auto');
|
|
|
|
const applied = appliedOffsetFor(size);
|
|
|
|
if (dock.edge === 'left') {
|
|
target.set('left', MIN_GAP + 'px');
|
|
target.set('top', applied + 'px');
|
|
} else if (dock.edge === 'right') {
|
|
target.set('right', MIN_GAP + 'px');
|
|
target.set('top', applied + 'px');
|
|
} else if (dock.edge === 'top') {
|
|
target.set('top', MIN_GAP + 'px');
|
|
target.set('left', applied + 'px');
|
|
} else {
|
|
target.set('bottom', MIN_GAP + 'px');
|
|
target.set('left', applied + 'px');
|
|
}
|
|
|
|
if (!opts || opts.persist !== false)
|
|
persistDock();
|
|
};
|
|
|
|
const applyDockAll = (opts) => {
|
|
applyDock(dockToVars(CSS_VARS.pip), previewSize(), opts);
|
|
applyDock(dockToVars(CSS_VARS.preview), previewSize(), opts);
|
|
applyDock(dockToEl(pipRestoreButton), sizeForTarget(pipRestoreButton), opts);
|
|
};
|
|
|
|
const repaintToDock = () => {
|
|
if (!dock.edge || dock.offset == null)
|
|
return;
|
|
const origin = currentTransformOrigin();
|
|
if (origin)
|
|
setVar('--error-pip-origin', origin);
|
|
else
|
|
unsetVar('--error-pip-origin');
|
|
applyDockAll({ persist: false });
|
|
};
|
|
|
|
// =========================
|
|
// Hidden state + UI
|
|
// =========================
|
|
const loadHidden = () => {
|
|
const rawPretty = safeGet(POS_KEYS.hiddenPretty);
|
|
if (rawPretty != null)
|
|
isPrettyHidden = rawPretty === '1' || rawPretty === 'true';
|
|
const rawPreview = safeGet(POS_KEYS.hiddenPreview);
|
|
if (rawPreview != null)
|
|
isPreviewHidden = rawPreview === '1' || rawPreview === 'true';
|
|
};
|
|
|
|
const setPrettyHidden = (v) => {
|
|
isPrettyHidden = !!v;
|
|
safeSet(POS_KEYS.hiddenPretty, isPrettyHidden ? '1' : '0');
|
|
updateUI();
|
|
};
|
|
|
|
const setPreviewHidden = (v) => {
|
|
isPreviewHidden = !!v;
|
|
safeSet(POS_KEYS.hiddenPreview, isPreviewHidden ? '1' : '0');
|
|
updateUI();
|
|
};
|
|
|
|
const isMinimized = () => iframe.hasAttribute('inert');
|
|
|
|
const setMinimized = (v) => {
|
|
if (v) {
|
|
iframe.setAttribute('inert', '');
|
|
toggle.setAttribute('aria-expanded', 'false');
|
|
} else {
|
|
iframe.removeAttribute('inert');
|
|
toggle.setAttribute('aria-expanded', 'true');
|
|
}
|
|
};
|
|
|
|
const setRestoreLabel = (kind) => {
|
|
if (kind === 'pretty') {
|
|
pipRestoreButton.innerHTML = '<span aria-hidden="true">⟲</span><span>Show error overlay</span>';
|
|
pipRestoreButton.setAttribute('aria-label', 'Show error overlay');
|
|
} else {
|
|
pipRestoreButton.innerHTML = '<span aria-hidden="true">⟲</span><span>Show error page</span>';
|
|
pipRestoreButton.setAttribute('aria-label', 'Show error page');
|
|
}
|
|
};
|
|
|
|
const updateUI = () => {
|
|
const minimized = isMinimized();
|
|
const showPiP = minimized && !isPrettyHidden;
|
|
const showPreview = !minimized && !isPreviewHidden;
|
|
const pipHiddenByUser = minimized && isPrettyHidden;
|
|
const previewHiddenByUser = !minimized && isPreviewHidden;
|
|
const showToggle = minimized ? showPiP : showPreview;
|
|
const showRestore = pipHiddenByUser || previewHiddenByUser;
|
|
|
|
hide(iframe, pipHiddenByUser);
|
|
hide(preview, !showPreview);
|
|
hide(toggle, !showToggle);
|
|
hide(pipCloseButton, !showToggle);
|
|
hide(pipRestoreButton, !showRestore);
|
|
|
|
pipCloseButton.setAttribute('aria-label', minimized ? 'Hide error overlay' : 'Hide error page preview');
|
|
|
|
if (pipHiddenByUser)
|
|
setRestoreLabel('pretty');
|
|
else if (previewHiddenByUser)
|
|
setRestoreLabel('preview');
|
|
|
|
host.classList.toggle('pip-hidden', isPrettyHidden);
|
|
host.classList.toggle('preview-hidden', isPreviewHidden);
|
|
};
|
|
|
|
// =========================
|
|
// Preview snapshot
|
|
// =========================
|
|
const updatePreview = () => {
|
|
try {
|
|
let previewIframe = preview.querySelector('iframe');
|
|
if (!previewIframe) {
|
|
previewIframe = el('iframe');
|
|
previewIframe.style.cssText = 'width: 1200px; height: 900px; transform: scale(0.2); transform-origin: top left; border: none;';
|
|
previewIframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
|
|
preview.appendChild(previewIframe);
|
|
}
|
|
|
|
const doctype = document.doctype ? '<!DOCTYPE ' + document.doctype.name + '>' : '';
|
|
const cleanedHTML = document.documentElement.outerHTML
|
|
.replace(/<nuxt-error-overlay[^>]*>.*?<\\/nuxt-error-overlay>/gs, '')
|
|
.replace(/<script[^>]*>.*?<\\/script>/gs, '');
|
|
|
|
const iframeDoc = previewIframe.contentDocument || previewIframe.contentWindow.document;
|
|
iframeDoc.open();
|
|
iframeDoc.write(doctype + cleanedHTML);
|
|
iframeDoc.close();
|
|
} catch (err) {
|
|
console.error('Failed to update preview:', err);
|
|
}
|
|
};
|
|
|
|
// =========================
|
|
// View toggling
|
|
// =========================
|
|
const toggleView = () => {
|
|
if (isMinimized()) {
|
|
updatePreview();
|
|
setMinimized(false);
|
|
liveRegion.textContent = 'Showing detailed error view';
|
|
setTimeout(() => {
|
|
try {
|
|
iframe.contentWindow.focus();
|
|
} catch {}
|
|
}, 100);
|
|
} else {
|
|
setMinimized(true);
|
|
liveRegion.textContent = 'Showing error page';
|
|
repaintToDock();
|
|
void iframe.offsetWidth;
|
|
}
|
|
updateUI();
|
|
};
|
|
|
|
// =========================
|
|
// Dragging (unified, rAF throttled)
|
|
// =========================
|
|
let drag = null;
|
|
let rafId = null;
|
|
let suppressToggleClick = false;
|
|
let suppressRestoreClick = false;
|
|
|
|
const beginDrag = (e) => {
|
|
if (drag)
|
|
return;
|
|
|
|
if (!dock.edge || dock.offset == null) {
|
|
const def = cornerDefaultDock();
|
|
dock.edge = def.edge;
|
|
dock.offset = def.offset;
|
|
updateDockAlignment(previewSize());
|
|
}
|
|
|
|
const isRestoreTarget = e.currentTarget === pipRestoreButton;
|
|
|
|
drag = {
|
|
kind: isRestoreTarget ? 'restore' : (isMinimized() ? 'pip' : 'preview'),
|
|
pointerId: e.pointerId,
|
|
startX: e.clientX,
|
|
startY: e.clientY,
|
|
lastX: e.clientX,
|
|
lastY: e.clientY,
|
|
moved: false,
|
|
target: e.currentTarget
|
|
};
|
|
|
|
drag.target.setPointerCapture(e.pointerId);
|
|
|
|
if (drag.kind === 'restore')
|
|
host.classList.add('dragging-restore');
|
|
else
|
|
host.classList.add(drag.kind === 'pip' ? 'dragging' : 'dragging-preview');
|
|
|
|
e.preventDefault();
|
|
};
|
|
|
|
const moveDrag = (e) => {
|
|
if (!drag || drag.pointerId !== e.pointerId)
|
|
return;
|
|
|
|
drag.lastX = e.clientX;
|
|
drag.lastY = e.clientY;
|
|
|
|
const dx = drag.lastX - drag.startX;
|
|
const dy = drag.lastY - drag.startY;
|
|
|
|
if (!drag.moved && (Math.abs(dx) > DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD)) {
|
|
drag.moved = true;
|
|
}
|
|
|
|
if (!drag.moved)
|
|
return;
|
|
if (rafId)
|
|
return;
|
|
|
|
rafId = requestAnimationFrame(() => {
|
|
rafId = null;
|
|
|
|
const edge = nearestEdgeAt(drag.lastX, drag.lastY);
|
|
const size = sizeForTarget(drag.target);
|
|
|
|
let offset;
|
|
if (edge === 'left' || edge === 'right') {
|
|
const top = drag.lastY - (size.h / 2);
|
|
offset = clampOffset(edge, Math.round(top), size);
|
|
} else {
|
|
const left = drag.lastX - (size.w / 2);
|
|
offset = clampOffset(edge, Math.round(left), size);
|
|
}
|
|
|
|
dock.edge = edge;
|
|
dock.offset = offset;
|
|
updateDockAlignment(size);
|
|
|
|
const origin = currentTransformOrigin();
|
|
setVar('--error-pip-origin', origin || 'bottom right');
|
|
|
|
applyDockAll({ persist: false });
|
|
});
|
|
};
|
|
|
|
const endDrag = (e) => {
|
|
if (!drag || drag.pointerId !== e.pointerId)
|
|
return;
|
|
|
|
const endedKind = drag.kind;
|
|
drag.target.releasePointerCapture(e.pointerId);
|
|
|
|
if (endedKind === 'restore')
|
|
host.classList.remove('dragging-restore');
|
|
else
|
|
host.classList.remove(endedKind === 'pip' ? 'dragging' : 'dragging-preview');
|
|
|
|
const didMove = drag.moved;
|
|
drag = null;
|
|
|
|
if (didMove) {
|
|
persistDock();
|
|
if (endedKind === 'restore')
|
|
suppressRestoreClick = true;
|
|
else
|
|
suppressToggleClick = true;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
};
|
|
|
|
const bindDragTarget = (node) => {
|
|
on(node, 'pointerdown', beginDrag);
|
|
on(node, 'pointermove', moveDrag);
|
|
on(node, 'pointerup', endDrag);
|
|
on(node, 'pointercancel', endDrag);
|
|
};
|
|
|
|
bindDragTarget(toggle);
|
|
bindDragTarget(pipRestoreButton);
|
|
|
|
// =========================
|
|
// Events (toggle / close / restore)
|
|
// =========================
|
|
on(toggle, 'click', (e) => {
|
|
if (suppressToggleClick) {
|
|
e.preventDefault();
|
|
suppressToggleClick = false;
|
|
return;
|
|
}
|
|
toggleView();
|
|
});
|
|
|
|
on(toggle, 'keydown', (e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
toggleView();
|
|
}
|
|
});
|
|
|
|
on(pipCloseButton, 'click', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (isMinimized())
|
|
setPrettyHidden(true);
|
|
else
|
|
setPreviewHidden(true);
|
|
});
|
|
|
|
on(pipCloseButton, 'pointerdown', (e) => {
|
|
e.stopPropagation();
|
|
});
|
|
|
|
on(pipRestoreButton, 'click', (e) => {
|
|
if (suppressRestoreClick) {
|
|
e.preventDefault();
|
|
suppressRestoreClick = false;
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (isMinimized())
|
|
setPrettyHidden(false);
|
|
else
|
|
setPreviewHidden(false);
|
|
});
|
|
|
|
// =========================
|
|
// Lifecycle: load / sync / repaint
|
|
// =========================
|
|
const loadState = () => {
|
|
loadDock();
|
|
loadHidden();
|
|
|
|
if (isPrettyHidden && !isMinimized())
|
|
setMinimized(true);
|
|
|
|
updateUI();
|
|
repaintToDock();
|
|
};
|
|
|
|
loadState();
|
|
|
|
on(window, 'storage-ready', () => {
|
|
storageReady = true;
|
|
loadState();
|
|
});
|
|
|
|
const onViewportChange = () => repaintToDock();
|
|
|
|
on(window, 'resize', onViewportChange);
|
|
|
|
if (window.visualViewport) {
|
|
on(window.visualViewport, 'resize', onViewportChange);
|
|
on(window.visualViewport, 'scroll', onViewportChange);
|
|
}
|
|
|
|
// initial preview
|
|
setTimeout(updatePreview, 100);
|
|
|
|
// initial minimized option
|
|
if (${startMinimized}) {
|
|
setMinimized(true);
|
|
repaintToDock();
|
|
void iframe.offsetWidth;
|
|
updateUI();
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to initialize Nuxt error overlay:', err);
|
|
}
|
|
})();
|
|
`;
|
|
}
|
|
export function generateErrorOverlayHTML(html, options) {
|
|
const nonce = Array.from(crypto.getRandomValues(new Uint8Array(16)), (b) => b.toString(16).padStart(2, "0")).join("");
|
|
const errorPage = html.replace("<head>", `<head><script>${iframeStorageBridge(nonce)}<\/script>`);
|
|
const base64HTML = Buffer.from(errorPage, "utf8").toString("base64");
|
|
return `
|
|
<script>${parentStorageBridge(nonce)}<\/script>
|
|
<nuxt-error-overlay></nuxt-error-overlay>
|
|
<script>${webComponentScript(base64HTML, options?.startMinimized ?? false)}<\/script>
|
|
`;
|
|
}
|