@lego-build/plugins 0.0.1 → 0.0.3

package/dist/index.d.ts

@@ -3,10 +3,36 @@ declare function setupIframeBridge(): void;
 
 declare function setupElementSelector(): void;
 
+interface SourceLocatorOptions {
+    /** Files to include */
+    include?: string | string[];
+    /** Files to exclude */
+    exclude?: string | string[];
+    /** Prefix for data attributes (default: 'locator') */
+    prefix?: string;
+    /** Enable/disable the plugin (default: true) */
+    enable?: boolean;
+    /** Custom filter for tags */
+    filterTag?: string[] | ((tag: string) => boolean);
+    /** Auto inject iframe bridge import (default: true) */
+    autoInjectBridge?: boolean;
+    /** Entry files to inject bridge import (default: auto-detect main entry) */
+    entryFiles?: string[];
+}
+interface TransformResult {
+    code: string;
+    map: any;
+}
 /**
- * Auto-initialize iframe bridge when running in iframe.
- * Call this in your entry point or use setupIframeBridge/setupElementSelector manually.
+ * Vite plugin for adding source locator attributes to JSX elements.
+ * This enables click-to-source functionality in the preview iframe.
  */
-declare function initIframeBridge(): void;
+declare function sourceLocator(options?: SourceLocatorOptions): {
+    name: string;
+    enforce: "pre";
+    apply: "serve";
+    version: string;
+    transform(code: string, id: string): Promise<TransformResult | null | undefined>;
+};
 
-export { initIframeBridge, sendToParent, setupElementSelector, setupIframeBridge };
+export { type SourceLocatorOptions, sendToParent, setupElementSelector, setupIframeBridge, sourceLocator };

package/dist/index.js

@@ -1,6 +1,19 @@
 // src/bridge.ts
+function getParentOrigin() {
+  if (document.referrer) {
+    try {
+      return new URL(document.referrer).origin;
+    } catch {
+    }
+  }
+  if (typeof window !== "undefined" && window.location.hostname === "localhost") {
+    return "http://localhost:4000";
+  }
+  return "*";
+}
+var PARENT_ORIGIN = getParentOrigin();
 function sendToParent(type, payload) {
-  window.parent.postMessage({ type, payload }, "*");
+  window.parent.postMessage({ type, payload }, PARENT_ORIGIN);
 }
 function setupIframeBridge() {
   const pushState = window.history.pushState.bind(window.history);
@@ -90,16 +103,37 @@ function createTooltip() {
   document.body.appendChild(tooltip);
   return tooltip;
 }
+var EDITOR_MIN_WIDTH = 200;
+var EDITOR_APPROX_HEIGHT = 180;
+var EDITOR_OFFSET = 8;
+var VIEWPORT_PADDING = 16;
 function createInlineEditor(state, element, onSave, onCancel) {
   const rect = element.getBoundingClientRect();
   const elementText = getElementTextContent(element);
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const editorWidth = Math.max(rect.width, EDITOR_MIN_WIDTH);
+  let left = rect.left;
+  let top = rect.bottom + EDITOR_OFFSET;
+  if (left + editorWidth > viewportWidth - VIEWPORT_PADDING) {
+    left = viewportWidth - editorWidth - VIEWPORT_PADDING;
+  }
+  if (left < VIEWPORT_PADDING) {
+    left = VIEWPORT_PADDING;
+  }
+  if (top + EDITOR_APPROX_HEIGHT > viewportHeight - VIEWPORT_PADDING) {
+    top = rect.top - EDITOR_APPROX_HEIGHT - EDITOR_OFFSET;
+    if (top < VIEWPORT_PADDING) {
+      top = VIEWPORT_PADDING;
+    }
+  }
   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;
+    top: ${top}px;
+    left: ${left}px;
+    width: ${editorWidth}px;
     z-index: 2147483647;
     background: white;
     border: 2px solid #3b82f6;
@@ -107,6 +141,7 @@ function createInlineEditor(state, element, onSave, onCancel) {
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
     padding: 8px;
     font-family: ui-sans-serif, system-ui, sans-serif;
+    box-sizing: border-box;
   `;
   const header = document.createElement("div");
   header.style.cssText = `
@@ -216,16 +251,43 @@ function createInlineEditor(state, element, onSave, onCancel) {
   return editor;
 }
 function getElementTextContent(element) {
-  let text = "";
+  const MAX_TEXT_LENGTH = 200;
+  const truncateText = (text) => {
+    const trimmed = text.trim();
+    return trimmed.length > MAX_TEXT_LENGTH ? trimmed.slice(0, MAX_TEXT_LENGTH) + "..." : trimmed;
+  };
+  let directText = "";
   for (const node of element.childNodes) {
     if (node.nodeType === Node.TEXT_NODE) {
-      text += node.textContent?.trim() || "";
+      directText += node.textContent || "";
     }
   }
-  if (!text && element.children.length === 0) {
-    text = element.textContent?.trim() || "";
+  directText = directText.trim();
+  if (directText) {
+    return truncateText(directText);
   }
-  return text;
+  if (element.children.length === 1) {
+    const child = element.children[0];
+    const simpleWrapperTags = ["span", "strong", "em", "b", "i", "small", "mark", "del", "ins", "sub", "sup"];
+    if (simpleWrapperTags.includes(child.tagName.toLowerCase())) {
+      const childText = child.textContent?.trim() || "";
+      if (childText) {
+        return truncateText(childText);
+      }
+    }
+  }
+  const hasComplexChildren = Array.from(element.children).some((child) => {
+    const tagName = child.tagName.toLowerCase();
+    const complexTags = ["div", "section", "article", "ul", "ol", "table", "form", "nav", "header", "footer", "main"];
+    return complexTags.includes(tagName) || child.children.length > 0;
+  });
+  if (!hasComplexChildren && element.children.length <= 2) {
+    const fullText = element.textContent?.trim() || "";
+    if (fullText) {
+      return truncateText(fullText);
+    }
+  }
+  return "";
 }
 function getElementDepth(element) {
   let depth = 0;
@@ -465,6 +527,7 @@ function setupElementSelector() {
   };
   const handleClick = (e) => {
     if (!state.isActive) return;
+    e._legoSelectorHandled = true;
     if (state.isEditing) {
       const target = e.target;
       if (state.inlineEditor?.contains(target)) {
@@ -481,20 +544,23 @@ function setupElementSelector() {
       }
       e.preventDefault();
       e.stopPropagation();
-      e.stopImmediatePropagation();
       cancelInlineEdit();
       return;
     }
     e.preventDefault();
     e.stopPropagation();
-    e.stopImmediatePropagation();
     selectElement();
   };
   const handleDoubleClick = (e) => {
     if (!state.isActive || state.isEditing) return;
+    const target = e.target;
+    if (target.id === "lego-element-selector-overlay" || target.id === "lego-element-selector-tooltip" || target.id === "lego-inline-editor") {
+      return;
+    }
+    e._legoSelectorHandled = true;
     e.preventDefault();
     e.stopPropagation();
-    e.stopImmediatePropagation();
+    state.hoveredElement = target;
     startEditing();
   };
   const activateSelector = () => {
@@ -548,19 +614,221 @@ function setupElementSelector() {
   });
 }
 
-// src/index.ts
-function initIframeBridge() {
-  try {
-    if (window.parent !== window) {
-      setupIframeBridge();
-      setupElementSelector();
+// 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);
     }
-  } catch {
+    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 isEntryFile(filePath, entryFiles) {
+  if (entryFiles && entryFiles.length > 0) {
+    return entryFiles.some((entry) => filePath.endsWith(entry));
+  }
+  const fileName = path.basename(filePath);
+  const entryPatterns = [
+    "main.tsx",
+    "main.ts",
+    "main.jsx",
+    "main.js",
+    "index.tsx",
+    "index.ts",
+    "index.jsx",
+    "index.js",
+    "App.tsx",
+    "App.jsx"
+  ];
+  return entryPatterns.includes(fileName);
+}
+function sourceLocator(options = {}) {
+  const {
+    include = ["src/**/*.{jsx,tsx,js,ts}"],
+    exclude = [],
+    prefix = "locator",
+    enable = true,
+    autoInjectBridge = true,
+    entryFiles
+  } = 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;
+      if (autoInjectBridge && isEntryFile(id, entryFiles)) {
+        const bridgeImport = `import "@lego-build/plugins";`;
+        if (!code.includes(bridgeImport) && !code.includes("@lego-build/plugins")) {
+          code = `${bridgeImport}
+${code}`;
+        }
+      }
+      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 code !== code ? { code, map: null } : null;
+      const ext = path.extname(id);
+      if (![".jsx", ".tsx", ".js", ".ts"].includes(ext)) return null;
+      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 {
 }
 export {
-  initIframeBridge,
   sendToParent,
   setupElementSelector,
-  setupIframeBridge
+  setupIframeBridge,
+  sourceLocator
 };

package/dist/webpack-loader.d.ts

@@ -0,0 +1,25 @@
+interface SourceLocatorLoaderOptions {
+    /** Prefix for data attributes (default: 'locator') */
+    prefix?: string;
+    /** Custom filter for tags */
+    filterTag?: string[] | ((tag: string) => boolean);
+}
+/**
+ * Webpack loader for adding source locator attributes to JSX elements.
+ * Use in next.config.js with webpack config.
+ */
+declare function sourceLocatorLoader(this: any, source: string): string;
+/**
+ * Helper to add source locator loader to Next.js webpack config.
+ *
+ * @example
+ * // next.config.mjs
+ * import { withSourceLocator } from '@lego-build/plugins/next';
+ *
+ * export default withSourceLocator({
+ *   // your next config
+ * });
+ */
+declare function withSourceLocator(nextConfig?: any, loaderOptions?: SourceLocatorLoaderOptions): any;
+
+export { type SourceLocatorLoaderOptions, sourceLocatorLoader as default, withSourceLocator };

package/dist/webpack-loader.js

@@ -0,0 +1,198 @@
+// src/webpack-loader.ts
+import path from "path";
+import { createRequire } from "module";
+import * as parser from "@babel/parser";
+import traverse from "@babel/traverse";
+import generate from "@babel/generator";
+import * as t from "@babel/types";
+var require2 = createRequire(import.meta.url);
+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 getElementTextContent(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()) ? getElementTextContent(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 result.code;
+}
+function sourceLocatorLoader(source) {
+  const options = this.getOptions() || {};
+  const { prefix = "locator" } = options;
+  if (process.env.NODE_ENV !== "development") {
+    return source;
+  }
+  const ext = path.extname(this.resourcePath);
+  if (![".jsx", ".tsx", ".js", ".ts"].includes(ext)) {
+    return source;
+  }
+  if (this.resourcePath.includes("node_modules")) {
+    return source;
+  }
+  try {
+    const result = transformJSX(source, this.resourcePath, prefix, options);
+    return result || source;
+  } catch (error) {
+    console.error(`[source-locator] Error transforming ${this.resourcePath}:`, error);
+    return source;
+  }
+}
+function withSourceLocator(nextConfig = {}, loaderOptions = {}) {
+  return {
+    ...nextConfig,
+    webpack(config, options) {
+      if (options.dev) {
+        config.module.rules.push({
+          test: /\.(jsx|tsx|js|ts)$/,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: require2.resolve("@lego-build/plugins/webpack-loader"),
+              options: loaderOptions
+            }
+          ]
+        });
+        if (!options.isServer) {
+          const originalEntry = config.entry;
+          config.entry = async () => {
+            const entries = await (typeof originalEntry === "function" ? originalEntry() : originalEntry);
+            for (const entryName of Object.keys(entries)) {
+              if (Array.isArray(entries[entryName])) {
+                const bridgePath = require2.resolve("@lego-build/plugins");
+                if (!entries[entryName].includes(bridgePath)) {
+                  entries[entryName].unshift(bridgePath);
+                }
+              }
+            }
+            return entries;
+          };
+        }
+      }
+      if (typeof nextConfig.webpack === "function") {
+        return nextConfig.webpack(config, options);
+      }
+      return config;
+    }
+  };
+}
+export {
+  sourceLocatorLoader as default,
+  withSourceLocator
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lego-build/plugins",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -9,19 +9,47 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./auto": {
-      "import": "./dist/auto.js"
+    "./webpack-loader": {
+      "import": "./dist/webpack-loader.js"
+    },
+    "./next": {
+      "import": "./dist/webpack-loader.js"
     }
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsup src/index.ts src/auto.ts --format esm --dts",
-    "dev": "tsup src/index.ts src/auto.ts --format esm --dts --watch"
+    "build": "tsup src/index.ts src/webpack-loader.ts --format esm --dts",
+    "dev": "tsup src/index.ts src/webpack-loader.ts --format esm --dts --watch"
+  },
+  "dependencies": {
+    "@babel/generator": "^7.27.0",
+    "@babel/parser": "^7.27.0",
+    "@babel/traverse": "^7.27.0",
+    "@babel/types": "^7.27.0",
+    "micromatch": "^4.0.5"
   },
   "devDependencies": {
+    "@types/babel__generator": "^7.27.0",
+    "@types/babel__traverse": "^7.20.7",
+    "@types/micromatch": "^4.0.9",
+    "@types/node": "^22",
+    "@types/webpack": "^5.28.5",
     "tsup": "^8.0.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "webpack": "^5.98.0"
+  },
+  "peerDependencies": {
+    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0",
+    "webpack": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
+    }
   }
 }