vue3-vite-component-tagger-plugin 1.0.0

package/README.md

@@ -0,0 +1,71 @@
+# Vue 3 Vite Component Tagger
+
+A Vite plugin that automatically adds `data-soeasy-id` and `data-soeasy-name` attributes to your Vue 3 components. This is useful for identifying components in the DOM, for example for testing or analytics.
+
+## Installation
+
+```bash
+npm install vue3-vite-component-tagger
+# or
+yarn add vue3-vite-component-tagger
+# or
+pnpm add vue3-vite-component-tagger
+```
+
+## Usage
+
+Add the plugin to your `vite.config.ts` file:
+
+```ts
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import componentTagger from "vue3-vite-component-tagger";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), componentTagger()],
+});
+```
+
+The plugin will automatically add `data-soeasy-id` and `data-soeasy-name` to all your Vue components in development mode.
+
+### Example
+
+Given a Vue component:
+
+```vue
+<template>
+  <div>
+    <header>
+      <h1>Welcome</h1>
+    </header>
+    <button @click="handleClick">Click me</button>
+  </div>
+</template>
+```
+
+The plugin will transform it to:
+
+```vue
+<template>
+  <div data-soeasy-id="src/App.vue:2:3" data-soeasy-name="div">
+    <header data-soeasy-id="src/App.vue:3:5" data-soeasy-name="header">
+      <h1 data-soeasy-id="src/App.vue:4:7" data-soeasy-name="h1">Welcome</h1>
+    </header>
+    <button data-soeasy-id="src/App.vue:6:5" data-soeasy-name="button" @click="handleClick">Click me</button>
+  </div>
+</template>
+```
+
+The `data-soeasy-id` will be a unique identifier for each component instance, in the format `path/to/file.vue:line:column`.
+
+The `data-soeasy-name` will be the tag name of the element.
+
+## Features
+
+- Automatically tags all Vue template elements in `.vue` files
+- Adds unique `data-soeasy-id` based on file path and location
+- Adds `data-soeasy-name` with the element's tag name
+- Only runs in development mode (`serve`)
+- Skips elements that already have `data-soeasy-id`
+- Ignores `node_modules` files

package/dist/index.cjs

@@ -0,0 +1,97 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  default: () => dyadTagger
+});
+module.exports = __toCommonJS(index_exports);
+var import_compiler_sfc = require("@vue/compiler-sfc");
+var import_magic_string = __toESM(require("magic-string"), 1);
+var import_node_path = __toESM(require("path"), 1);
+var VALID_EXTENSIONS = /* @__PURE__ */ new Set([".vue"]);
+function dyadTagger(options = {}) {
+  const { idAttribute = "data-soeasy-id", nameAttribute = "data-soeasy-name" } = options;
+  return {
+    name: "vite-plugin-vue-dyad-tagger",
+    apply: "serve",
+    enforce: "pre",
+    async transform(code, id) {
+      try {
+        if (!VALID_EXTENSIONS.has(import_node_path.default.extname(id)) || id.includes("node_modules"))
+          return null;
+        const { descriptor } = (0, import_compiler_sfc.parse)(code, { filename: id });
+        if (!descriptor.template) {
+          return null;
+        }
+        const templateContent = descriptor.template.content;
+        const templateStart = descriptor.template.loc.start.offset;
+        const tagRegex = /<([a-zA-Z][a-zA-Z0-9-]*(?:\.[a-zA-Z][a-zA-Z0-9-]*)*)(\s+[^>]*?)?(\s*\/)?>/g;
+        const ms = new import_magic_string.default(code);
+        let match;
+        let processedTags = 0;
+        while ((match = tagRegex.exec(templateContent)) !== null) {
+          const [, tagName, attributes = ""] = match;
+          const tagStartInTemplate = match.index;
+          if (attributes.includes(idAttribute)) {
+            continue;
+          }
+          if (tagName === "template") {
+            continue;
+          }
+          const tagPositionInFile = templateStart + tagStartInTemplate;
+          const lines = code.substring(0, tagPositionInFile).split("\n");
+          const line = lines.length;
+          const column = lines[lines.length - 1].length + 1;
+          const elementId = `${id}:${line}:${column}`;
+          let insertPosition = templateStart + tagStartInTemplate + 1 + tagName.length;
+          const charAfterTagName = code[insertPosition];
+          const needsSpace = charAfterTagName !== " " && charAfterTagName !== "\n" && charAfterTagName !== "	";
+          const attributesToAdd = needsSpace ? ` ${idAttribute}="${elementId}" ${nameAttribute}="${tagName}"` : ` ${idAttribute}="${elementId}" ${nameAttribute}="${tagName}"`;
+          ms.appendLeft(insertPosition, attributesToAdd);
+          processedTags++;
+        }
+        if (processedTags === 0) {
+          return null;
+        }
+        return {
+          code: ms.toString(),
+          map: ms.generateMap({ hires: true })
+        };
+      } catch (error) {
+        console.warn(
+          `[vue-dyad-tagger] Warning: Failed to transform ${id}:`,
+          error
+        );
+        return null;
+      }
+    }
+  };
+}

package/dist/index.d.cts

@@ -0,0 +1,9 @@
+import { Plugin } from 'vite';
+
+interface DyadTaggerOptions {
+    idAttribute?: string;
+    nameAttribute?: string;
+}
+declare function dyadTagger(options?: DyadTaggerOptions): Plugin;
+
+export { dyadTagger as default };

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { Plugin } from 'vite';
+
+interface DyadTaggerOptions {
+    idAttribute?: string;
+    nameAttribute?: string;
+}
+declare function dyadTagger(options?: DyadTaggerOptions): Plugin;
+
+export { dyadTagger as default };

package/dist/index.js

@@ -0,0 +1,66 @@
+// src/index.ts
+import { parse } from "@vue/compiler-sfc";
+import MagicString from "magic-string";
+import path from "path";
+var VALID_EXTENSIONS = /* @__PURE__ */ new Set([".vue"]);
+function dyadTagger(options = {}) {
+  const { idAttribute = "data-soeasy-id", nameAttribute = "data-soeasy-name" } = options;
+  return {
+    name: "vite-plugin-vue-dyad-tagger",
+    apply: "serve",
+    enforce: "pre",
+    async transform(code, id) {
+      try {
+        if (!VALID_EXTENSIONS.has(path.extname(id)) || id.includes("node_modules"))
+          return null;
+        const { descriptor } = parse(code, { filename: id });
+        if (!descriptor.template) {
+          return null;
+        }
+        const templateContent = descriptor.template.content;
+        const templateStart = descriptor.template.loc.start.offset;
+        const tagRegex = /<([a-zA-Z][a-zA-Z0-9-]*(?:\.[a-zA-Z][a-zA-Z0-9-]*)*)(\s+[^>]*?)?(\s*\/)?>/g;
+        const ms = new MagicString(code);
+        let match;
+        let processedTags = 0;
+        while ((match = tagRegex.exec(templateContent)) !== null) {
+          const [, tagName, attributes = ""] = match;
+          const tagStartInTemplate = match.index;
+          if (attributes.includes(idAttribute)) {
+            continue;
+          }
+          if (tagName === "template") {
+            continue;
+          }
+          const tagPositionInFile = templateStart + tagStartInTemplate;
+          const lines = code.substring(0, tagPositionInFile).split("\n");
+          const line = lines.length;
+          const column = lines[lines.length - 1].length + 1;
+          const elementId = `${id}:${line}:${column}`;
+          let insertPosition = templateStart + tagStartInTemplate + 1 + tagName.length;
+          const charAfterTagName = code[insertPosition];
+          const needsSpace = charAfterTagName !== " " && charAfterTagName !== "\n" && charAfterTagName !== "	";
+          const attributesToAdd = needsSpace ? ` ${idAttribute}="${elementId}" ${nameAttribute}="${tagName}"` : ` ${idAttribute}="${elementId}" ${nameAttribute}="${tagName}"`;
+          ms.appendLeft(insertPosition, attributesToAdd);
+          processedTags++;
+        }
+        if (processedTags === 0) {
+          return null;
+        }
+        return {
+          code: ms.toString(),
+          map: ms.generateMap({ hires: true })
+        };
+      } catch (error) {
+        console.warn(
+          `[vue-dyad-tagger] Warning: Failed to transform ${id}:`,
+          error
+        );
+        return null;
+      }
+    }
+  };
+}
+export {
+  dyadTagger as default
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "vue3-vite-component-tagger-plugin",
+  "version": "1.0.0",
+  "description": "A Vite plugin that automatically adds data attributes to your Vue 3 components.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "npm run build -- --watch",
+    "lint": "eslint . --max-warnings 0",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "vue",
+    "vue3"
+  ],
+  "author": "Yaob1990",
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
+  },
+  "dependencies": {
+    "@vue/compiler-sfc": "^3.4.0",
+    "magic-string": "^0.30.5"
+  },
+  "devDependencies": {
+    "@types/node": "^20.8.9",
+    "eslint": "^8.52.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}