@stsgs1980/fab-inspector 3.4.1 → 3.5.0

package/plugins/data-src-plugin.ts

@@ -1,110 +0,0 @@
-/**
- * data-src Injector Plugin for Turbopack (Next.js 15.3+)
- *
- * Автоматически добавляет data-src="file:line" атрибут на JSX-элементы.
- *
- * Подключение в next.config.ts:
- *   import { dataSrcPlugin } from './src/components/inspector/plugins/data-src-plugin';
- *
- *   const nextConfig = {
- *     experimental: {
- *       turbo: {
- *         plugins: [dataSrcPlugin()],
- *       },
- *     },
- *   };
- *
- * Пропускает: node_modules, inspector/, строки с комментариями и декларациями.
- * Только dev-режим (Next.js не вызывает turbo plugins в production build).
- *
- * ⚠️  API экспериментальное и может измениться в следующих версиях Next.js.
- *     При проблемах — добавляйте data-src вручную.
- */
-
-type TransformResult = { code: string };
-
-export const dataSrcPlugin = () => ({
-  name: 'data-src-injector',
-
-  setup(api: {
-    transform: (
-      opts: { filter: RegExp },
-      handler: (args: { code: string; resource: string }) => TransformResult,
-    ) => void;
-  }) {
-    api.transform({ filter: /\.(tsx|jsx)$/ }, ({ code, resource }) => {
-      if (
-        resource.includes('node_modules') ||
-        resource.includes('/inspector/')
-      ) {
-        return { code };
-      }
-      return injectDataSrc(code, resource);
-    });
-  },
-});
-
-function injectDataSrc(code: string, resource: string): TransformResult {
-  const lines = code.split('\n');
-  const relativePath = toRelativePath(resource);
-  const result: string[] = [];
-
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    const lineNum = i + 1;
-
-    if (isJsxOpeningTag(line) && !hasDataSrc(line)) {
-      result.push(injectOnLine(line, relativePath, lineNum));
-    } else {
-      result.push(line);
-    }
-  }
-
-  return { code: result.join('\n') };
-}
-
-function injectOnLine(line: string, path: string, lineNum: number): string {
-  const attr = ` data-src="${path}:${lineNum}"`;
-  return line.replace(
-    /(<[A-Za-z][A-Za-z0-9-]*)(\s|>)/,
-    (_match, tag: string, after: string) => {
-      if (after === '>') return `${tag}${attr}>`;
-      return `${tag}${attr} `;
-    },
-  );
-}
-
-function isJsxOpeningTag(line: string): boolean {
-  const t = line.trimStart();
-  if (
-    t.startsWith('//') ||
-    t.startsWith('*') ||
-    t.startsWith('/*') ||
-    t.startsWith('import ') ||
-    t.startsWith('export ') ||
-    t.startsWith('type ') ||
-    t.startsWith('interface ') ||
-    t.startsWith('function ') ||
-    t.startsWith('const ') ||
-    t.startsWith('let ') ||
-    t.startsWith('var ') ||
-    t.startsWith('{') ||
-    t.startsWith('}') ||
-    t.startsWith('return ') ||
-    t.startsWith('if ') ||
-    t.startsWith('else')
-  ) {
-    return false;
-  }
-  return /<[A-Za-z][A-Za-z0-9-]*[\s>]/.test(t);
-}
-
-function hasDataSrc(line: string): boolean {
-  return /data-src\s*=/.test(line);
-}
-
-function toRelativePath(resource: string): string {
-  const idx = resource.indexOf('/src/');
-  if (idx !== -1) return resource.slice(idx + 1);
-  return resource.split('/').pop() || resource;
-}

package/types.ts

@@ -1,45 +0,0 @@
-export interface SourceInfo {
-  file: string;
-  line: number;
-}
-
-export interface BoxModel {
-  marginTop: string;
-  marginRight: string;
-  marginBottom: string;
-  marginLeft: string;
-  paddingTop: string;
-  paddingRight: string;
-  paddingBottom: string;
-  paddingLeft: string;
-  borderTop: string;
-  borderRight: string;
-  borderBottom: string;
-  borderLeft: string;
-  width: string;
-  height: string;
-}
-
-export interface ElementInfo {
-  tag: string;
-  id: string;
-  classes: string;
-  rect: DOMRect;
-  text: string;
-  outerHTML: string;
-  cssPath: string;
-  computedStyles: Record<string, string>;
-  boxModel: BoxModel | null;
-  source: SourceInfo | null;
-}
-
-export interface SnippetData {
-  file: string;
-  line: number;
-  totalLines: number;
-  snippet: {
-    startLine: number;
-    lines: string[];
-    highlightLine: number;
-  };
-}

package/use-element-inspector.ts

@@ -1,264 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-import type { ElementInfo, SnippetData, SourceInfo, BoxModel } from './types';
-
-function findSource(el: HTMLElement): SourceInfo | null {
-  let current: HTMLElement | null = el;
-  while (current) {
-    const src = current.getAttribute('data-src');
-    if (src) {
-      const lastColon = src.lastIndexOf(':');
-      if (lastColon > 0) {
-        return {
-          file: src.slice(0, lastColon),
-          line: parseInt(src.slice(lastColon + 1), 10) || 1,
-        };
-      }
-      return { file: src, line: 1 };
-    }
-    current = current.parentElement;
-  }
-  return null;
-}
-
-function getCssPath(el: HTMLElement): string {
-  const parts: string[] = [];
-  let current: HTMLElement | null = el;
-  while (current && current !== document.body && current !== document.documentElement) {
-    let selector = current.tagName.toLowerCase();
-    if (current.id) {
-      selector += '#' + current.id;
-      parts.unshift(selector);
-      break;
-    }
-    const parent = current.parentElement;
-    if (parent) {
-      const siblings = Array.from(parent.children).filter(
-        (c) => (c as Element).tagName === current!.tagName,
-      );
-      if (siblings.length > 1) {
-        const index = siblings.indexOf(current) + 1;
-        selector += `:nth-of-type(${index})`;
-      }
-    }
-    parts.unshift(selector);
-    current = parent;
-  }
-  return parts.join(' > ');
-}
-
-function getTextForInspector(el: HTMLElement): string {
-  const TEXT_TAGS = new Set([
-    'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
-    'BUTTON', 'A', 'LABEL', 'P', 'SPAN', 'LI', 'TD', 'TH', 'DT', 'DD',
-  ]);
-  if (!TEXT_TAGS.has(el.tagName)) return '';
-
-  // Только прямые текстовые узлы — без содержимого дочерних элементов.
-  // Для <span><Icon /> Wiki Codex <em>v2</em></span> вернёт "Wiki Codex",
-  // а не "Wiki Codex v2" (как textContent).
-  let direct = '';
-  for (const node of Array.from(el.childNodes)) {
-    if (node.nodeType === Node.TEXT_NODE && node.textContent) {
-      direct += node.textContent;
-    }
-  }
-  const directTrim = direct.trim();
-
-  // Если прямого текста нет (всё во вложенных) — fallback на textContent,
-  // чтобы не потерять <button><Icon />Save</button> (там текст прямой,
-  // но иногда иконка съедает весь текст).
-  const fallback = (el.textContent || '').trim();
-  const result = directTrim || fallback;
-  return result.slice(0, 120);
-}
-
-function getElementInfo(el: HTMLElement): ElementInfo | null {
-  const rect = el.getBoundingClientRect();
-  const cs = window.getComputedStyle(el);
-  if (
-    el.closest('[data-se-fab]') ||
-    el.closest('[data-se-panel]') ||
-    el.closest('[data-se-highlight]')
-  ) {
-    return null;
-  }
-  let outerHTML = el.outerHTML;
-  if (outerHTML.length > 2000) {
-    outerHTML = outerHTML.slice(0, 2000) + '\n  ...';
-  }
-  return {
-    tag: el.tagName.toLowerCase(),
-    id: el.id || '',
-    classes: typeof el.className === 'string' ? el.className : '',
-    rect,
-    text: getTextForInspector(el),
-    outerHTML,
-    cssPath: getCssPath(el),
-    computedStyles: {
-      fontSize: cs.fontSize,
-      fontWeight: cs.fontWeight,
-      color: cs.color,
-      lineHeight: cs.lineHeight,
-      width: `${Math.round(rect.width)}px`,
-      height: `${Math.round(rect.height)}px`,
-    },
-    boxModel: {
-      marginTop: cs.marginTop,
-      marginRight: cs.marginRight,
-      marginBottom: cs.marginBottom,
-      marginLeft: cs.marginLeft,
-      paddingTop: cs.paddingTop,
-      paddingRight: cs.paddingRight,
-      paddingBottom: cs.paddingBottom,
-      paddingLeft: cs.paddingLeft,
-      borderTop: cs.borderTopWidth,
-      borderRight: cs.borderRightWidth,
-      borderBottom: cs.borderBottomWidth,
-      borderLeft: cs.borderLeftWidth,
-      width: cs.width,
-      height: cs.height,
-    },
-    source: findSource(el),
-  };
-}
-
-function computePanelPos(rect: DOMRect): { x: number; y: number } {
-  const panelW = 380;
-  const panelH = 400;
-  let x = rect.right + 8;
-  let y = rect.top;
-  if (x + panelW > window.innerWidth - 16) {
-    x = rect.left - panelW - 8;
-  }
-  if (x < 8) x = 8;
-  if (y + panelH > window.innerHeight - 16) {
-    y = window.innerHeight - panelH - 16;
-  }
-  if (y < 8) y = 8;
-  return { x, y };
-}
-
-export function useElementInspector() {
-  const [active, setActive] = useState(false);
-  const [elementInfo, setElementInfo] = useState<ElementInfo | null>(null);
-  const [panelPos, setPanelPos] = useState({ x: 0, y: 0 });
-  const [highlightBox, setHighlightBox] = useState<DOMRect | null>(null);
-  const [snippet, setSnippet] = useState<SnippetData | null>(null);
-  const [snippetLoading, setSnippetLoading] = useState(false);
-
-  const fetchSnippet = useCallback(async (file: string, line: number) => {
-    setSnippetLoading(true);
-    setSnippet(null);
-    try {
-      const res = await fetch(
-        `/api/source?file=${encodeURIComponent(file)}&line=${line}&ctx=10`,
-      );
-      if (res.ok) {
-        const data = await res.json();
-        setSnippet(data);
-      }
-    } catch {
-      // ignore
-    }
-    setSnippetLoading(false);
-  }, []);
-
-  const handleMouseMove = useCallback((e: MouseEvent) => {
-    const target = e.target as HTMLElement;
-    if (
-      target.closest('[data-se-fab]') ||
-      target.closest('[data-se-panel]') ||
-      target.closest('[data-se-highlight]')
-    ) {
-      setHighlightBox(null);
-      return;
-    }
-    setHighlightBox(target.getBoundingClientRect());
-  }, []);
-
-  const handleClick = useCallback(
-    (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
-      if (
-        target.closest('[data-se-fab]') ||
-        target.closest('[data-se-panel]') ||
-        target.closest('[data-se-highlight]')
-      ) {
-        return;
-      }
-      e.preventDefault();
-      e.stopPropagation();
-
-      const info = getElementInfo(target);
-      if (info) {
-        setElementInfo(info);
-        setSnippet(null);
-        setPanelPos(computePanelPos(info.rect));
-        if (info.source) {
-          fetchSnippet(info.source.file, info.source.line);
-        }
-      }
-    },
-    [fetchSnippet],
-  );
-
-  const handleScroll = useCallback(() => {
-    setHighlightBox(null);
-  }, []);
-
-  useEffect(() => {
-    if (!active) return;
-    document.addEventListener('mousemove', handleMouseMove, true);
-    document.addEventListener('click', handleClick, true);
-    document.addEventListener('scroll', handleScroll, true);
-    document.body.style.cursor = 'crosshair';
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove, true);
-      document.removeEventListener('click', handleClick, true);
-      document.removeEventListener('scroll', handleScroll, true);
-      document.body.style.cursor = '';
-    };
-  }, [active, handleMouseMove, handleClick, handleScroll]);
-
-  useEffect(() => {
-    if (!active) return;
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        setActive(false);
-        setElementInfo(null);
-        setHighlightBox(null);
-        setSnippet(null);
-      }
-    };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [active]);
-
-  const toggleActive = useCallback(() => {
-    setActive((v) => {
-      const next = !v;
-      if (!next) {
-        setElementInfo(null);
-        setHighlightBox(null);
-        setSnippet(null);
-      }
-      return next;
-    });
-  }, []);
-
-  const closePanel = useCallback(() => {
-    setElementInfo(null);
-  }, []);
-
-  return {
-    active,
-    elementInfo,
-    panelPos,
-    setPanelPos,
-    highlightBox,
-    snippet,
-    snippetLoading,
-    toggleActive,
-    closePanel,
-  };
-}

package/use-panel-drag.ts

@@ -1,47 +0,0 @@
-import { useState, useCallback, useRef } from 'react';
-
-export function usePanelDrag(
-  panelPos: { x: number; y: number },
-  setPanelPos: (pos: { x: number; y: number }) => void,
-) {
-  const [isDragging, setIsDragging] = useState(false);
-  const dragRef = useRef<{
-    startX: number;
-    startY: number;
-    startLeft: number;
-    startTop: number;
-  } | null>(null);
-
-  const handleDragStart = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      setIsDragging(true);
-      dragRef.current = {
-        startX: e.clientX,
-        startY: e.clientY,
-        startLeft: panelPos.x,
-        startTop: panelPos.y,
-      };
-      const onMove = (ev: MouseEvent) => {
-        if (!dragRef.current) return;
-        const dx = ev.clientX - dragRef.current.startX;
-        const dy = ev.clientY - dragRef.current.startY;
-        setPanelPos({
-          x: Math.max(0, Math.min(window.innerWidth - 396, dragRef.current.startLeft + dx)),
-          y: Math.max(0, Math.min(window.innerHeight - 48, dragRef.current.startTop + dy)),
-        });
-      };
-      const onUp = () => {
-        setIsDragging(false);
-        dragRef.current = null;
-        document.removeEventListener('mousemove', onMove);
-        document.removeEventListener('mouseup', onUp);
-      };
-      document.addEventListener('mousemove', onMove);
-      document.addEventListener('mouseup', onUp);
-    },
-    [panelPos, setPanelPos],
-  );
-
-  return { isDragging, handleDragStart };
-}