jsx-loc-plugin 0.2.1 → 0.2.3

package/dist/chunk-QPTFKQPZ.js

@@ -0,0 +1,170 @@
+// src/transform.ts
+import { parse } from "@babel/parser";
+import MagicString from "magic-string";
+import { relative, resolve } from "path";
+var VALID_EXTENSIONS = /* @__PURE__ */ new Set([".jsx", ".tsx"]);
+var DEFAULT_PARSER_OPTIONS = {
+  sourceType: "module",
+  plugins: [
+    "jsx",
+    "typescript",
+    "decorators-legacy",
+    "classProperties",
+    "classPrivateProperties",
+    "classPrivateMethods",
+    "exportDefaultFrom",
+    "exportNamespaceFrom",
+    "asyncGenerators",
+    "functionBind",
+    "functionSent",
+    "dynamicImport",
+    "numericSeparator",
+    "optionalChaining",
+    "importMeta",
+    "bigInt",
+    "optionalCatchBinding",
+    "throwExpressions",
+    "nullishCoalescingOperator",
+    "topLevelAwait"
+  ],
+  errorRecovery: true
+};
+var SKIP_ELEMENTS = /* @__PURE__ */ new Set([
+  "Fragment",
+  "React.Fragment",
+  "Suspense",
+  "React.Suspense",
+  "StrictMode",
+  "React.StrictMode",
+  "Profiler",
+  "React.Profiler"
+]);
+function shouldProcessFile(filePath) {
+  const ext = filePath.slice(filePath.lastIndexOf("."));
+  return VALID_EXTENSIONS.has(ext);
+}
+function getElementName(node) {
+  if (!node || !node.name) return null;
+  const name = node.name;
+  if (name.type === "JSXIdentifier") {
+    return name.name;
+  }
+  if (name.type === "JSXMemberExpression") {
+    const parts = [];
+    let current = name;
+    while (current) {
+      if (current.type === "JSXMemberExpression") {
+        parts.unshift(current.property.name);
+        current = current.object;
+      } else if (current.type === "JSXIdentifier") {
+        parts.unshift(current.name);
+        break;
+      } else {
+        break;
+      }
+    }
+    return parts.join(".");
+  }
+  if (name.type === "JSXNamespacedName") {
+    return `${name.namespace.name}:${name.name.name}`;
+  }
+  return null;
+}
+function shouldSkipElement(elementName) {
+  if (!elementName) return true;
+  return SKIP_ELEMENTS.has(elementName);
+}
+function hasDataLocAttribute(node) {
+  if (!node.attributes) return false;
+  return node.attributes.some(
+    (attr) => attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && attr.name.name === "data-loc"
+  );
+}
+function findInsertionPoint(node, source) {
+  let insertPos = node.name.end;
+  if (node.typeParameters) {
+    insertPos = node.typeParameters.end;
+  }
+  if (node.attributes && node.attributes.length > 0) {
+    const firstAttr = node.attributes[0];
+    const nameEnd = node.typeParameters ? node.typeParameters.end : node.name.end;
+    let pos = nameEnd;
+    while (pos < firstAttr.start && /\s/.test(source[pos])) {
+      pos++;
+    }
+    insertPos = pos;
+  }
+  return insertPos;
+}
+function normalizeFilePath(filePath) {
+  const abs = resolve(filePath).replace(/\\/g, "/");
+  const cwd = resolve(process.cwd()).replace(/\\/g, "/");
+  if (abs === cwd || abs.startsWith(cwd + "/")) {
+    return relative(cwd, abs).replace(/\\/g, "/");
+  }
+  return abs;
+}
+function transformJsxCode(source, filePath, options = {}) {
+  const parserOptions = {
+    ...DEFAULT_PARSER_OPTIONS,
+    ...options.parserOptions
+  };
+  let ast;
+  try {
+    ast = parse(source, parserOptions);
+  } catch (error) {
+    console.error(`[jsx-loc] Failed to parse ${filePath}:`, error);
+    return null;
+  }
+  const magicString = new MagicString(source);
+  const normalizedPath = normalizeFilePath(filePath);
+  let hasChanges = false;
+  function walk(node) {
+    if (!node || typeof node !== "object") return;
+    if (node.type === "JSXOpeningElement") {
+      const elementName = getElementName(node);
+      if (!shouldSkipElement(elementName) && !hasDataLocAttribute(node)) {
+        const loc = node.loc;
+        if (loc && loc.start) {
+          const line = loc.start.line;
+          const column = loc.start.column;
+          const locValue = `${normalizedPath}:${line}:${column}`;
+          const insertPos = findInsertionPoint(node, source);
+          magicString.appendLeft(insertPos, ` data-loc="${locValue}"`);
+          hasChanges = true;
+        }
+      }
+    }
+    for (const key of Object.keys(node)) {
+      const child = node[key];
+      if (Array.isArray(child)) {
+        for (const item of child) {
+          walk(item);
+        }
+      } else if (child && typeof child === "object" && child.type) {
+        walk(child);
+      }
+    }
+  }
+  if (ast.program && ast.program.body) {
+    for (const node of ast.program.body) {
+      walk(node);
+    }
+  }
+  if (!hasChanges) {
+    return null;
+  }
+  return {
+    code: magicString.toString(),
+    map: magicString.generateMap({
+      source: filePath,
+      file: filePath,
+      includeContent: true
+    })
+  };
+}
+
+export {
+  shouldProcessFile,
+  transformJsxCode
+};

package/dist/loader.js

@@ -1,168 +1,7 @@
-// src/transform.ts
-import { parse } from "@babel/parser";
-import MagicString from "magic-string";
-import { relative, resolve } from "path";
-var VALID_EXTENSIONS = /* @__PURE__ */ new Set([".jsx", ".tsx"]);
-var DEFAULT_PARSER_OPTIONS = {
-  sourceType: "module",
-  plugins: [
-    "jsx",
-    "typescript",
-    "decorators-legacy",
-    "classProperties",
-    "classPrivateProperties",
-    "classPrivateMethods",
-    "exportDefaultFrom",
-    "exportNamespaceFrom",
-    "asyncGenerators",
-    "functionBind",
-    "functionSent",
-    "dynamicImport",
-    "numericSeparator",
-    "optionalChaining",
-    "importMeta",
-    "bigInt",
-    "optionalCatchBinding",
-    "throwExpressions",
-    "nullishCoalescingOperator",
-    "topLevelAwait"
-  ],
-  errorRecovery: true
-};
-var SKIP_ELEMENTS = /* @__PURE__ */ new Set([
-  "Fragment",
-  "React.Fragment",
-  "Suspense",
-  "React.Suspense",
-  "StrictMode",
-  "React.StrictMode",
-  "Profiler",
-  "React.Profiler"
-]);
-function shouldProcessFile(filePath) {
-  const ext = filePath.slice(filePath.lastIndexOf("."));
-  return VALID_EXTENSIONS.has(ext);
-}
-function getElementName(node) {
-  if (!node || !node.name) return null;
-  const name = node.name;
-  if (name.type === "JSXIdentifier") {
-    return name.name;
-  }
-  if (name.type === "JSXMemberExpression") {
-    const parts = [];
-    let current = name;
-    while (current) {
-      if (current.type === "JSXMemberExpression") {
-        parts.unshift(current.property.name);
-        current = current.object;
-      } else if (current.type === "JSXIdentifier") {
-        parts.unshift(current.name);
-        break;
-      } else {
-        break;
-      }
-    }
-    return parts.join(".");
-  }
-  if (name.type === "JSXNamespacedName") {
-    return `${name.namespace.name}:${name.name.name}`;
-  }
-  return null;
-}
-function shouldSkipElement(elementName) {
-  if (!elementName) return true;
-  return SKIP_ELEMENTS.has(elementName);
-}
-function hasDataLocAttribute(node) {
-  if (!node.attributes) return false;
-  return node.attributes.some(
-    (attr) => attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && attr.name.name === "data-loc"
-  );
-}
-function findInsertionPoint(node, source) {
-  let insertPos = node.name.end;
-  if (node.typeParameters) {
-    insertPos = node.typeParameters.end;
-  }
-  if (node.attributes && node.attributes.length > 0) {
-    const firstAttr = node.attributes[0];
-    const nameEnd = node.typeParameters ? node.typeParameters.end : node.name.end;
-    let pos = nameEnd;
-    while (pos < firstAttr.start && /\s/.test(source[pos])) {
-      pos++;
-    }
-    insertPos = pos;
-  }
-  return insertPos;
-}
-function normalizeFilePath(filePath) {
-  const abs = resolve(filePath).replace(/\\/g, "/");
-  const cwd = resolve(process.cwd()).replace(/\\/g, "/");
-  if (abs === cwd || abs.startsWith(cwd + "/")) {
-    return relative(cwd, abs).replace(/\\/g, "/");
-  }
-  return abs;
-}
-function transformJsxCode(source, filePath, options = {}) {
-  const parserOptions = {
-    ...DEFAULT_PARSER_OPTIONS,
-    ...options.parserOptions
-  };
-  let ast;
-  try {
-    ast = parse(source, parserOptions);
-  } catch (error) {
-    console.error(`[jsx-loc] Failed to parse ${filePath}:`, error);
-    return null;
-  }
-  const magicString = new MagicString(source);
-  const normalizedPath = normalizeFilePath(filePath);
-  let hasChanges = false;
-  function walk(node) {
-    if (!node || typeof node !== "object") return;
-    if (node.type === "JSXOpeningElement") {
-      const elementName = getElementName(node);
-      if (!shouldSkipElement(elementName) && !hasDataLocAttribute(node)) {
-        const loc = node.loc;
-        if (loc && loc.start) {
-          const line = loc.start.line;
-          const column = loc.start.column;
-          const locValue = `${normalizedPath}:${line}:${column}`;
-          const insertPos = findInsertionPoint(node, source);
-          magicString.appendLeft(insertPos, ` data-loc="${locValue}"`);
-          hasChanges = true;
-        }
-      }
-    }
-    for (const key of Object.keys(node)) {
-      const child = node[key];
-      if (Array.isArray(child)) {
-        for (const item of child) {
-          walk(item);
-        }
-      } else if (child && typeof child === "object" && child.type) {
-        walk(child);
-      }
-    }
-  }
-  if (ast.program && ast.program.body) {
-    for (const node of ast.program.body) {
-      walk(node);
-    }
-  }
-  if (!hasChanges) {
-    return null;
-  }
-  return {
-    code: magicString.toString(),
-    map: magicString.generateMap({
-      source: filePath,
-      file: filePath,
-      includeContent: true
-    })
-  };
-}
+import {
+  shouldProcessFile,
+  transformJsxCode
+} from "./chunk-QPTFKQPZ.js";
 
 // src/loader.ts
 import fs from "fs";

package/dist/vite.cjs

@@ -0,0 +1,241 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vite.ts
+var vite_exports = {};
+__export(vite_exports, {
+  default: () => vite_default,
+  jsxLoc: () => jsxLoc
+});
+module.exports = __toCommonJS(vite_exports);
+
+// src/transform.ts
+var import_parser = require("@babel/parser");
+var import_magic_string = __toESM(require("magic-string"), 1);
+var import_path = require("path");
+var VALID_EXTENSIONS = /* @__PURE__ */ new Set([".jsx", ".tsx"]);
+var DEFAULT_PARSER_OPTIONS = {
+  sourceType: "module",
+  plugins: [
+    "jsx",
+    "typescript",
+    "decorators-legacy",
+    "classProperties",
+    "classPrivateProperties",
+    "classPrivateMethods",
+    "exportDefaultFrom",
+    "exportNamespaceFrom",
+    "asyncGenerators",
+    "functionBind",
+    "functionSent",
+    "dynamicImport",
+    "numericSeparator",
+    "optionalChaining",
+    "importMeta",
+    "bigInt",
+    "optionalCatchBinding",
+    "throwExpressions",
+    "nullishCoalescingOperator",
+    "topLevelAwait"
+  ],
+  errorRecovery: true
+};
+var SKIP_ELEMENTS = /* @__PURE__ */ new Set([
+  "Fragment",
+  "React.Fragment",
+  "Suspense",
+  "React.Suspense",
+  "StrictMode",
+  "React.StrictMode",
+  "Profiler",
+  "React.Profiler"
+]);
+function shouldProcessFile(filePath) {
+  const ext = filePath.slice(filePath.lastIndexOf("."));
+  return VALID_EXTENSIONS.has(ext);
+}
+function getElementName(node) {
+  if (!node || !node.name) return null;
+  const name = node.name;
+  if (name.type === "JSXIdentifier") {
+    return name.name;
+  }
+  if (name.type === "JSXMemberExpression") {
+    const parts = [];
+    let current = name;
+    while (current) {
+      if (current.type === "JSXMemberExpression") {
+        parts.unshift(current.property.name);
+        current = current.object;
+      } else if (current.type === "JSXIdentifier") {
+        parts.unshift(current.name);
+        break;
+      } else {
+        break;
+      }
+    }
+    return parts.join(".");
+  }
+  if (name.type === "JSXNamespacedName") {
+    return `${name.namespace.name}:${name.name.name}`;
+  }
+  return null;
+}
+function shouldSkipElement(elementName) {
+  if (!elementName) return true;
+  return SKIP_ELEMENTS.has(elementName);
+}
+function hasDataLocAttribute(node) {
+  if (!node.attributes) return false;
+  return node.attributes.some(
+    (attr) => attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && attr.name.name === "data-loc"
+  );
+}
+function findInsertionPoint(node, source) {
+  let insertPos = node.name.end;
+  if (node.typeParameters) {
+    insertPos = node.typeParameters.end;
+  }
+  if (node.attributes && node.attributes.length > 0) {
+    const firstAttr = node.attributes[0];
+    const nameEnd = node.typeParameters ? node.typeParameters.end : node.name.end;
+    let pos = nameEnd;
+    while (pos < firstAttr.start && /\s/.test(source[pos])) {
+      pos++;
+    }
+    insertPos = pos;
+  }
+  return insertPos;
+}
+function normalizeFilePath(filePath) {
+  const abs = (0, import_path.resolve)(filePath).replace(/\\/g, "/");
+  const cwd = (0, import_path.resolve)(process.cwd()).replace(/\\/g, "/");
+  if (abs === cwd || abs.startsWith(cwd + "/")) {
+    return (0, import_path.relative)(cwd, abs).replace(/\\/g, "/");
+  }
+  return abs;
+}
+function transformJsxCode(source, filePath, options = {}) {
+  const parserOptions = {
+    ...DEFAULT_PARSER_OPTIONS,
+    ...options.parserOptions
+  };
+  let ast;
+  try {
+    ast = (0, import_parser.parse)(source, parserOptions);
+  } catch (error) {
+    console.error(`[jsx-loc] Failed to parse ${filePath}:`, error);
+    return null;
+  }
+  const magicString = new import_magic_string.default(source);
+  const normalizedPath = normalizeFilePath(filePath);
+  let hasChanges = false;
+  function walk(node) {
+    if (!node || typeof node !== "object") return;
+    if (node.type === "JSXOpeningElement") {
+      const elementName = getElementName(node);
+      if (!shouldSkipElement(elementName) && !hasDataLocAttribute(node)) {
+        const loc = node.loc;
+        if (loc && loc.start) {
+          const line = loc.start.line;
+          const column = loc.start.column;
+          const locValue = `${normalizedPath}:${line}:${column}`;
+          const insertPos = findInsertionPoint(node, source);
+          magicString.appendLeft(insertPos, ` data-loc="${locValue}"`);
+          hasChanges = true;
+        }
+      }
+    }
+    for (const key of Object.keys(node)) {
+      const child = node[key];
+      if (Array.isArray(child)) {
+        for (const item of child) {
+          walk(item);
+        }
+      } else if (child && typeof child === "object" && child.type) {
+        walk(child);
+      }
+    }
+  }
+  if (ast.program && ast.program.body) {
+    for (const node of ast.program.body) {
+      walk(node);
+    }
+  }
+  if (!hasChanges) {
+    return null;
+  }
+  return {
+    code: magicString.toString(),
+    map: magicString.generateMap({
+      source: filePath,
+      file: filePath,
+      includeContent: true
+    })
+  };
+}
+
+// src/vite.ts
+function stripQuery(id) {
+  const q = id.indexOf("?");
+  return q === -1 ? id : id.slice(0, q);
+}
+function asArray(v) {
+  if (!v) return [];
+  return Array.isArray(v) ? v : [v];
+}
+function matchesAny(re, value) {
+  const list = asArray(re);
+  if (list.length === 0) return true;
+  return list.some((r) => r.test(value));
+}
+function jsxLoc(options = {}) {
+  const exclude = options.exclude ?? /node_modules/;
+  return {
+    name: "jsx-loc-plugin",
+    enforce: "pre",
+    transform(code, id) {
+      const filePath = stripQuery(id);
+      if (!shouldProcessFile(filePath)) return null;
+      if (!matchesAny(options.include, filePath)) return null;
+      if (asArray(exclude).some((r) => r.test(filePath))) return null;
+      const result = transformJsxCode(code, filePath);
+      if (!result) return null;
+      return {
+        code: result.code,
+        map: result.map
+      };
+    }
+  };
+}
+var vite_default = jsxLoc;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  jsxLoc
+});

package/dist/vite.d.cts

@@ -0,0 +1,25 @@
+import { Plugin } from 'vite';
+import { JsxLocPluginOptions } from './index.cjs';
+import 'next';
+
+/**
+ * Vite plugin that adds `data-loc` attributes to JSX elements.
+ *
+ * This powers UILint's in-browser inspection overlay for Vite projects.
+ */
+
+/**
+ * Create a Vite plugin that injects `data-loc` on JSX elements.
+ *
+ * @example
+ * import { defineConfig } from "vite";
+ * import react from "@vitejs/plugin-react";
+ * import { jsxLoc } from "jsx-loc-plugin/vite";
+ *
+ * export default defineConfig({
+ *   plugins: [react(), jsxLoc()],
+ * });
+ */
+declare function jsxLoc(options?: JsxLocPluginOptions): Plugin;
+
+export { jsxLoc as default, jsxLoc };

package/dist/vite.d.ts

@@ -0,0 +1,25 @@
+import { Plugin } from 'vite';
+import { JsxLocPluginOptions } from './index.js';
+import 'next';
+
+/**
+ * Vite plugin that adds `data-loc` attributes to JSX elements.
+ *
+ * This powers UILint's in-browser inspection overlay for Vite projects.
+ */
+
+/**
+ * Create a Vite plugin that injects `data-loc` on JSX elements.
+ *
+ * @example
+ * import { defineConfig } from "vite";
+ * import react from "@vitejs/plugin-react";
+ * import { jsxLoc } from "jsx-loc-plugin/vite";
+ *
+ * export default defineConfig({
+ *   plugins: [react(), jsxLoc()],
+ * });
+ */
+declare function jsxLoc(options?: JsxLocPluginOptions): Plugin;
+
+export { jsxLoc as default, jsxLoc };

package/dist/vite.js

@@ -0,0 +1,43 @@
+import {
+  shouldProcessFile,
+  transformJsxCode
+} from "./chunk-QPTFKQPZ.js";
+
+// src/vite.ts
+function stripQuery(id) {
+  const q = id.indexOf("?");
+  return q === -1 ? id : id.slice(0, q);
+}
+function asArray(v) {
+  if (!v) return [];
+  return Array.isArray(v) ? v : [v];
+}
+function matchesAny(re, value) {
+  const list = asArray(re);
+  if (list.length === 0) return true;
+  return list.some((r) => r.test(value));
+}
+function jsxLoc(options = {}) {
+  const exclude = options.exclude ?? /node_modules/;
+  return {
+    name: "jsx-loc-plugin",
+    enforce: "pre",
+    transform(code, id) {
+      const filePath = stripQuery(id);
+      if (!shouldProcessFile(filePath)) return null;
+      if (!matchesAny(options.include, filePath)) return null;
+      if (asArray(exclude).some((r) => r.test(filePath))) return null;
+      const result = transformJsxCode(code, filePath);
+      if (!result) return null;
+      return {
+        code: result.code,
+        map: result.map
+      };
+    }
+  };
+}
+var vite_default = jsxLoc;
+export {
+  vite_default as default,
+  jsxLoc
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsx-loc-plugin",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Next.js plugin that adds data-loc attributes to JSX elements for UILint inspection",
   "author": "Peter Suggate",
   "license": "MIT",
@@ -31,6 +31,11 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js",
+      "require": "./dist/vite.cjs"
     }
   },
   "files": [
@@ -43,10 +48,12 @@
   "devDependencies": {
     "next": "^16.1.1",
     "tsup": "^8.0.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0"
   },
   "peerDependencies": {
-    "next": ">=14.0.0"
+    "next": ">=14.0.0",
+    "vite": ">=5.0.0"
   },
   "scripts": {
     "build": "tsup",