@lego-build/plugins 0.0.2 → 0.0.6

package/dist/index.js

@@ -1,740 +1,12 @@
-// src/bridge.ts
-function sendToParent(type, payload) {
-  window.parent.postMessage({ type, payload }, "*");
-}
-function setupIframeBridge() {
-  const pushState = window.history.pushState.bind(window.history);
-  const originalPushState = (...args) => {
-    pushState(...args);
-    sendToParent("IFRAME_URL_CHANGED", window.location.href);
-  };
-  window.history.pushState = originalPushState;
-  const replaceState = window.history.replaceState.bind(window.history);
-  const originalReplaceState = (...args) => {
-    replaceState(...args);
-    sendToParent("IFRAME_URL_CHANGED", window.location.href);
-  };
-  window.history.replaceState = originalReplaceState;
-  window.addEventListener("popstate", () => {
-    sendToParent("IFRAME_URL_CHANGED", window.location.href);
-  });
-  window.addEventListener("message", (e) => {
-    const msg = e.data;
-    if (!msg?.type) return;
-    switch (msg.type) {
-      case "NAVIGATE_BACK":
-        window.history.back();
-        break;
-      case "NAVIGATE_FORWARD":
-        window.history.forward();
-        break;
-      case "NAVIGATE_URL":
-        if (msg.payload) {
-          window.history.pushState({}, "", msg.payload);
-          sendToParent("IFRAME_URL_CHANGED", window.location.href);
-        }
-        break;
-      case "REFRESH":
-        window.location.reload();
-        break;
-    }
-  });
-}
-
-// src/selector.ts
-function createElementSelectorState() {
-  return {
-    isActive: false,
-    isEditing: false,
-    hoveredElement: null,
-    selectedElement: null,
-    overlay: null,
-    tooltip: null,
-    inlineEditor: null,
-    depth: 0,
-    originalText: ""
-  };
-}
-function createOverlay() {
-  const overlay = document.createElement("div");
-  overlay.id = "lego-element-selector-overlay";
-  overlay.style.cssText = `
-    position: fixed;
-    pointer-events: none;
-    z-index: 2147483646;
-    background: rgba(59, 130, 246, 0.1);
-    border: 2px solid #3b82f6;
-    border-radius: 4px;
-    transition: all 0.1s ease-out;
-  `;
-  document.body.appendChild(overlay);
-  return overlay;
-}
-function createTooltip() {
-  const tooltip = document.createElement("div");
-  tooltip.id = "lego-element-selector-tooltip";
-  tooltip.style.cssText = `
-    position: fixed;
-    pointer-events: none;
-    z-index: 2147483647;
-    background: #3b82f6;
-    color: white;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-family: ui-monospace, monospace;
-    font-size: 12px;
-    white-space: nowrap;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-    transition: all 0.1s ease-out;
-  `;
-  document.body.appendChild(tooltip);
-  return tooltip;
-}
-function createInlineEditor(state, element, onSave, onCancel) {
-  const rect = element.getBoundingClientRect();
-  const elementText = getElementTextContent(element);
-  const editor = document.createElement("div");
-  editor.id = "lego-inline-editor";
-  editor.style.cssText = `
-    position: fixed;
-    top: ${rect.top}px;
-    left: ${rect.left}px;
-    width: ${Math.max(rect.width, 200)}px;
-    z-index: 2147483647;
-    background: white;
-    border: 2px solid #3b82f6;
-    border-radius: 8px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-    padding: 8px;
-    font-family: ui-sans-serif, system-ui, sans-serif;
-  `;
-  const header = document.createElement("div");
-  header.style.cssText = `
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 8px;
-    padding-bottom: 8px;
-    border-bottom: 1px solid #e5e7eb;
-  `;
-  header.innerHTML = `
-    <span style="font-size: 11px; font-weight: 500; color: #6b7280;">
-      \u270F\uFE0F Edit Text
-    </span>
-    <span style="font-size: 10px; color: #9ca3af;">
-      Ctrl+Enter to save \u2022 Esc to cancel
-    </span>
-  `;
-  const input = document.createElement("textarea");
-  input.id = "lego-inline-editor-input";
-  input.value = elementText;
-  input.style.cssText = `
-    width: 100%;
-    min-height: 60px;
-    padding: 8px;
-    border: 1px solid #e5e7eb;
-    border-radius: 4px;
-    font-size: 14px;
-    font-family: inherit;
-    resize: vertical;
-    outline: none;
-    box-sizing: border-box;
-  `;
-  input.placeholder = "Enter text...";
-  const buttons = document.createElement("div");
-  buttons.style.cssText = `
-    display: flex;
-    gap: 8px;
-    margin-top: 8px;
-    justify-content: flex-end;
-  `;
-  const cancelBtn = document.createElement("button");
-  cancelBtn.textContent = "Cancel";
-  cancelBtn.style.cssText = `
-    padding: 6px 12px;
-    border: 1px solid #e5e7eb;
-    border-radius: 4px;
-    background: white;
-    font-size: 12px;
-    cursor: pointer;
-    transition: all 0.15s;
-  `;
-  cancelBtn.onmouseenter = () => cancelBtn.style.background = "#f3f4f6";
-  cancelBtn.onmouseleave = () => cancelBtn.style.background = "white";
-  cancelBtn.onclick = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onCancel();
-  };
-  const saveBtn = document.createElement("button");
-  saveBtn.textContent = "Save";
-  saveBtn.style.cssText = `
-    padding: 6px 12px;
-    border: none;
-    border-radius: 4px;
-    background: #3b82f6;
-    color: white;
-    font-size: 12px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.15s;
-  `;
-  saveBtn.onmouseenter = () => saveBtn.style.background = "#2563eb";
-  saveBtn.onmouseleave = () => saveBtn.style.background = "#3b82f6";
-  saveBtn.onclick = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onSave();
-  };
-  editor.appendChild(header);
-  editor.appendChild(input);
-  buttons.appendChild(cancelBtn);
-  buttons.appendChild(saveBtn);
-  editor.appendChild(buttons);
-  document.body.appendChild(editor);
-  setTimeout(() => {
-    input.focus();
-    input.select();
-  }, 0);
-  input.addEventListener("keydown", (e) => {
-    if (e.key === "Escape") {
-      e.preventDefault();
-      e.stopPropagation();
-      onCancel();
-    } else if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-      e.stopPropagation();
-      onSave();
-    }
-  });
-  input.addEventListener("keyup", (e) => {
-    e.stopPropagation();
-  });
-  input.addEventListener("keypress", (e) => {
-    e.stopPropagation();
-  });
-  return editor;
-}
-function getElementTextContent(element) {
-  let text = "";
-  for (const node of element.childNodes) {
-    if (node.nodeType === Node.TEXT_NODE) {
-      text += node.textContent?.trim() || "";
-    }
-  }
-  if (!text && element.children.length === 0) {
-    text = element.textContent?.trim() || "";
-  }
-  return text;
-}
-function getElementDepth(element) {
-  let depth = 0;
-  let current = element;
-  while (current && current !== document.body) {
-    depth++;
-    current = current.parentElement;
-  }
-  return depth;
-}
-function updateOverlayPosition(state) {
-  if (!state.hoveredElement || !state.overlay || !state.tooltip) return;
-  const rect = state.hoveredElement.getBoundingClientRect();
-  const viewportWidth = window.innerWidth;
-  state.overlay.style.top = `${rect.top}px`;
-  state.overlay.style.left = `${rect.left}px`;
-  state.overlay.style.width = `${rect.width}px`;
-  state.overlay.style.height = `${rect.height}px`;
-  let tooltipTop = rect.top - 32;
-  let tooltipLeft = rect.left;
-  if (tooltipTop < 8) {
-    tooltipTop = rect.bottom + 8;
-  }
-  const estimatedTooltipWidth = state.tooltip.offsetWidth || 150;
-  if (tooltipLeft + estimatedTooltipWidth > viewportWidth - 8) {
-    tooltipLeft = viewportWidth - estimatedTooltipWidth - 8;
-  }
-  if (tooltipLeft < 8) {
-    tooltipLeft = 8;
-  }
-  state.tooltip.style.top = `${tooltipTop}px`;
-  state.tooltip.style.left = `${tooltipLeft}px`;
-}
-function getElementInfo(element) {
-  const filePath = element.getAttribute("data-locator-path") || "";
-  const line = element.getAttribute("data-locator-line");
-  const depth = getElementDepth(element);
-  const id = element.id ? `#${element.id}` : "";
-  const classes = element.className && typeof element.className === "string" ? element.className.split(" ").filter((c) => c).map((c) => `.${c}`).join("") : "";
-  return {
-    tagName: element.tagName.toLowerCase(),
-    selector: element.tagName.toLowerCase() + id + classes.slice(0, 50),
-    filePath,
-    line: line ? parseInt(line) : void 0,
-    depth,
-    rect: element.getBoundingClientRect()
-  };
-}
-function highlightElement(state, element) {
-  state.hoveredElement = element;
-  if (!state.overlay) {
-    state.overlay = createOverlay();
-  }
-  if (!state.tooltip) {
-    state.tooltip = createTooltip();
-  }
-  state.overlay.style.display = "block";
-  state.tooltip.style.display = "block";
-  const info = getElementInfo(element);
-  state.depth = info.depth;
-  state.tooltip.innerHTML = `
-    <span style="opacity: 0.8">${info.selector}</span>
-    ${info.filePath ? `<span style="margin-left: 8px; opacity: 0.6">\u{1F4C4} ${info.filePath.split("/").pop()}</span>` : ""}
-    <span style="margin-left: 8px; opacity: 0.5; font-size: 10px;">Double-click to edit</span>
-  `;
-  updateOverlayPosition(state);
-  sendToParent("HOVER_ELEMENT", {
-    tagName: info.tagName,
-    rect: info.rect,
-    filePath: info.filePath || void 0,
-    line: info.line,
-    depth: info.depth
-  });
-}
-function navigateDOM(state, direction) {
-  if (!state.hoveredElement) return;
-  let target = null;
-  switch (direction) {
-    case "parent":
-      target = state.hoveredElement.parentElement;
-      if (target && target === document.body) target = null;
-      break;
-    case "child":
-      target = state.hoveredElement.firstElementChild;
-      break;
-    case "next":
-      target = state.hoveredElement.nextElementSibling;
-      break;
-    case "prev":
-      target = state.hoveredElement.previousElementSibling;
-      break;
-  }
-  if (target && target !== document.documentElement && target !== document.body) {
-    highlightElement(state, target);
-  }
-}
-function setupElementSelector() {
-  const state = createElementSelectorState();
-  function saveInlineEdit() {
-    if (!state.inlineEditor || !state.selectedElement) return;
-    const input = state.inlineEditor.querySelector(
-      "#lego-inline-editor-input"
-    );
-    const newText = input?.value || "";
-    const info = getElementInfo(state.selectedElement);
-    if (newText !== state.originalText && info.filePath) {
-      sendToParent("SAVE_INLINE_EDIT", {
-        filePath: info.filePath,
-        originalContent: state.originalText,
-        newContent: newText,
-        line: info.line
-      });
-    }
-    exitEditMode();
-  }
-  function cancelInlineEdit() {
-    sendToParent("CANCEL_INLINE_EDIT");
-    exitEditMode();
-  }
-  function exitEditMode() {
-    state.isEditing = false;
-    if (state.inlineEditor) {
-      state.inlineEditor.remove();
-      state.inlineEditor = null;
-    }
-    if (state.isActive && state.hoveredElement) {
-      if (state.overlay) state.overlay.style.display = "block";
-      if (state.tooltip) state.tooltip.style.display = "block";
-    }
-    state.selectedElement = null;
-    state.originalText = "";
-  }
-  function enterEditMode() {
-    if (!state.selectedElement) return;
-    state.isEditing = true;
-    if (state.overlay) state.overlay.style.display = "none";
-    if (state.tooltip) state.tooltip.style.display = "none";
-    state.inlineEditor = createInlineEditor(state, state.selectedElement, saveInlineEdit, cancelInlineEdit);
-    const info = getElementInfo(state.selectedElement);
-    sendToParent("START_INLINE_EDIT", {
-      tagName: info.tagName,
-      filePath: info.filePath,
-      line: info.line,
-      text: state.originalText
-    });
-  }
-  function selectElement() {
-    if (!state.hoveredElement) return;
-    state.selectedElement = state.hoveredElement;
-    const info = getElementInfo(state.hoveredElement);
-    const text = getElementTextContent(state.hoveredElement);
-    state.originalText = text;
-    sendToParent("CLICK_ELEMENT", {
-      tagName: info.tagName,
-      filePath: info.filePath,
-      line: info.line,
-      depth: info.depth,
-      text
-    });
-  }
-  function startEditing() {
-    if (!state.hoveredElement) return;
-    state.selectedElement = state.hoveredElement;
-    const info = getElementInfo(state.hoveredElement);
-    const text = getElementTextContent(state.hoveredElement);
-    state.originalText = text;
-    sendToParent("CLICK_ELEMENT", {
-      tagName: info.tagName,
-      filePath: info.filePath,
-      line: info.line,
-      depth: info.depth,
-      text
-    });
-    enterEditMode();
-  }
-  const handleMouseMove = (e) => {
-    if (!state.isActive) return;
-    const target = e.target;
-    if (target.id === "lego-element-selector-overlay" || target.id === "lego-element-selector-tooltip") {
-      return;
-    }
-    if (target === state.hoveredElement) return;
-    highlightElement(state, target);
-  };
-  const handleScroll = () => {
-    if (state.isActive && state.hoveredElement) {
-      updateOverlayPosition(state);
-    }
-  };
-  const handleResize = () => {
-    if (state.isActive && state.hoveredElement) {
-      updateOverlayPosition(state);
-    }
-  };
-  const handleKeyDown = (e) => {
-    if (!state.isActive) return;
-    if (state.isEditing) {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        cancelInlineEdit();
-        return;
-      }
-      return;
-    }
-    switch (e.key) {
-      case "Escape":
-        sendToParent("SELECTOR_EXIT", true);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        navigateDOM(state, "parent");
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        navigateDOM(state, "child");
-        break;
-      case "ArrowLeft":
-        e.preventDefault();
-        navigateDOM(state, "prev");
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        navigateDOM(state, "next");
-        break;
-      case "Enter":
-        e.preventDefault();
-        selectElement();
-        break;
-      case "e":
-      case "E":
-        if (state.hoveredElement) {
-          e.preventDefault();
-          startEditing();
-        }
-        break;
-    }
-  };
-  const handleClick = (e) => {
-    if (!state.isActive) return;
-    if (state.isEditing) {
-      const target = e.target;
-      if (state.inlineEditor?.contains(target)) {
-        if (target.tagName === "BUTTON") {
-          e.preventDefault();
-          e.stopPropagation();
-          if (target.textContent === "Save") {
-            saveInlineEdit();
-          } else if (target.textContent === "Cancel") {
-            cancelInlineEdit();
-          }
-        }
-        return;
-      }
-      e.preventDefault();
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-      cancelInlineEdit();
-      return;
-    }
-    e.preventDefault();
-    e.stopPropagation();
-    e.stopImmediatePropagation();
-    selectElement();
-  };
-  const handleDoubleClick = (e) => {
-    if (!state.isActive || state.isEditing) return;
-    e.preventDefault();
-    e.stopPropagation();
-    e.stopImmediatePropagation();
-    startEditing();
-  };
-  const activateSelector = () => {
-    state.isActive = true;
-    document.addEventListener("mousemove", handleMouseMove, true);
-    document.addEventListener("click", handleClick, true);
-    document.addEventListener("dblclick", handleDoubleClick, true);
-    document.addEventListener("keydown", handleKeyDown, true);
-    window.addEventListener("scroll", handleScroll, true);
-    window.addEventListener("resize", handleResize);
-    document.body.style.cursor = "crosshair";
-    state.overlay = createOverlay();
-    state.tooltip = createTooltip();
-  };
-  const deactivateSelector = () => {
-    state.isActive = false;
-    state.isEditing = false;
-    document.removeEventListener("mousemove", handleMouseMove, true);
-    document.removeEventListener("click", handleClick, true);
-    document.removeEventListener("dblclick", handleDoubleClick, true);
-    document.removeEventListener("keydown", handleKeyDown, true);
-    window.removeEventListener("scroll", handleScroll, true);
-    window.removeEventListener("resize", handleResize);
-    if (state.overlay) {
-      state.overlay.remove();
-      state.overlay = null;
-    }
-    if (state.tooltip) {
-      state.tooltip.remove();
-      state.tooltip = null;
-    }
-    if (state.inlineEditor) {
-      state.inlineEditor.remove();
-      state.inlineEditor = null;
-    }
-    state.hoveredElement = null;
-    state.selectedElement = null;
-    state.originalText = "";
-    document.body.style.cursor = "";
-    state.depth = 0;
-  };
-  window.addEventListener("message", (e) => {
-    const msg = e.data;
-    if (msg.type === "TOGGLE_ELEMENT_SELECTOR") {
-      if (msg.payload) {
-        activateSelector();
-      } else {
-        deactivateSelector();
-      }
-    }
-  });
-}
-
-// src/source-locator.ts
-import path from "path";
-import * as parser from "@babel/parser";
-import traverse from "@babel/traverse";
-import generate from "@babel/generator";
-import * as t from "@babel/types";
-import micromatch from "micromatch";
-import { createHash } from "crypto";
-var HTML_TAGS = [
-  "div",
-  "span",
-  "p",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "button",
-  "a",
-  "img",
-  "input",
-  "textarea",
-  "select",
-  "form",
-  "ul",
-  "ol",
-  "li",
-  "table",
-  "thead",
-  "tbody",
-  "tr",
-  "td",
-  "th",
-  "header",
-  "footer",
-  "nav",
-  "main",
-  "section",
-  "article",
-  "aside",
-  "label",
-  "strong",
-  "em",
-  "code",
-  "pre",
-  "blockquote"
-];
-var TEXT_TAGS = ["label", "span", "button", "p", "div", "h1", "h2", "h3", "h4", "h5", "h6"];
-function getWorkspaceRoot(filePath) {
-  let dir = path.resolve(filePath);
-  const { root } = path.parse(dir);
-  while (dir !== root) {
-    if (path.basename(dir) === "workspace") return dir;
-    dir = path.dirname(dir);
-  }
-  return path.resolve(process.cwd(), "..");
-}
-function shouldProcessTag(tagName, options) {
-  if (options.filterTag) {
-    if (Array.isArray(options.filterTag)) {
-      return options.filterTag.includes(tagName);
-    }
-    return options.filterTag(tagName);
-  }
-  return HTML_TAGS.includes(tagName.toLowerCase());
-}
-function getElementTextContent2(nodePath) {
-  const parent = nodePath.parent;
-  if (!t.isJSXElement(parent)) return "";
-  let text = "";
-  let hasExpression = false;
-  for (const child of parent.children) {
-    if (t.isJSXText(child)) {
-      text += child.value;
-    } else if (t.isJSXExpressionContainer(child)) {
-      hasExpression = true;
-    }
-  }
-  return hasExpression ? "" : text.trim();
-}
-function transformJSX(code, filePath, prefix, options) {
-  const ast = parser.parse(code, {
-    sourceType: "module",
-    plugins: ["jsx", "typescript", "classProperties", "decorators-legacy"]
-  });
-  const workspaceRoot = getWorkspaceRoot(filePath);
-  const relativePath = path.relative(workspaceRoot, filePath);
-  let hasChanges = false;
-  traverse(ast, {
-    JSXOpeningElement(nodePath) {
-      const node = nodePath.node;
-      const hasLocatorAttr = node.attributes.some(
-        (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name.startsWith(`data-${prefix}`)
-      );
-      if (hasLocatorAttr) return;
-      if (t.isJSXIdentifier(node.name) && node.name.name === "Fragment") return;
-      if (t.isJSXMemberExpression(node.name) && t.isJSXIdentifier(node.name.object) && node.name.object.name === "React" && t.isJSXIdentifier(node.name.property) && node.name.property.name === "Fragment")
-        return;
-      let tagName = "";
-      if (t.isJSXIdentifier(node.name)) {
-        tagName = node.name.name;
-      }
-      if (!shouldProcessTag(tagName, options)) return;
-      const line = node.loc?.start.line;
-      const column = node.loc?.start.column;
-      if (!line || column === void 0) return;
-      const textContent = TEXT_TAGS.includes(tagName.toLowerCase()) ? getElementTextContent2(nodePath) : "";
-      const attributes = [
-        t.jsxAttribute(t.jsxIdentifier(`data-${prefix}-path`), t.stringLiteral(relativePath)),
-        t.jsxAttribute(t.jsxIdentifier(`data-${prefix}-line`), t.stringLiteral(String(line))),
-        t.jsxAttribute(t.jsxIdentifier(`data-${prefix}-column`), t.stringLiteral(String(column))),
-        t.jsxAttribute(t.jsxIdentifier(`data-${prefix}-tag`), t.stringLiteral(tagName))
-      ];
-      if (textContent) {
-        attributes.push(
-          t.jsxAttribute(
-            t.jsxIdentifier(`data-${prefix}-text`),
-            t.stringLiteral(textContent)
-          )
-        );
-      }
-      const spreadIndex = node.attributes.findIndex((attr) => t.isJSXSpreadAttribute(attr));
-      if (spreadIndex === -1) {
-        node.attributes.push(...attributes);
-      } else {
-        node.attributes.splice(spreadIndex, 0, ...attributes);
-      }
-      hasChanges = true;
-    }
-  });
-  if (!hasChanges) return null;
-  const result = generate(ast, {}, code);
-  return {
-    code: result.code,
-    map: result.map
-  };
-}
-var transformCache = /* @__PURE__ */ new Map();
-function sourceLocator(options = {}) {
-  const {
-    include = ["src/**/*.{jsx,tsx,js,ts}"],
-    exclude = [],
-    prefix = "locator",
-    enable = true
-  } = options;
-  const includePatterns = Array.isArray(include) ? include : [include];
-  const excludePatterns = Array.isArray(exclude) ? exclude : [exclude];
-  return {
-    name: "@lego/plugin-source-locator",
-    enforce: "pre",
-    apply: "serve",
-    version: "0.0.1",
-    async transform(code, id) {
-      if (!enable) return;
-      const relativePath = path.relative(process.cwd(), id);
-      const isIncluded = micromatch.isMatch(relativePath, includePatterns);
-      const isExcluded = excludePatterns.length > 0 && micromatch.isMatch(relativePath, excludePatterns);
-      if (!isIncluded || isExcluded) return;
-      const ext = path.extname(id);
-      if (![".jsx", ".tsx", ".js", ".ts"].includes(ext)) return;
-      const hash = createHash("md5").update(code).digest("hex");
-      const cacheKey = `${id}:${hash}`;
-      if (transformCache.has(cacheKey)) {
-        return transformCache.get(cacheKey);
-      }
-      const result = transformJSX(code, id, prefix, options);
-      if (result) {
-        transformCache.set(cacheKey, result);
-        return result;
-      }
-      return null;
-    }
-  };
-}
-
-// src/index.ts
-try {
-  if (typeof window !== "undefined" && window.parent !== window) {
-    setupIframeBridge();
-    setupElementSelector();
-  }
-} catch {
-}
+import {
+  initIframeBridge,
+  sendToParent,
+  setupElementSelector,
+  setupIframeBridge
+} from "./chunk-4ILDPPTG.js";
 export {
+  initIframeBridge,
   sendToParent,
   setupElementSelector,
-  setupIframeBridge,
-  sourceLocator
+  setupIframeBridge
 };