Simple-Calculator-App/index.html at main · Codexirra/Simple-Calculator-App · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="A simple one-page calculator app." />
    <title>Simple Calculator</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  <script data-codexirra-inspector>(() => {
  if (window.__codexirraInspectorInstalled) return;
  window.__codexirraInspectorInstalled = true;
  const defaultSourceFile = '/src/App.tsx';
  let enabled = false;
  const selector = [
    '[data-component]',
    '[data-codexirra-source]',
    '.inspectable',
    'button',
    'a',
    'input',
    'textarea',
    'select',
    'h1',
    'h2',
    'h3',
    'p',
    'section',
    'article'
  ].join(',');

  function metadataFor(el) {
    const rect = el.getBoundingClientRect();
    const hierarchy = Array.from(el.parentElement?.children || [])
      .slice(0, 6)
      .map((child) => child.tagName.toLowerCase())
      .join(' > ');
    return {
      x: rect.left,
      y: rect.top,
      w: rect.width,
      h: rect.height,
      component: el.dataset.component || el.tagName.toLowerCase(),
      sourceFile: el.dataset.codexirraSource || defaultSourceFile,
      textContent: (el.textContent || '').trim().slice(0, 300),
      cssClasses: typeof el.className === 'string' ? el.className : '',
      hierarchy,
      route: window.location.pathname || '/preview'
    };
  }

  function inspectAt(clientX, clientY) {
    const element = document.elementFromPoint(clientX, clientY);
    const target = element?.closest?.(selector);
    if (!target || target === document.body || target.id === 'root') return null;
    return metadataFor(target);
  }

  let lastSent = 0;
  window.addEventListener('message', (event) => {
    if (event.data?.type === 'codexirra:inspector:set-enabled') {
      enabled = Boolean(event.data.enabled);
      if (!enabled) {
        window.parent.postMessage({ type: 'codexirra:inspector:hover', box: null }, '*');
      }
    }
  }, true);

  window.addEventListener('mousemove', (event) => {
    if (!enabled) return;
    const now = Date.now();
    if (now - lastSent < 40) return;
    lastSent = now;
    window.parent.postMessage({ type: 'codexirra:inspector:hover', box: inspectAt(event.clientX, event.clientY) }, '*');
  }, true);

  window.addEventListener('click', (event) => {
    if (!enabled) return;
    const box = inspectAt(event.clientX, event.clientY);
    if (!box) return;
    event.preventDefault();
    event.stopPropagation();
    window.parent.postMessage({ type: 'codexirra:inspector:select', box }, '*');
  }, true);

  window.addEventListener('mouseleave', () => {
    if (!enabled) return;
    window.parent.postMessage({ type: 'codexirra:inspector:hover', box: null }, '*');
  }, true);
})();</script></body>
</html>