@runner-ai/vite-uuid-tagger 0.0.4 → 0.0.6

package/dist/index.d.ts

@@ -1,12 +1,8 @@
 import { Plugin } from 'vite';
 
-interface ViteUUIDTaggerOptions {
-    /** Enable the plugin (default: true) */
-    enabled?: boolean;
-    /** Enable Tailwind theme registry extraction (default: true) */
-    extractColors?: boolean;
+interface UuidTaggerOptions {
+    projectRoot: string;
 }
+declare function uuidTagger(options: UuidTaggerOptions): Plugin;
 
-declare function viteUuidTagger(options?: ViteUUIDTaggerOptions): Plugin;
-
-export { type ViteUUIDTaggerOptions, viteUuidTagger as default };
+export { type UuidTaggerOptions, uuidTagger };

package/dist/index.js

@@ -1,416 +1,268 @@
-// src/features/dev-middleware.ts
-function createDevMiddleware() {
-  return {
-    configureServer(server) {
-      server.middlewares.use((req, res, next) => {
-        if (req.url === "/uuid-mappings.json") {
-          res.statusCode = 200;
-          res.setHeader("content-type", "application/json");
-          res.end(JSON.stringify({}));
-          return;
-        }
-        next();
-      });
-    }
-  };
-}
-
-// src/features/jsx-source-tagger.ts
-var CLIENT_RUNTIME_CODE = `
-import { jsxDEV as _jsxDEV, Fragment } from 'react/jsx-dev-runtime';
-
-if (typeof window !== 'undefined' && !window.sourceElementMap) {
-  window.sourceElementMap = new Map();
-}
-
-function getCleanFileName(fileName) {
-  if (!fileName) return '';
-  return fileName
-    .replace(/^.*?\\/src\\//, 'src/')
-    .replace(/^\\//, '');
-}
-
-function wrapRef(originalRef, sourceInfo) {
-  return function taggedRef(node) {
-    if (node && node instanceof Element) {
-      var loc = sourceInfo.fileName + ':' + sourceInfo.lineNumber + ':' + sourceInfo.columnNumber;
-      node.setAttribute('data-uuid-loc', loc);
-
-      var sym = Symbol.for('__jsxSource__');
-      node[sym] = sourceInfo;
-
-      if (typeof window !== 'undefined' && window.sourceElementMap) {
-        var key = loc;
-        if (!window.sourceElementMap.has(key)) {
-          window.sourceElementMap.set(key, new Set());
-        }
-        window.sourceElementMap.get(key).add(new WeakRef(node));
-      }
-    }
+// src/plugin.ts
+import path2 from "path";
+import { parse } from "@babel/parser";
+import MagicString from "magic-string";
 
-    if (typeof originalRef === 'function') {
-      originalRef(node);
-    } else if (originalRef && typeof originalRef === 'object') {
-      originalRef.current = node;
-    }
-  };
+// src/ast-helpers.ts
+import path from "path";
+var NON_TAGGABLE_ELEMENTS = ["Fragment", "React.Fragment"];
+var VALID_EXTENSIONS = /* @__PURE__ */ new Set([".jsx", ".tsx", ".js", ".ts"]);
+function shouldSkipFile(filename) {
+  return filename.includes("node_modules") || !VALID_EXTENSIONS.has(path.extname(filename));
 }
-
-var VOID_ELEMENTS = new Set([
-  'area','base','br','col','embed','hr','img','input',
-  'link','meta','param','source','track','wbr'
-]);
-
-var _isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
-
-export function jsxDEV(type, props, key, isStaticChildren, source, self) {
-  if (_isBrowser && source && source.fileName && typeof type === 'string' && !VOID_ELEMENTS.has(type)) {
-    var cleanFileName = getCleanFileName(source.fileName);
-    var sourceInfo = {
-      fileName: cleanFileName,
-      lineNumber: source.lineNumber || 0,
-      columnNumber: source.columnNumber || 0,
-    };
-
-    var newProps = Object.assign({}, props);
-    newProps.ref = wrapRef(props ? props.ref : undefined, sourceInfo);
-
-    return _jsxDEV(type, newProps, key, isStaticChildren, source, self);
+function getElementName(node) {
+  if (node.name.type === "JSXIdentifier") {
+    return node.name.name;
   }
-
-  return _jsxDEV(type, props, key, isStaticChildren, source, self);
-}
-
-export { Fragment };
-export { jsx, jsxs } from 'react/jsx-dev-runtime';
-`;
-var PASSTHROUGH_CODE = `export * from 'react/jsx-dev-runtime';
-`;
-function createJsxSourceTagger() {
-  return {
-    resolveId(source, importer, options) {
-      if (source !== "react/jsx-dev-runtime") {
-        return null;
-      }
-      if (importer?.includes("\0runner-jsx")) {
-        return null;
-      }
-      const self = this;
-      const env = self?.environment;
-      const isSSR = env?.config?.consumer === "server" || options?.ssr === true;
-      return isSSR ? "\0runner-jsx/passthrough" : "\0runner-jsx/client-runtime";
-    },
-    load(id) {
-      if (id === "\0runner-jsx/client-runtime") {
-        return CLIENT_RUNTIME_CODE;
-      }
-      if (id === "\0runner-jsx/passthrough") {
-        return PASSTHROUGH_CODE;
-      }
-      return null;
-    }
-  };
+  if (node.name.type === "JSXMemberExpression") {
+    return `${node.name.object.name}.${node.name.property.name}`;
+  }
+  return null;
 }
-
-// src/features/tailwind-registry.ts
-import fs from "fs/promises";
-import glob from "fast-glob";
-function parseThemeColors(cssContent) {
-  const themeColors = {};
-  const themeRegex = /@theme\s*\{([^}]*)\}/gs;
-  for (const match of cssContent.matchAll(themeRegex)) {
-    const content = match[1];
-    const colorRegex = /--color-([\w-]+):\s*([^;]+);/g;
-    for (const colorMatch of content.matchAll(colorRegex)) {
-      themeColors[colorMatch[1]] = colorMatch[2].trim();
-    }
+function shouldTagElement(node) {
+  if (node.type !== "JSXElement") {
+    return false;
   }
-  const rootRegex = /:root\s*\{([^}]*)\}/gs;
-  for (const match of cssContent.matchAll(rootRegex)) {
-    const content = match[1];
-    const colorRegex = /--color-([\w-]+):\s*([^;]+);/g;
-    for (const colorMatch of content.matchAll(colorRegex)) {
-      if (!themeColors[colorMatch[1]]) {
-        themeColors[colorMatch[1]] = colorMatch[2].trim();
-      }
-    }
+  const openingElement = node.openingElement;
+  if (!openingElement) {
+    return false;
+  }
+  const elementName = getElementName(openingElement);
+  if (!elementName || NON_TAGGABLE_ELEMENTS.includes(elementName)) {
+    return false;
   }
-  return themeColors;
+  return true;
 }
-function buildColorRegistry(tailwindColors = {}, tailwindSpacing = {}, themeColors = {}) {
-  const serializedColors = JSON.stringify(
-    tailwindColors,
-    (_, value) => typeof value === "function" ? void 0 : value
-  );
-  const serializedSpacing = JSON.stringify(
-    tailwindSpacing,
-    (_, value) => typeof value === "function" ? void 0 : value
-  );
-  const serializedThemeColors = JSON.stringify(themeColors);
-  return `
-    (function() {
-      var registry = { default: {}, custom: {} };
-
-      var tailwindColors = ${serializedColors};
-      if (tailwindColors && Object.keys(tailwindColors).length > 0) {
-        Object.entries(tailwindColors).forEach(function(entry) {
-          var name = entry[0], shades = entry[1];
-          if (name === 'lightBlue' || name === 'warmGray' || name === 'trueGray' || name === 'coolGray' || name === 'blueGray' || typeof shades === 'function') return;
-          if (typeof shades === 'object' && shades !== null && !Array.isArray(shades)) {
-            registry.default[name] = {};
-            Object.entries(shades).forEach(function(se) {
-              var shade = se[0], value = se[1];
-              if (typeof value === 'string') {
-                registry.default[name][shade] = {
-                  value: value,
-                  classes: { bg: 'bg-' + name + '-' + shade, text: 'text-' + name + '-' + shade, border: 'border-' + name + '-' + shade, ring: 'ring-' + name + '-' + shade }
-                };
-              }
-            });
-          } else if (typeof shades === 'string') {
-            registry.default[name] = {
-              value: shades,
-              classes: { bg: 'bg-' + name, text: 'text-' + name, border: 'border-' + name }
-            };
-          }
-        });
+function isStaticExpression(expression) {
+  if (!expression) {
+    return false;
+  }
+  if (expression.type === "JSXEmptyExpression") {
+    return true;
+  }
+  if (["NumericLiteral", "BooleanLiteral", "StringLiteral", "NullLiteral"].includes(expression.type)) {
+    return true;
+  }
+  if (expression.type === "ObjectExpression") {
+    const obj = expression;
+    return obj.properties.every((prop) => {
+      if (prop.type === "SpreadElement") {
+        return false;
       }
-
-      var themeColors = ${serializedThemeColors};
-      Object.entries(themeColors).forEach(function(entry) {
-        var name = entry[0], value = entry[1];
-        registry.custom[name] = {
-          value: value,
-          variable: '--color-' + name,
-          classes: { bg: 'bg-' + name, text: 'text-' + name, border: 'border-' + name, ring: 'ring-' + name }
-        };
-      });
-
-      var computed = getComputedStyle(document.documentElement);
-      var cssVarArray = Array.from(computed).filter(function(p) { return p.startsWith('--'); });
-      cssVarArray.forEach(function(prop) {
-        if (prop.startsWith('--color-')) {
-          var value = computed.getPropertyValue(prop).trim();
-          var name = prop.replace('--color-', '').replace(/^-+|-+$/g, '');
-          if (!registry.custom[name]) {
-            registry.custom[name] = {
-              value: value, variable: prop,
-              classes: { bg: 'bg-' + name, text: 'text-' + name, border: 'border-' + name, ring: 'ring-' + name }
-            };
-          }
+      if (prop.type === "ObjectProperty") {
+        if (prop.computed) {
+          return false;
         }
-      });
-
-      var tailwindSpacing = ${serializedSpacing};
-      var spacingRegistry = {};
-      if (tailwindSpacing && Object.keys(tailwindSpacing).length > 0) {
-        Object.entries(tailwindSpacing).forEach(function(entry) {
-          if (typeof entry[1] === 'string') spacingRegistry[entry[0]] = entry[1];
-        });
+        return isStaticExpression(prop.value);
       }
-
-      var baseSpacing = '0.25rem';
-      cssVarArray.forEach(function(prop) {
-        if (prop === '--spacing') baseSpacing = computed.getPropertyValue(prop).trim();
-      });
-
-      if (Object.keys(spacingRegistry).length === 0) {
-        var scale = [0, 'px', 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96];
-        scale.forEach(function(step) {
-          if (step === 0) { spacingRegistry['0'] = '0'; }
-          else if (step === 'px') { spacingRegistry['px'] = '1px'; }
-          else {
-            var match = baseSpacing.match(/([0-9.]+)([a-z%]+)/);
-            if (match) spacingRegistry[String(step)] = (parseFloat(match[1]) * step) + match[2];
-          }
-        });
+      return false;
+    });
+  }
+  if (expression.type === "ArrayExpression") {
+    const arr = expression;
+    return arr.elements.every((elem) => {
+      if (elem === null) {
+        return true;
       }
-
-      window.__TAILWIND_REGISTRY__ = {
-        colors: registry,
-        spacing: spacingRegistry,
-        baseSpacing: baseSpacing,
-        timestamp: Date.now()
-      };
-
-      if (window.parent !== window) {
-        window.parent.postMessage({ type: 'TAILWIND_REGISTRY_UPDATE', data: window.__TAILWIND_REGISTRY__ }, '*');
+      if (elem.type === "SpreadElement") {
+        return false;
       }
-    })();
-  `;
-}
-async function loadTailwindDefaults() {
-  try {
-    const defaultTheme = await import("tailwindcss/defaultTheme.js");
-    const rawColors = defaultTheme?.default?.colors;
-    const rawSpacing = defaultTheme?.default?.spacing;
-    const colors = typeof rawColors === "function" ? rawColors() : rawColors ?? {};
-    const spacing = typeof rawSpacing === "function" ? rawSpacing() : rawSpacing ?? {};
-    return { colors, spacing };
-  } catch {
-    return { colors: {}, spacing: {} };
+      return isStaticExpression(elem);
+    });
   }
+  return false;
 }
-function createTailwindRegistry() {
-  let tailwindColors = {};
-  let tailwindSpacing = {};
-  let themeColors = {};
-  return {
-    async buildStart() {
-      const tw = await loadTailwindDefaults();
-      tailwindColors = tw.colors;
-      tailwindSpacing = tw.spacing;
-      try {
-        const cssFiles = await glob("**/*.css", {
-          ignore: ["**/node_modules/**", "**/dist/**", "**/.next/**", "**/.git/**", "**/build/**"],
-          cwd: process.cwd(),
-          absolute: true
-        });
-        for (const file of cssFiles) {
-          try {
-            const content = await fs.readFile(file, "utf-8");
-            const parsed = parseThemeColors(content);
-            themeColors = { ...themeColors, ...parsed };
-          } catch {
-          }
-        }
-      } catch {
-      }
-    },
-    transformIndexHtml(html) {
-      const script = buildColorRegistry(tailwindColors, tailwindSpacing, themeColors);
-      return html.replace("</body>", `<script>${script}</script></body>`);
-    }
-  };
-}
-
-// src/features/virtual-overrides.ts
-var LEADING_DOT_SLASH = /^\.\//;
-var BACKSLASH = /\\/g;
-function normalizePath(path) {
-  return path.replace(LEADING_DOT_SLASH, "").replace(BACKSLASH, "/");
-}
-function isPathSafe(path) {
-  if (path.includes("..")) {
+function supportsContentEditable(jsxElement) {
+  if (!jsxElement.children || jsxElement.children.length === 0) {
     return false;
   }
-  if (path.includes("node_modules")) {
+  const hasValidChildren = jsxElement.children.every((child) => {
+    if (child.type === "JSXText") {
+      return true;
+    }
+    if (child.type === "JSXExpressionContainer") {
+      return isStaticExpression(child.expression);
+    }
+    return false;
+  });
+  if (!hasValidChildren) {
     return false;
   }
-  return true;
+  return jsxElement.children.some((child) => {
+    if (child.type === "JSXText") {
+      return child.value.trim().length > 0;
+    }
+    if (child.type === "JSXExpressionContainer") {
+      return child.expression.type !== "JSXEmptyExpression";
+    }
+    return false;
+  });
 }
-function createVirtualOverrides() {
-  const overrides = /* @__PURE__ */ new Map();
-  let _server = null;
-  function invalidateAndUpdate(path) {
-    if (!_server) {
-      return;
+function isInlineEditable(jsxElement) {
+  const hasStaticChildren = jsxElement.children && jsxElement.children.length > 0 && jsxElement.children.every((child) => {
+    if (child.type === "JSXText") {
+      return true;
     }
-    const normalizedPath = normalizePath(path);
-    const mod = _server.moduleGraph.getModuleById(normalizedPath);
-    if (mod) {
-      _server.moduleGraph.invalidateModule(mod);
-      _server.ws.send({
-        type: "update",
-        updates: [
-          {
-            type: "js-update",
-            path: mod.url,
-            acceptedPath: mod.url,
-            timestamp: Date.now()
-          }
-        ]
-      });
+    if (child.type === "JSXExpressionContainer") {
+      return isStaticExpression(child.expression);
+    }
+    return false;
+  });
+  const hasEditableContent = jsxElement.children?.some((child) => {
+    if (child.type === "JSXText") {
+      return child.value.trim().length > 0;
+    }
+    if (child.type === "JSXExpressionContainer") {
+      return child.expression.type !== "JSXEmptyExpression";
     }
+    return false;
+  });
+  if (hasStaticChildren && hasEditableContent) {
+    return true;
   }
-  return {
-    configureServer(server) {
-      _server = server;
-      server.ws.on("runner:override", (data) => {
-        const normalizedPath = normalizePath(data.path);
-        if (!isPathSafe(normalizedPath)) {
-          return;
-        }
-        overrides.set(normalizedPath, data.content);
-        invalidateAndUpdate(normalizedPath);
-      });
-      server.ws.on("runner:clear-override", (data) => {
-        const normalizedPath = normalizePath(data.path);
-        overrides.delete(normalizedPath);
-        invalidateAndUpdate(normalizedPath);
-      });
-      server.ws.on("runner:clear-all-overrides", () => {
-        const paths = Array.from(overrides.keys());
-        overrides.clear();
-        for (const path of paths) {
-          invalidateAndUpdate(path);
-        }
-      });
-    },
-    load(id) {
-      if (!id) {
-        return null;
+  if (jsxElement.openingElement.attributes && jsxElement.openingElement.attributes.length > 0) {
+    const hasStaticAttributes = jsxElement.openingElement.attributes.some((attr) => {
+      if (attr.type === "JSXSpreadAttribute") {
+        return false;
       }
-      const cleanId = id.split("?")[0];
-      const normalizedId = normalizePath(cleanId);
-      if (!isPathSafe(normalizedId)) {
-        return null;
+      if (attr.value && attr.value.type === "JSXExpressionContainer") {
+        return isStaticExpression(attr.value.expression);
+      }
+      if (attr.value && attr.value.type === "StringLiteral") {
+        return true;
       }
-      return overrides.get(normalizedId) ?? null;
+      return false;
+    });
+    if (hasStaticAttributes) {
+      return true;
     }
-  };
+  }
+  return false;
 }
 
-// src/plugin.ts
-function viteUuidTagger(options = {}) {
-  const { enabled = true, extractColors = true } = options;
-  if (!enabled) {
-    return {
-      name: "vite-uuid-tagger",
-      enforce: "pre"
+// src/uuid-mapping-manager.ts
+import { createHash } from "crypto";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
+import { dirname, join } from "path";
+var UUIDMappingManager = class {
+  mappingFile;
+  mappings;
+  constructor(projectRoot) {
+    this.mappingFile = join(projectRoot, "public", "uuid-mappings.json");
+    this.mappings = this.loadMappings();
+  }
+  loadMappings() {
+    try {
+      if (existsSync(this.mappingFile)) {
+        const content = readFileSync(this.mappingFile, "utf8");
+        return JSON.parse(content);
+      }
+    } catch {
+    }
+    return {};
+  }
+  saveMappings() {
+    try {
+      const dir = dirname(this.mappingFile);
+      if (!existsSync(dir)) {
+        mkdirSync(dir, { recursive: true });
+      }
+      writeFileSync(this.mappingFile, JSON.stringify(this.mappings, null, 2));
+    } catch {
+    }
+  }
+  generateStableUUID(seed) {
+    const hash = createHash("sha256").update(seed).digest("hex");
+    return [
+      hash.substring(0, 8),
+      hash.substring(8, 12),
+      hash.substring(12, 16),
+      hash.substring(16, 20),
+      hash.substring(20, 32)
+    ].join("-");
+  }
+  getOrCreateUUID(filePath, line, column, elementName) {
+    const existingUUID = Object.keys(this.mappings).find((uuid2) => {
+      const m = this.mappings[uuid2];
+      return m.filePath === filePath && m.line === line && m.column === column && m.elementName === elementName;
+    });
+    if (existingUUID) {
+      return existingUUID;
+    }
+    const seed = `${filePath}:${line}:${column}:${elementName}`;
+    const uuid = this.generateStableUUID(seed);
+    this.mappings[uuid] = {
+      filePath,
+      line,
+      column,
+      elementName,
+      lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
     };
+    this.saveMappings();
+    return uuid;
   }
-  const jsxTagger = createJsxSourceTagger();
-  const overrides = createVirtualOverrides();
-  const tailwindRegistry = extractColors ? createTailwindRegistry() : null;
-  const devMiddleware = createDevMiddleware();
+};
+
+// src/plugin.ts
+function uuidTagger(options) {
+  const { projectRoot } = options;
+  const uuidManager = new UUIDMappingManager(projectRoot);
   return {
     name: "vite-uuid-tagger",
     enforce: "pre",
-    resolveId(source, importer, resolveOptions) {
-      return jsxTagger.resolveId.call(this, source, importer, resolveOptions);
-    },
-    load(id) {
-      const overrideResult = overrides.load(id);
-      if (overrideResult !== null) {
-        return overrideResult;
+    async transform(code, id) {
+      if (shouldSkipFile(id)) {
+        return null;
       }
-      return jsxTagger.load(id);
-    },
-    config() {
-      return {
-        optimizeDeps: {
-          exclude: ["react/jsx-dev-runtime"]
-        }
-      };
-    },
-    configureServer(server) {
-      overrides.configureServer(server);
-      devMiddleware.configureServer(server);
-    },
-    async buildStart() {
-      if (tailwindRegistry) {
-        await tailwindRegistry.buildStart();
+      const ext = path2.extname(id);
+      if (ext !== ".tsx" && ext !== ".jsx") {
+        return null;
       }
-    },
-    transformIndexHtml(html) {
-      if (tailwindRegistry) {
-        return tailwindRegistry.transformIndexHtml(html);
+      const relativePath = path2.relative(projectRoot, id);
+      const { walk } = await import("estree-walker");
+      try {
+        const ast = parse(code, {
+          sourceType: "module",
+          plugins: ["jsx", "typescript"]
+        });
+        const magic = new MagicString(code);
+        let changed = 0;
+        walk(ast, {
+          enter(node) {
+            const n = node;
+            if (!shouldTagElement(n)) {
+              return;
+            }
+            const openingElement = n.openingElement;
+            const elementName = getElementName(openingElement);
+            if (!elementName) {
+              return;
+            }
+            const { line = 0, column = 0 } = openingElement.loc?.start ?? {};
+            const uuid = uuidManager.getOrCreateUUID(relativePath, line, column, elementName);
+            magic.appendLeft(openingElement.name.end ?? 0, ` data-uuid-loc="${uuid}"`);
+            if (supportsContentEditable(n)) {
+              magic.appendLeft(openingElement.name.end ?? 0, " data-content-editable");
+            }
+            if (isInlineEditable(n)) {
+              magic.appendLeft(openingElement.name.end ?? 0, " data-inline-editable");
+            }
+            changed++;
+          }
+        });
+        if (changed > 0) {
+          return {
+            code: magic.toString(),
+            map: magic.generateMap({ hires: true })
+          };
+        }
+        return null;
+      } catch {
+        return null;
       }
-      return html;
     }
   };
 }
 export {
-  viteUuidTagger as default
+  uuidTagger
 };

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "@runner-ai/vite-uuid-tagger",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -12,31 +14,22 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "tsup src/index.ts --format esm --dts --out-dir dist",
     "test": "vitest run",
-    "test:watch": "vitest",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf .turbo node_modules dist",
-    "publish:dev": "bun run build && npm publish --tag dev --access public",
     "publish:prod": "bun run build && npm publish --access public"
   },
   "dependencies": {
-    "fast-glob": "^3.3.2"
-  },
-  "devDependencies": {
-    "@types/react": "^19.0.0",
-    "tsup": "^8.5.0",
-    "typescript": "^5.8.0",
-    "vite": "^7.0.0",
-    "vitest": "^3.0.0"
+    "@babel/parser": "^7.24.0",
+    "estree-walker": "^3.0.3",
+    "magic-string": "^0.30.0"
   },
   "peerDependencies": {
-    "vite": ">=6.0.0",
-    "tailwindcss": ">=3.0.0"
+    "vite": ">=4.0.0"
   },
-  "peerDependenciesMeta": {
-    "tailwindcss": {
-      "optional": true
-    }
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "vite": "^7.0.0",
+    "vitest": "^3.0.0",
+    "typescript": "^5.8.0"
   }
 }