@lego-build/plugins 0.0.1 → 0.0.2

package/dist/index.d.ts

@@ -3,10 +3,32 @@ 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);
+}
+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

@@ -548,19 +548,193 @@ 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);
+    }
+    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;
     }
-  } catch {
+  };
+}
+
+// src/index.ts
+try {
+  if (typeof window !== "undefined" && window.parent !== window) {
+    setupIframeBridge();
+    setupElementSelector();
   }
+} catch {
 }
 export {
-  initIframeBridge,
   sendToParent,
   setupElementSelector,
-  setupIframeBridge
+  setupIframeBridge,
+  sourceLocator
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lego-build/plugins",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -8,20 +8,36 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    },
-    "./auto": {
-      "import": "./dist/auto.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 --format esm --dts",
+    "dev": "tsup src/index.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",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
   }
 }