one
Version:
One is a new React Framework that makes Vite serve both native and web.
854 lines (768 loc) • 32.6 kB
JavaScript
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: !0 });
}, __copyProps = (to, from, except, desc) => {
if (from && typeof from == "object" || typeof from == "function")
for (let key of __getOwnPropNames(from))
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
var DevHead_exports = {};
__export(DevHead_exports, {
DevHead: () => DevHead
});
module.exports = __toCommonJS(DevHead_exports);
var import_constants = require("../constants"), import_jsx_runtime = require("react/jsx-runtime");
const ROUTE_HMR_SCRIPT = 'import { createHotContext } from "/@vite/client"; const hot = createHotContext("/__one_route_hmr"); hot.on("one:route-update", (data) => { if (window.__oneRouteCache) { if (data?.file) { window.__oneRouteCache.clearFile(data.file); } else { window.__oneRouteCache.clear(); } } window.dispatchEvent(new CustomEvent("one-hmr-update")); });', LOADER_HMR_SCRIPT = 'import { createHotContext } from "/@vite/client"; const hot = createHotContext("/__one_loader_hmr"); hot.on("one:loader-data-update", async (data) => { if (data?.routePaths && window.__oneRefetchLoader) { const currentPath = window.location.pathname.replace(/\\/$/, "") || "/"; for (const routePath of data.routePaths) { if (routePath === currentPath) { try { await window.__oneRefetchLoader(routePath); } catch (err) { console.error("[one] Error refetching loader:", err); } } } } });', REACT_REFRESH_SCRIPT = 'import { injectIntoGlobalHook } from "/@react-refresh"; injectIntoGlobalHook(window); window.$RefreshReg$ = () => {}; window.$RefreshSig$ = () => (type) => type;', ONE_DEVTOOLS_SCRIPT = `
(function() {
try {
var host = null;
var shadow = null;
var spotlight = null;
var panel = null;
var activeTab = 'seo';
var isDragging = false;
var dragOffset = { x: 0, y: 0 };
var panelPos = { x: 20, y: 20 };
var snappedEdge = { h: null, v: null };
var LOGO_SVG = '<svg width="24" height="24" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#FCD34D" stroke="#222" stroke-width="2"/><circle cx="50" cy="35" r="16" fill="white"/><text x="50" y="41" text-anchor="middle" font-family="system-ui" font-size="16" font-weight="bold" fill="#222">1</text></svg>';
function escapeHtml(str) {
if (!str) return '';
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
function createHost() {
if (host) return;
host = document.createElement('div');
host.id = 'one-devtools';
shadow = host.attachShadow({ mode: 'open' });
var css = \`
* { box-sizing: border-box; margin: 0; padding: 0; }
.spotlight {
position: fixed;
inset: 0;
z-index: 100000;
display: none;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
background: rgba(0,0,0,0.4);
opacity: 0;
transition: opacity 0.12s ease-out;
}
.spotlight.visible { display: flex; opacity: 1; }
.spotlight-box {
background: #1a1a1a;
border-radius: 12px;
width: 320px;
max-width: 90vw;
overflow: hidden;
box-shadow: 0 16px 48px rgba(0,0,0,0.5);
transform: scale(0.96);
opacity: 0;
transition: transform 0.12s ease-out, opacity 0.12s ease-out;
}
.spotlight.visible .spotlight-box { transform: scale(1); opacity: 1; }
.spotlight-header {
display: flex;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #252525;
gap: 10px;
}
.spotlight-header svg { width: 20px; height: 20px; flex-shrink: 0; }
.spotlight-header-title { font: 13px system-ui, sans-serif; color: #ccc; flex: 1; }
.spotlight-header-version { font: 11px system-ui, sans-serif; color: #666; }
.spotlight-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
color: #ccc;
font: 13px system-ui, sans-serif;
cursor: pointer;
transition: background 0.1s;
border-bottom: 1px solid #252525;
}
.spotlight-item:last-child { border-bottom: none; }
.spotlight-item:hover { background: #252525; color: #fff; }
.spotlight-item .key {
background: #333;
color: #888;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
margin-left: auto;
}
.panel {
position: fixed;
width: 420px;
max-width: calc(100vw - 40px);
max-height: calc(100vh - 40px);
background: #161616;
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
z-index: 99998;
display: none;
flex-direction: column;
overflow: hidden;
font: 13px system-ui, sans-serif;
color: #ccc;
}
.panel.visible { display: flex; }
.panel-header {
display: flex;
align-items: center;
padding: 8px 12px;
background: #1a1a1a;
cursor: grab;
user-select: none;
gap: 8px;
}
.panel-header:active { cursor: grabbing; }
.panel-header svg { width: 18px; height: 18px; }
.panel-title { font-weight: 500; color: #999; font-size: 12px; flex: 1; }
.panel-close {
background: none;
border: none;
color: #666;
cursor: pointer;
padding: 4px;
font-size: 16px;
line-height: 1;
}
.panel-close:hover { color: #fff; }
.tabs {
display: flex;
background: #1a1a1a;
padding: 0 8px;
gap: 2px;
overflow-x: auto;
}
.tab {
padding: 8px 12px;
background: none;
border: none;
color: #666;
font: 12px system-ui, sans-serif;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.1s;
}
.tab:hover { color: #999; }
.tab.active { color: #fff; border-bottom-color: #666; }
.content {
flex: 1;
overflow-y: auto;
padding: 12px;
min-height: 200px;
max-height: calc(100vh - 140px);
}
.section { margin-bottom: 12px; }
.section-title { font-size: 11px; color: #666; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.info-row {
display: flex;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid #222;
}
.info-row:last-child { border-bottom: none; }
.info-label { color: #666; font-size: 11px; width: 90px; flex-shrink: 0; padding-top: 1px; }
.info-value { color: #ccc; font-family: monospace; font-size: 12px; word-break: break-word; line-height: 1.4; flex: 1; }
.badge {
display: inline-block;
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
text-transform: uppercase;
}
.badge-error { background: #3a2020; color: #f87171; }
.badge-warn { background: #3a3520; color: #fbbf24; }
.badge-info { background: #202a3a; color: #60a5fa; }
.badge-success { background: #1a3a20; color: #4ade80; }
.empty { text-align: center; color: #555; padding: 24px; }
.error-item {
background: #1e1e1e;
border-radius: 6px;
padding: 10px;
margin-bottom: 8px;
border-left: 3px solid #666;
}
.error-item.error { border-left-color: #f87171; }
.error-msg { color: #f87171; font-family: monospace; font-size: 12px; margin-top: 6px; }
.timing-bar {
height: 16px;
background: #252525;
border-radius: 4px;
overflow: hidden;
display: flex;
margin: 4px 0;
}
.timing-segment { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; }
.timing-module { background: #555; }
.timing-exec { background: #888; }
.preview-card {
background: #1e1e1e;
border-radius: 6px;
padding: 10px;
margin-bottom: 10px;
}
.preview-title { font-size: 11px; color: #666; margin-bottom: 6px; }
.issue-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
font-size: 12px;
}
.issue-icon { font-size: 10px; }
\`;
shadow.innerHTML = '<style>' + css + '</style><div class="spotlight" id="spotlight"><div class="spotlight-box" id="spotlight-box"></div></div><div class="panel" id="panel"></div>';
document.body.appendChild(host);
setupSpotlight();
setupPanel();
setupKeyboard();
}
function setupSpotlight() {
spotlight = shadow.getElementById('spotlight');
var box = shadow.getElementById('spotlight-box');
var items = [
{ id: 'seo', name: 'SEO Preview', key: '\u2325S' },
{ id: 'route', name: 'Route Info', key: '\u2325R' },
{ id: 'loader', name: 'Loader Timing', key: '\u2325L' },
{ id: 'errors', name: 'Errors', key: '\u2325E' },
];
var header = '<div class="spotlight-header">' + LOGO_SVG + '<span class="spotlight-header-title">Dev Tools</span><span class="spotlight-header-version">v1.2.57</span></div>';
box.innerHTML = header + items.map(function(item) {
return '<div class="spotlight-item" data-tab="' + item.id + '"><span>' + item.name + '</span><span class="key">' + item.key + '</span></div>';
}).join('');
box.addEventListener('click', function(e) {
var item = e.target.closest('.spotlight-item');
if (item) {
activeTab = item.dataset.tab;
hideSpotlight();
showPanel();
}
});
spotlight.addEventListener('click', function(e) {
if (e.target === spotlight) hideSpotlight();
});
}
function setupPanel() {
panel = shadow.getElementById('panel');
panel.innerHTML = '<div class="panel-header" id="panel-header">' + LOGO_SVG + '<span class="panel-title">DevTools</span><button class="panel-close" id="panel-close">\xD7</button></div><div class="tabs" id="tabs"><button class="tab active" data-tab="seo">SEO</button><button class="tab" data-tab="route">Route</button><button class="tab" data-tab="loader">Loader</button><button class="tab" data-tab="errors">Errors</button></div><div class="content" id="content"></div>';
shadow.getElementById('panel-close').addEventListener('click', hidePanel);
var tabs = shadow.getElementById('tabs');
tabs.addEventListener('click', function(e) {
var tab = e.target.closest('.tab');
if (tab) {
activeTab = tab.dataset.tab;
updateTabs();
updateContent();
}
});
setupDrag();
}
function setupDrag() {
var header = shadow.getElementById('panel-header');
header.addEventListener('mousedown', function(e) {
if (e.target.closest('.panel-close')) return;
isDragging = true;
var rect = panel.getBoundingClientRect();
dragOffset.x = e.clientX - rect.left;
dragOffset.y = e.clientY - rect.top;
// Store current position before resetting snap state
panelPos.x = rect.left;
panelPos.y = rect.top;
snappedEdge = { h: null, v: null };
});
document.addEventListener('mousemove', function(e) {
if (!isDragging) return;
var x = e.clientX - dragOffset.x;
var y = e.clientY - dragOffset.y;
var snapDist = 20;
var w = window.innerWidth;
var h = window.innerHeight;
var pw = panel.offsetWidth;
var ph = panel.offsetHeight;
var pad = 10;
var snapH = null;
var snapV = null;
if (x < snapDist) { snapH = 'left'; }
else if (x + pw > w - snapDist) { snapH = 'right'; }
if (y < snapDist) { snapV = 'top'; }
else if (y + ph > h - snapDist) { snapV = 'bottom'; }
snappedEdge = { h: snapH, v: snapV };
// Apply horizontal positioning
if (snapH === 'left') {
panel.style.left = pad + 'px';
panel.style.right = 'auto';
} else if (snapH === 'right') {
panel.style.left = 'auto';
panel.style.right = pad + 'px';
} else {
panel.style.left = x + 'px';
panel.style.right = 'auto';
panelPos.x = x;
}
// Apply vertical positioning
if (snapV === 'top') {
panel.style.top = pad + 'px';
panel.style.bottom = 'auto';
} else if (snapV === 'bottom') {
panel.style.top = 'auto';
panel.style.bottom = pad + 'px';
} else {
panel.style.top = y + 'px';
panel.style.bottom = 'auto';
panelPos.y = y;
}
});
document.addEventListener('mouseup', function() {
isDragging = false;
});
}
function setupKeyboard() {
document.addEventListener('keydown', function(e) {
if (e.altKey && e.code === 'Space') {
e.preventDefault();
toggleSpotlight();
} else if (e.altKey) {
var tabMap = { KeyS: 'seo', KeyR: 'route', KeyL: 'loader', KeyE: 'errors' };
var tab = tabMap[e.code];
if (tab) {
e.preventDefault();
activeTab = tab;
hideSpotlight();
showPanel();
}
} else if (e.code === 'Escape') {
if (spotlight.classList.contains('visible')) hideSpotlight();
else if (panel.classList.contains('visible')) hidePanel();
}
});
}
function toggleSpotlight() {
if (spotlight.classList.contains('visible')) hideSpotlight();
else showSpotlight();
}
function showSpotlight() {
if (!host) createHost();
spotlight.classList.add('visible');
}
function hideSpotlight() {
spotlight.classList.remove('visible');
}
function showPanel() {
if (!host) createHost();
var pad = 10;
// Apply horizontal positioning based on snap state
if (snappedEdge.h === 'left') {
panel.style.left = pad + 'px';
panel.style.right = 'auto';
} else if (snappedEdge.h === 'right') {
panel.style.left = 'auto';
panel.style.right = pad + 'px';
} else {
panel.style.left = panelPos.x + 'px';
panel.style.right = 'auto';
}
// Apply vertical positioning based on snap state
if (snappedEdge.v === 'top') {
panel.style.top = pad + 'px';
panel.style.bottom = 'auto';
} else if (snappedEdge.v === 'bottom') {
panel.style.top = 'auto';
panel.style.bottom = pad + 'px';
} else {
panel.style.top = panelPos.y + 'px';
panel.style.bottom = 'auto';
}
panel.classList.add('visible');
updateTabs();
updateContent();
}
function hidePanel() {
panel.classList.remove('visible');
}
function updateTabs() {
shadow.querySelectorAll('.tab').forEach(function(t) {
t.classList.toggle('active', t.dataset.tab === activeTab);
});
}
function updateContent() {
var content = shadow.getElementById('content');
if (activeTab === 'seo') content.innerHTML = getSeoContent();
else if (activeTab === 'route') content.innerHTML = getRouteContent();
else if (activeTab === 'loader') content.innerHTML = getLoaderContent();
else if (activeTab === 'errors') content.innerHTML = getErrorsContent();
}
function getSeoContent() {
var title = document.title || '';
var desc = document.querySelector('meta[name="description"]')?.content || '';
var ogTitle = document.querySelector('meta[property="og:title"]')?.content || '';
var ogDesc = document.querySelector('meta[property="og:description"]')?.content || '';
var ogImage = document.querySelector('meta[property="og:image"]')?.content || '';
var issues = [];
if (!title) issues.push({ type: 'error', msg: 'Missing title' });
else if (title.length > 60) issues.push({ type: 'warn', msg: 'Title too long (>60)' });
if (!desc) issues.push({ type: 'error', msg: 'Missing description' });
else if (desc.length > 160) issues.push({ type: 'warn', msg: 'Description too long (>160)' });
if (!ogTitle) issues.push({ type: 'warn', msg: 'Missing og:title' });
if (!ogImage) issues.push({ type: 'warn', msg: 'Missing og:image' });
var html = '';
if (issues.length) {
html += '<div class="section"><div class="section-title">Issues</div>';
issues.forEach(function(i) {
html += '<div class="issue-item"><span class="issue-icon">' + (i.type === 'error' ? '\u2716' : '\u26A0') + '</span><span>' + escapeHtml(i.msg) + '</span></div>';
});
html += '</div>';
}
html += '<div class="section"><div class="section-title">Google Preview</div><div class="preview-card" style="background:#fff;color:#202124;padding:12px;border-radius:8px;">';
html += '<div style="font-size:12px;color:#202124;margin-bottom:2px;">' + escapeHtml(location.hostname) + '</div>';
html += '<div style="font-size:16px;color:#1a0dab;margin-bottom:4px;">' + escapeHtml(title || 'No title') + '</div>';
html += '<div style="font-size:13px;color:#4d5156;">' + escapeHtml(desc ? desc.slice(0,160) : 'No description') + '</div>';
html += '</div></div>';
html += '<div class="section"><div class="section-title">Meta Tags</div>';
html += '<div class="info-row"><div class="info-label">title</div><div class="info-value">' + escapeHtml(title || '-') + '</div></div>';
html += '<div class="info-row"><div class="info-label">description</div><div class="info-value">' + escapeHtml(desc || '-') + '</div></div>';
html += '<div class="info-row"><div class="info-label">og:title</div><div class="info-value">' + escapeHtml(ogTitle || '-') + '</div></div>';
html += '<div class="info-row"><div class="info-label">og:description</div><div class="info-value">' + escapeHtml(ogDesc || '-') + '</div></div>';
html += '<div class="info-row"><div class="info-label">og:image</div><div class="info-value">' + escapeHtml(ogImage || '-') + '</div></div>';
html += '</div>';
return html;
}
function getRouteContent() {
var pathname = location.pathname;
var segments = pathname.split('/').filter(Boolean);
var search = location.search;
var hash = location.hash;
var devtools = window.__oneDevtools || {};
var routeInfo = devtools.routeInfo || {};
var params = routeInfo.params || {};
var html = '<div class="section"><div class="section-title">Current Route</div>';
html += '<div class="info-row"><span class="info-label">pathname</span><span class="info-value">' + escapeHtml(pathname) + '</span></div>';
html += '<div class="info-row"><span class="info-label">segments</span><span class="info-value">' + (segments.length ? segments.map(function(s) { return '<span style="background:#252525;padding:2px 6px;border-radius:4px;margin-right:4px;">' + escapeHtml(s) + '</span>'; }).join('') : '/') + '</span></div>';
if (search) html += '<div class="info-row"><span class="info-label">search</span><span class="info-value">' + escapeHtml(search) + '</span></div>';
if (hash) html += '<div class="info-row"><span class="info-label">hash</span><span class="info-value">' + escapeHtml(hash) + '</span></div>';
html += '</div>';
if (Object.keys(params).length) {
html += '<div class="section"><div class="section-title">Route Params</div>';
Object.entries(params).forEach(function(kv) {
html += '<div class="info-row"><span class="info-label">' + escapeHtml(kv[0]) + '</span><span class="info-value">' + escapeHtml(String(kv[1])) + '</span></div>';
});
html += '</div>';
}
html += '<div class="section"><div class="section-title">Full URL</div>';
html += '<div style="font-family:monospace;font-size:11px;color:#666;word-break:break-all;">' + escapeHtml(location.href) + '</div>';
html += '</div>';
return html;
}
function getLoaderContent() {
var devtools = window.__oneDevtools || {};
var history = typeof devtools.getLoaderTimingHistory === 'function' ? devtools.getLoaderTimingHistory() || [] : [];
if (!history.length) {
return '<div class="empty">No loader timings recorded yet</div>';
}
var maxTime = Math.max.apply(null, history.map(function(t) { return t.totalTime || 0; }));
var html = '';
history.forEach(function(t) {
var modPct = t.moduleLoadTime && t.totalTime ? (t.moduleLoadTime / t.totalTime) * 100 : 0;
var execPct = t.executionTime && t.totalTime ? (t.executionTime / t.totalTime) * 100 : 0;
var widthPct = t.totalTime && maxTime ? (t.totalTime / maxTime) * 100 : 0;
html += '<div class="error-item' + (t.error ? ' error' : '') + '">';
html += '<div style="display:flex;justify-content:space-between;align-items:center;">';
html += '<span style="font-family:monospace;font-size:11px;">' + escapeHtml(t.path) + '</span>';
html += '<span class="badge badge-' + (t.error ? 'error' : 'success') + '">' + (t.totalTime ? Math.round(t.totalTime) + 'ms' : '-') + '</span>';
html += '</div>';
if (!t.error) {
html += '<div class="timing-bar" style="width:' + Math.max(20, widthPct) + '%;">';
html += '<div class="timing-segment timing-module" style="width:' + modPct + '%;" title="Module: ' + Math.round(t.moduleLoadTime || 0) + 'ms"></div>';
html += '<div class="timing-segment timing-exec" style="width:' + execPct + '%;" title="Exec: ' + Math.round(t.executionTime || 0) + 'ms"></div>';
html += '</div>';
}
if (t.error) html += '<div class="error-msg">' + escapeHtml(t.error) + '</div>';
html += '</div>';
});
return html;
}
function getErrorsContent() {
var devtools = window.__oneDevtools || {};
var errors = devtools.errorHistory || [];
if (!errors.length) {
return '<div class="empty">\u2713 No errors recorded</div>';
}
var html = '';
errors.forEach(function(err) {
html += '<div class="error-item error">';
html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">';
html += '<span class="badge badge-error">' + escapeHtml(err.type || 'error') + '</span>';
html += '<span style="font-size:11px;color:#666;">' + new Date(err.timestamp).toLocaleTimeString() + '</span>';
html += '</div>';
html += '<div class="error-msg">' + escapeHtml(err.error?.message || 'Unknown error') + '</div>';
html += '</div>';
});
return html;
}
// Initialize
createHost();
// Listen for events
window.addEventListener('one-loader-timing', function() {
if (panel && panel.classList.contains('visible') && activeTab === 'loader') updateContent();
});
window.addEventListener('one-error', function(e) {
var devtools = window.__oneDevtools = window.__oneDevtools || {};
devtools.errorHistory = devtools.errorHistory || [];
devtools.errorHistory.unshift(e.detail);
if (devtools.errorHistory.length > 20) devtools.errorHistory = devtools.errorHistory.slice(0, 20);
if (panel && panel.classList.contains('visible') && activeTab === 'errors') updateContent();
});
// Update on navigation
function onNavigate() {
if (panel && panel.classList.contains('visible')) updateContent();
}
window.addEventListener('popstate', onNavigate);
window.addEventListener('one-hmr-update', onNavigate);
// Also catch pushState/replaceState
var origPushState = history.pushState;
var origReplaceState = history.replaceState;
history.pushState = function() {
origPushState.apply(this, arguments);
setTimeout(onNavigate, 0);
};
history.replaceState = function() {
origReplaceState.apply(this, arguments);
setTimeout(onNavigate, 0);
};
} catch (e) {
console.error('[One DevTools] Failed to initialize:', e);
}
})();
`, SOURCE_INSPECTOR_SCRIPT = `
(function() {
try {
var active = false;
var host = null;
var shadow = null;
var overlay = null;
var tag = null;
var holdTimer = null;
var holdDelay = 500;
var mousePos = { x: 0, y: 0 };
function createHost() {
if (host) return;
host = document.createElement('div');
host.id = 'one-source-inspector';
shadow = host.attachShadow({ mode: 'open' });
shadow.innerHTML = \`
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
.overlay {
position: fixed;
pointer-events: none;
z-index: 100000;
background: rgba(100,100,100,0.2);
border: 2px solid rgba(100,100,100,0.6);
border-radius: 2px;
transition: all 0.05s;
display: none;
}
.tag {
position: fixed;
pointer-events: none;
z-index: 100001;
background: rgba(60,60,60,0.95);
color: white;
padding: 4px 8px;
font-size: 12px;
font-family: system-ui, -apple-system, sans-serif;
border-radius: 4px;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
display: none;
}
</style>
<div class="overlay"></div>
<div class="tag"></div>
\`;
document.body.appendChild(host);
overlay = shadow.querySelector('.overlay');
tag = shadow.querySelector('.tag');
}
function hideOverlay() {
if (overlay) overlay.style.display = 'none';
if (tag) tag.style.display = 'none';
}
function showOverlay(el, source) {
if (!host) createHost();
var rect = el.getBoundingClientRect();
overlay.style.display = 'block';
overlay.style.top = rect.top + 'px';
overlay.style.left = rect.left + 'px';
overlay.style.width = rect.width + 'px';
overlay.style.height = rect.height + 'px';
tag.style.display = 'block';
tag.textContent = source;
var top = rect.top - 28;
if (top < 0) top = rect.bottom + 4;
tag.style.top = top + 'px';
tag.style.left = Math.max(4, Math.min(rect.left, window.innerWidth - 200)) + 'px';
}
function cancelHold() {
clearTimeout(holdTimer);
holdTimer = null;
}
function updateOverlayAtPosition(x, y) {
// Use elementsFromPoint to get all elements at position, ordered from topmost/innermost to bottom
var allElements = document.elementsFromPoint(x, y);
// Find the first (innermost) element with data-one-source
var el = null;
for (var i = 0; i < allElements.length; i++) {
if (allElements[i].hasAttribute('data-one-source')) {
el = allElements[i];
break;
}
}
if (el) {
var source = el.getAttribute('data-one-source');
var lastColon = source.lastIndexOf(':');
var filePath = source.slice(0, lastColon);
var idx = source.slice(lastColon + 1);
var info = window.__oneSourceInfo && window.__oneSourceInfo[filePath];
var lineCol = info && info[idx];
var displaySource = lineCol ? filePath + ':' + lineCol[0] + ':' + lineCol[1] : source;
showOverlay(el, displaySource);
} else {
hideOverlay();
}
}
function activate() {
active = true;
// Immediately show overlay at current mouse position
updateOverlayAtPosition(mousePos.x, mousePos.y);
}
function deactivate() {
cancelHold();
active = false;
hideOverlay();
}
window.addEventListener('keydown', function(e) {
// Only trigger on Alt/Option key held alone
if (e.key !== 'Alt') {
cancelHold();
return;
}
// Ignore if other modifier keys are pressed
if (e.metaKey || e.ctrlKey || e.shiftKey) {
cancelHold();
return;
}
if (e.defaultPrevented) return;
if (holdTimer) return; // already waiting
holdTimer = setTimeout(activate, holdDelay);
});
window.addEventListener('keyup', function(e) {
if (e.defaultPrevented) return;
deactivate();
});
window.addEventListener('blur', deactivate);
document.addEventListener('mousemove', function(e) {
// Always track mouse position
mousePos.x = e.clientX;
mousePos.y = e.clientY;
if (!active) return;
updateOverlayAtPosition(e.clientX, e.clientY);
});
document.addEventListener('click', function(e) {
if (!active) return;
// Use elementsFromPoint to find innermost sourced element
var allElements = document.elementsFromPoint(e.clientX, e.clientY);
var el = null;
for (var i = 0; i < allElements.length; i++) {
if (allElements[i].hasAttribute('data-one-source')) {
el = allElements[i];
break;
}
}
if (el) {
e.preventDefault();
e.stopPropagation();
var source = el.getAttribute('data-one-source');
// Parse source: "/path/to/file.tsx:index"
var lastColon = source.lastIndexOf(':');
var filePath = source.slice(0, lastColon);
var idx = source.slice(lastColon + 1);
// Look up actual line/column from source info
var info = window.__oneSourceInfo && window.__oneSourceInfo[filePath];
var lineCol = info && info[idx];
var url = '/__one/open-source?source=' + encodeURIComponent(source);
if (lineCol) {
url += '&line=' + lineCol[0] + '&column=' + lineCol[1];
}
fetch(url);
}
}, true);
} catch (e) {
console.error('[Source Inspector] Failed to initialize:', e);
}
})();
`;
function DevHead() {
return process.env.NODE_ENV === "development" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("link", { rel: "preload", href: import_constants.VIRTUAL_SSR_CSS_HREF, as: "style" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"link",
{
rel: "stylesheet",
href: import_constants.VIRTUAL_SSR_CSS_HREF,
"data-ssr-css": !0,
suppressHydrationWarning: !0
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"script",
{
type: "module",
suppressHydrationWarning: !0,
dangerouslySetInnerHTML: { __html: ROUTE_HMR_SCRIPT }
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"script",
{
type: "module",
suppressHydrationWarning: !0,
dangerouslySetInnerHTML: { __html: LOADER_HMR_SCRIPT }
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"script",
{
type: "module",
suppressHydrationWarning: !0,
dangerouslySetInnerHTML: { __html: REACT_REFRESH_SCRIPT }
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"script",
{
type: "module",
suppressHydrationWarning: !0,
dangerouslySetInnerHTML: { __html: ONE_DEVTOOLS_SCRIPT }
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"script",
{
type: "module",
suppressHydrationWarning: !0,
dangerouslySetInnerHTML: { __html: SOURCE_INSPECTOR_SCRIPT }
}
)
] }) : null;
}
//# sourceMappingURL=DevHead.js.map