@visual-agentic-dev/react-devtools 1.1.4 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +134 -0
- package/dist/index.d.mts +22 -12
- package/dist/index.d.ts +22 -12
- package/dist/index.js +121 -42
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +121 -42
- package/dist/index.mjs.map +1 -1
- package/dist/unplugin/jsx-source.d.mts +19 -0
- package/dist/unplugin/jsx-source.d.ts +19 -0
- package/dist/{vite-plugin → unplugin}/jsx-source.js +33 -16
- package/dist/unplugin/jsx-source.js.map +1 -0
- package/dist/{vite-plugin → unplugin}/jsx-source.mjs +27 -15
- package/dist/unplugin/jsx-source.mjs.map +1 -0
- package/package.json +11 -17
- package/dist/babel-plugin/jsx-source.d.mts +0 -12
- package/dist/babel-plugin/jsx-source.d.ts +0 -12
- package/dist/babel-plugin/jsx-source.js +0 -73
- package/dist/babel-plugin/jsx-source.js.map +0 -1
- package/dist/babel-plugin/jsx-source.mjs +0 -42
- package/dist/babel-plugin/jsx-source.mjs.map +0 -1
- package/dist/vite-plugin/jsx-source.d.mts +0 -17
- package/dist/vite-plugin/jsx-source.d.ts +0 -17
- package/dist/vite-plugin/jsx-source.js.map +0 -1
- package/dist/vite-plugin/jsx-source.mjs.map +0 -1
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as _babel_core from '@babel/core';
|
|
2
|
-
import { PluginObj } from '@babel/core';
|
|
3
|
-
|
|
4
|
-
interface PluginOptions {
|
|
5
|
-
/** Prefix for the data attribute (default: 'vdev') */
|
|
6
|
-
prefix?: string;
|
|
7
|
-
/** File patterns to exclude */
|
|
8
|
-
exclude?: RegExp[];
|
|
9
|
-
}
|
|
10
|
-
declare const _default: (api: object, options: PluginOptions | null | undefined, dirname: string) => PluginObj<_babel_core.PluginPass>;
|
|
11
|
-
|
|
12
|
-
export { _default as default };
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
|
|
30
|
-
// src/babel-plugin/jsx-source.ts
|
|
31
|
-
var jsx_source_exports = {};
|
|
32
|
-
__export(jsx_source_exports, {
|
|
33
|
-
default: () => jsx_source_default
|
|
34
|
-
});
|
|
35
|
-
module.exports = __toCommonJS(jsx_source_exports);
|
|
36
|
-
var import_helper_plugin_utils = require("@babel/helper-plugin-utils");
|
|
37
|
-
var t = __toESM(require("@babel/types"));
|
|
38
|
-
var jsx_source_default = (0, import_helper_plugin_utils.declare)((api, options) => {
|
|
39
|
-
api.assertVersion(7);
|
|
40
|
-
const prefix = options.prefix || "vdev";
|
|
41
|
-
const exclude = options.exclude || [/node_modules/];
|
|
42
|
-
return {
|
|
43
|
-
name: "visual-agentic-dev-jsx-source",
|
|
44
|
-
visitor: {
|
|
45
|
-
JSXOpeningElement(path, state) {
|
|
46
|
-
const filename = state.filename || "";
|
|
47
|
-
if (exclude.some((pattern) => pattern.test(filename))) {
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
const { line, column } = path.node.loc?.start || {};
|
|
51
|
-
if (!filename || line === void 0) return;
|
|
52
|
-
const hasAttr = path.node.attributes.some(
|
|
53
|
-
(attr) => t.isJSXAttribute(attr) && (attr.name.name === `data-${prefix}-file` || attr.name.name === `data-${prefix}-source`)
|
|
54
|
-
);
|
|
55
|
-
if (hasAttr) return;
|
|
56
|
-
const fileAttr = t.jsxAttribute(
|
|
57
|
-
t.jsxIdentifier(`data-${prefix}-file`),
|
|
58
|
-
t.stringLiteral(filename)
|
|
59
|
-
);
|
|
60
|
-
const lineAttr = t.jsxAttribute(
|
|
61
|
-
t.jsxIdentifier(`data-${prefix}-line`),
|
|
62
|
-
t.stringLiteral(String(line))
|
|
63
|
-
);
|
|
64
|
-
const colAttr = t.jsxAttribute(
|
|
65
|
-
t.jsxIdentifier(`data-${prefix}-col`),
|
|
66
|
-
t.stringLiteral(String(column))
|
|
67
|
-
);
|
|
68
|
-
path.node.attributes.push(fileAttr, lineAttr, colAttr);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
});
|
|
73
|
-
//# sourceMappingURL=jsx-source.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/babel-plugin/jsx-source.ts"],"sourcesContent":["import { declare } from '@babel/helper-plugin-utils';\nimport type { PluginObj, NodePath } from '@babel/core';\nimport * as t from '@babel/types';\n\ninterface PluginOptions {\n /** Prefix for the data attribute (default: 'vdev') */\n prefix?: string;\n /** File patterns to exclude */\n exclude?: RegExp[];\n}\n\nexport default declare((api, options: PluginOptions): PluginObj => {\n api.assertVersion(7);\n\n const prefix = options.prefix || 'vdev';\n const exclude = options.exclude || [/node_modules/];\n\n return {\n name: 'visual-agentic-dev-jsx-source',\n visitor: {\n JSXOpeningElement(path: NodePath<t.JSXOpeningElement>, state) {\n const filename = state.filename || '';\n\n // Check if file should be excluded\n if (exclude.some(pattern => pattern.test(filename))) {\n return;\n }\n\n const { line, column } = path.node.loc?.start || {};\n\n if (!filename || line === undefined) return;\n\n // Check if attribute already exists\n const hasAttr = path.node.attributes.some(\n attr => t.isJSXAttribute(attr) &&\n (attr.name.name === `data-${prefix}-file` ||\n attr.name.name === `data-${prefix}-source`)\n );\n\n if (hasAttr) return;\n\n // Use separate attributes to avoid JSON escaping issues with esbuild\n // Format: data-vdev-file, data-vdev-line, data-vdev-col\n const fileAttr = t.jsxAttribute(\n t.jsxIdentifier(`data-${prefix}-file`),\n t.stringLiteral(filename)\n );\n\n const lineAttr = t.jsxAttribute(\n t.jsxIdentifier(`data-${prefix}-line`),\n t.stringLiteral(String(line))\n );\n\n const colAttr = t.jsxAttribute(\n t.jsxIdentifier(`data-${prefix}-col`),\n t.stringLiteral(String(column))\n );\n\n path.node.attributes.push(fileAttr, lineAttr, colAttr);\n },\n },\n };\n});\n\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAAwB;AAExB,QAAmB;AASnB,IAAO,yBAAQ,oCAAQ,CAAC,KAAK,YAAsC;AAC/D,MAAI,cAAc,CAAC;AAEnB,QAAM,SAAS,QAAQ,UAAU;AACjC,QAAM,UAAU,QAAQ,WAAW,CAAC,cAAc;AAElD,SAAO;AAAA,IACH,MAAM;AAAA,IACN,SAAS;AAAA,MACL,kBAAkB,MAAqC,OAAO;AAC1D,cAAM,WAAW,MAAM,YAAY;AAGnC,YAAI,QAAQ,KAAK,aAAW,QAAQ,KAAK,QAAQ,CAAC,GAAG;AACjD;AAAA,QACJ;AAEA,cAAM,EAAE,MAAM,OAAO,IAAI,KAAK,KAAK,KAAK,SAAS,CAAC;AAElD,YAAI,CAAC,YAAY,SAAS,OAAW;AAGrC,cAAM,UAAU,KAAK,KAAK,WAAW;AAAA,UACjC,UAAU,iBAAe,IAAI,MACxB,KAAK,KAAK,SAAS,QAAQ,MAAM,WAC9B,KAAK,KAAK,SAAS,QAAQ,MAAM;AAAA,QAC7C;AAEA,YAAI,QAAS;AAIb,cAAM,WAAa;AAAA,UACb,gBAAc,QAAQ,MAAM,OAAO;AAAA,UACnC,gBAAc,QAAQ;AAAA,QAC5B;AAEA,cAAM,WAAa;AAAA,UACb,gBAAc,QAAQ,MAAM,OAAO;AAAA,UACnC,gBAAc,OAAO,IAAI,CAAC;AAAA,QAChC;AAEA,cAAM,UAAY;AAAA,UACZ,gBAAc,QAAQ,MAAM,MAAM;AAAA,UAClC,gBAAc,OAAO,MAAM,CAAC;AAAA,QAClC;AAEA,aAAK,KAAK,WAAW,KAAK,UAAU,UAAU,OAAO;AAAA,MACzD;AAAA,IACJ;AAAA,EACJ;AACJ,CAAC;","names":[]}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
// src/babel-plugin/jsx-source.ts
|
|
2
|
-
import { declare } from "@babel/helper-plugin-utils";
|
|
3
|
-
import * as t from "@babel/types";
|
|
4
|
-
var jsx_source_default = declare((api, options) => {
|
|
5
|
-
api.assertVersion(7);
|
|
6
|
-
const prefix = options.prefix || "vdev";
|
|
7
|
-
const exclude = options.exclude || [/node_modules/];
|
|
8
|
-
return {
|
|
9
|
-
name: "visual-agentic-dev-jsx-source",
|
|
10
|
-
visitor: {
|
|
11
|
-
JSXOpeningElement(path, state) {
|
|
12
|
-
const filename = state.filename || "";
|
|
13
|
-
if (exclude.some((pattern) => pattern.test(filename))) {
|
|
14
|
-
return;
|
|
15
|
-
}
|
|
16
|
-
const { line, column } = path.node.loc?.start || {};
|
|
17
|
-
if (!filename || line === void 0) return;
|
|
18
|
-
const hasAttr = path.node.attributes.some(
|
|
19
|
-
(attr) => t.isJSXAttribute(attr) && (attr.name.name === `data-${prefix}-file` || attr.name.name === `data-${prefix}-source`)
|
|
20
|
-
);
|
|
21
|
-
if (hasAttr) return;
|
|
22
|
-
const fileAttr = t.jsxAttribute(
|
|
23
|
-
t.jsxIdentifier(`data-${prefix}-file`),
|
|
24
|
-
t.stringLiteral(filename)
|
|
25
|
-
);
|
|
26
|
-
const lineAttr = t.jsxAttribute(
|
|
27
|
-
t.jsxIdentifier(`data-${prefix}-line`),
|
|
28
|
-
t.stringLiteral(String(line))
|
|
29
|
-
);
|
|
30
|
-
const colAttr = t.jsxAttribute(
|
|
31
|
-
t.jsxIdentifier(`data-${prefix}-col`),
|
|
32
|
-
t.stringLiteral(String(column))
|
|
33
|
-
);
|
|
34
|
-
path.node.attributes.push(fileAttr, lineAttr, colAttr);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
});
|
|
39
|
-
export {
|
|
40
|
-
jsx_source_default as default
|
|
41
|
-
};
|
|
42
|
-
//# sourceMappingURL=jsx-source.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/babel-plugin/jsx-source.ts"],"sourcesContent":["import { declare } from '@babel/helper-plugin-utils';\nimport type { PluginObj, NodePath } from '@babel/core';\nimport * as t from '@babel/types';\n\ninterface PluginOptions {\n /** Prefix for the data attribute (default: 'vdev') */\n prefix?: string;\n /** File patterns to exclude */\n exclude?: RegExp[];\n}\n\nexport default declare((api, options: PluginOptions): PluginObj => {\n api.assertVersion(7);\n\n const prefix = options.prefix || 'vdev';\n const exclude = options.exclude || [/node_modules/];\n\n return {\n name: 'visual-agentic-dev-jsx-source',\n visitor: {\n JSXOpeningElement(path: NodePath<t.JSXOpeningElement>, state) {\n const filename = state.filename || '';\n\n // Check if file should be excluded\n if (exclude.some(pattern => pattern.test(filename))) {\n return;\n }\n\n const { line, column } = path.node.loc?.start || {};\n\n if (!filename || line === undefined) return;\n\n // Check if attribute already exists\n const hasAttr = path.node.attributes.some(\n attr => t.isJSXAttribute(attr) &&\n (attr.name.name === `data-${prefix}-file` ||\n attr.name.name === `data-${prefix}-source`)\n );\n\n if (hasAttr) return;\n\n // Use separate attributes to avoid JSON escaping issues with esbuild\n // Format: data-vdev-file, data-vdev-line, data-vdev-col\n const fileAttr = t.jsxAttribute(\n t.jsxIdentifier(`data-${prefix}-file`),\n t.stringLiteral(filename)\n );\n\n const lineAttr = t.jsxAttribute(\n t.jsxIdentifier(`data-${prefix}-line`),\n t.stringLiteral(String(line))\n );\n\n const colAttr = t.jsxAttribute(\n t.jsxIdentifier(`data-${prefix}-col`),\n t.stringLiteral(String(column))\n );\n\n path.node.attributes.push(fileAttr, lineAttr, colAttr);\n },\n },\n };\n});\n\n"],"mappings":";AAAA,SAAS,eAAe;AAExB,YAAY,OAAO;AASnB,IAAO,qBAAQ,QAAQ,CAAC,KAAK,YAAsC;AAC/D,MAAI,cAAc,CAAC;AAEnB,QAAM,SAAS,QAAQ,UAAU;AACjC,QAAM,UAAU,QAAQ,WAAW,CAAC,cAAc;AAElD,SAAO;AAAA,IACH,MAAM;AAAA,IACN,SAAS;AAAA,MACL,kBAAkB,MAAqC,OAAO;AAC1D,cAAM,WAAW,MAAM,YAAY;AAGnC,YAAI,QAAQ,KAAK,aAAW,QAAQ,KAAK,QAAQ,CAAC,GAAG;AACjD;AAAA,QACJ;AAEA,cAAM,EAAE,MAAM,OAAO,IAAI,KAAK,KAAK,KAAK,SAAS,CAAC;AAElD,YAAI,CAAC,YAAY,SAAS,OAAW;AAGrC,cAAM,UAAU,KAAK,KAAK,WAAW;AAAA,UACjC,UAAU,iBAAe,IAAI,MACxB,KAAK,KAAK,SAAS,QAAQ,MAAM,WAC9B,KAAK,KAAK,SAAS,QAAQ,MAAM;AAAA,QAC7C;AAEA,YAAI,QAAS;AAIb,cAAM,WAAa;AAAA,UACb,gBAAc,QAAQ,MAAM,OAAO;AAAA,UACnC,gBAAc,QAAQ;AAAA,QAC5B;AAEA,cAAM,WAAa;AAAA,UACb,gBAAc,QAAQ,MAAM,OAAO;AAAA,UACnC,gBAAc,OAAO,IAAI,CAAC;AAAA,QAChC;AAEA,cAAM,UAAY;AAAA,UACZ,gBAAc,QAAQ,MAAM,MAAM;AAAA,UAClC,gBAAc,OAAO,MAAM,CAAC;AAAA,QAClC;AAEA,aAAK,KAAK,WAAW,KAAK,UAAU,UAAU,OAAO;AAAA,MACzD;AAAA,IACJ;AAAA,EACJ;AACJ,CAAC;","names":[]}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Plugin } from 'vite';
|
|
2
|
-
|
|
3
|
-
interface VdevPluginOptions {
|
|
4
|
-
/** Prefix for the data attribute (default: 'vdev') */
|
|
5
|
-
prefix?: string;
|
|
6
|
-
/** File patterns to exclude */
|
|
7
|
-
exclude?: RegExp[];
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* Vite plugin to inject source location data attributes into JSX elements.
|
|
11
|
-
* This enables the Visual Dev Tool to locate source code from rendered elements.
|
|
12
|
-
*
|
|
13
|
-
* Works with @vitejs/plugin-react-swc for stable HMR support.
|
|
14
|
-
*/
|
|
15
|
-
declare function vdevJsxSource(options?: VdevPluginOptions): Plugin;
|
|
16
|
-
|
|
17
|
-
export { type VdevPluginOptions, vdevJsxSource as default, vdevJsxSource };
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Plugin } from 'vite';
|
|
2
|
-
|
|
3
|
-
interface VdevPluginOptions {
|
|
4
|
-
/** Prefix for the data attribute (default: 'vdev') */
|
|
5
|
-
prefix?: string;
|
|
6
|
-
/** File patterns to exclude */
|
|
7
|
-
exclude?: RegExp[];
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* Vite plugin to inject source location data attributes into JSX elements.
|
|
11
|
-
* This enables the Visual Dev Tool to locate source code from rendered elements.
|
|
12
|
-
*
|
|
13
|
-
* Works with @vitejs/plugin-react-swc for stable HMR support.
|
|
14
|
-
*/
|
|
15
|
-
declare function vdevJsxSource(options?: VdevPluginOptions): Plugin;
|
|
16
|
-
|
|
17
|
-
export { type VdevPluginOptions, vdevJsxSource as default, vdevJsxSource };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/vite-plugin/jsx-source.ts"],"sourcesContent":["import type { Plugin, TransformResult } from 'vite';\nimport MagicString from 'magic-string';\n\nexport interface VdevPluginOptions {\n /** Prefix for the data attribute (default: 'vdev') */\n prefix?: string;\n /** File patterns to exclude */\n exclude?: RegExp[];\n}\n\n/**\n * Vite plugin to inject source location data attributes into JSX elements.\n * This enables the Visual Dev Tool to locate source code from rendered elements.\n * \n * Works with @vitejs/plugin-react-swc for stable HMR support.\n */\nexport function vdevJsxSource(options: VdevPluginOptions = {}): Plugin {\n const prefix = options.prefix || 'vdev';\n const exclude = options.exclude || [/node_modules/];\n\n return {\n name: 'vdev-jsx-source',\n // Use 'post' to run after other transforms, avoiding HMR issues\n enforce: 'post',\n\n transform(code: string, id: string): TransformResult | null {\n // Skip excluded files\n if (exclude.some(pattern => pattern.test(id))) {\n return null;\n }\n\n // Only process JSX/TSX files\n if (!/\\.[jt]sx$/.test(id)) {\n return null;\n }\n\n // Skip if no JSX-like patterns (quick check)\n if (!code.includes('jsx(') && !code.includes('jsxs(') && !code.includes('jsxDEV(')) {\n return null;\n }\n\n // After SWC transform, JSX becomes function calls like:\n // jsx(\"div\", { ... }) or jsxDEV(\"div\", { ... }, ...)\n // We inject our data attributes into the props object\n\n const magicString = new MagicString(code);\n let modified = false;\n\n // Match jsx/jsxs/jsxDEV function calls\n // Pattern: jsx(\"tagName\", { props }) or jsx(Component, { props })\n const jsxCallRegex = /\\b(jsx|jsxs|jsxDEV)\\s*\\(\\s*(?:\"([^\"]+)\"|'([^']+)'|([A-Z][a-zA-Z0-9_$.]*)|([a-z][a-zA-Z0-9_]*))\\s*,\\s*\\{/g;\n\n // Track line numbers for source location\n const lines = code.split('\\n');\n const getLineCol = (index: number) => {\n let line = 1;\n let lastNewline = -1;\n for (let i = 0; i < index && i < code.length; i++) {\n if (code[i] === '\\n') {\n line++;\n lastNewline = i;\n }\n }\n return { line, col: index - lastNewline - 1 };\n };\n\n let match;\n while ((match = jsxCallRegex.exec(code)) !== null) {\n const openBraceIndex = match.index + match[0].length - 1;\n const { line, col } = getLineCol(match.index);\n\n // Check if already has our data attribute\n const nextChars = code.slice(openBraceIndex + 1, openBraceIndex + 100);\n if (nextChars.includes(`\"data-${prefix}-file\"`)) {\n continue;\n }\n\n // Inject data attributes as first properties\n const injection = `\"data-${prefix}-file\": \"${id}\", \"data-${prefix}-line\": \"${line}\", \"data-${prefix}-col\": \"${col}\", `;\n\n magicString.appendLeft(openBraceIndex + 1, injection);\n modified = true;\n }\n\n if (!modified) {\n return null;\n }\n\n return {\n code: magicString.toString(),\n map: magicString.generateMap({ hires: true })\n };\n }\n };\n}\n\nexport default vdevJsxSource;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,0BAAwB;AAejB,SAAS,cAAc,UAA6B,CAAC,GAAW;AACnE,QAAM,SAAS,QAAQ,UAAU;AACjC,QAAM,UAAU,QAAQ,WAAW,CAAC,cAAc;AAElD,SAAO;AAAA,IACH,MAAM;AAAA;AAAA,IAEN,SAAS;AAAA,IAET,UAAU,MAAc,IAAoC;AAExD,UAAI,QAAQ,KAAK,aAAW,QAAQ,KAAK,EAAE,CAAC,GAAG;AAC3C,eAAO;AAAA,MACX;AAGA,UAAI,CAAC,YAAY,KAAK,EAAE,GAAG;AACvB,eAAO;AAAA,MACX;AAGA,UAAI,CAAC,KAAK,SAAS,MAAM,KAAK,CAAC,KAAK,SAAS,OAAO,KAAK,CAAC,KAAK,SAAS,SAAS,GAAG;AAChF,eAAO;AAAA,MACX;AAMA,YAAM,cAAc,IAAI,oBAAAA,QAAY,IAAI;AACxC,UAAI,WAAW;AAIf,YAAM,eAAe;AAGrB,YAAM,QAAQ,KAAK,MAAM,IAAI;AAC7B,YAAM,aAAa,CAAC,UAAkB;AAClC,YAAI,OAAO;AACX,YAAI,cAAc;AAClB,iBAAS,IAAI,GAAG,IAAI,SAAS,IAAI,KAAK,QAAQ,KAAK;AAC/C,cAAI,KAAK,CAAC,MAAM,MAAM;AAClB;AACA,0BAAc;AAAA,UAClB;AAAA,QACJ;AACA,eAAO,EAAE,MAAM,KAAK,QAAQ,cAAc,EAAE;AAAA,MAChD;AAEA,UAAI;AACJ,cAAQ,QAAQ,aAAa,KAAK,IAAI,OAAO,MAAM;AAC/C,cAAM,iBAAiB,MAAM,QAAQ,MAAM,CAAC,EAAE,SAAS;AACvD,cAAM,EAAE,MAAM,IAAI,IAAI,WAAW,MAAM,KAAK;AAG5C,cAAM,YAAY,KAAK,MAAM,iBAAiB,GAAG,iBAAiB,GAAG;AACrE,YAAI,UAAU,SAAS,SAAS,MAAM,QAAQ,GAAG;AAC7C;AAAA,QACJ;AAGA,cAAM,YAAY,SAAS,MAAM,YAAY,EAAE,YAAY,MAAM,YAAY,IAAI,YAAY,MAAM,WAAW,GAAG;AAEjH,oBAAY,WAAW,iBAAiB,GAAG,SAAS;AACpD,mBAAW;AAAA,MACf;AAEA,UAAI,CAAC,UAAU;AACX,eAAO;AAAA,MACX;AAEA,aAAO;AAAA,QACH,MAAM,YAAY,SAAS;AAAA,QAC3B,KAAK,YAAY,YAAY,EAAE,OAAO,KAAK,CAAC;AAAA,MAChD;AAAA,IACJ;AAAA,EACJ;AACJ;AAEA,IAAO,qBAAQ;","names":["MagicString"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/vite-plugin/jsx-source.ts"],"sourcesContent":["import type { Plugin, TransformResult } from 'vite';\nimport MagicString from 'magic-string';\n\nexport interface VdevPluginOptions {\n /** Prefix for the data attribute (default: 'vdev') */\n prefix?: string;\n /** File patterns to exclude */\n exclude?: RegExp[];\n}\n\n/**\n * Vite plugin to inject source location data attributes into JSX elements.\n * This enables the Visual Dev Tool to locate source code from rendered elements.\n * \n * Works with @vitejs/plugin-react-swc for stable HMR support.\n */\nexport function vdevJsxSource(options: VdevPluginOptions = {}): Plugin {\n const prefix = options.prefix || 'vdev';\n const exclude = options.exclude || [/node_modules/];\n\n return {\n name: 'vdev-jsx-source',\n // Use 'post' to run after other transforms, avoiding HMR issues\n enforce: 'post',\n\n transform(code: string, id: string): TransformResult | null {\n // Skip excluded files\n if (exclude.some(pattern => pattern.test(id))) {\n return null;\n }\n\n // Only process JSX/TSX files\n if (!/\\.[jt]sx$/.test(id)) {\n return null;\n }\n\n // Skip if no JSX-like patterns (quick check)\n if (!code.includes('jsx(') && !code.includes('jsxs(') && !code.includes('jsxDEV(')) {\n return null;\n }\n\n // After SWC transform, JSX becomes function calls like:\n // jsx(\"div\", { ... }) or jsxDEV(\"div\", { ... }, ...)\n // We inject our data attributes into the props object\n\n const magicString = new MagicString(code);\n let modified = false;\n\n // Match jsx/jsxs/jsxDEV function calls\n // Pattern: jsx(\"tagName\", { props }) or jsx(Component, { props })\n const jsxCallRegex = /\\b(jsx|jsxs|jsxDEV)\\s*\\(\\s*(?:\"([^\"]+)\"|'([^']+)'|([A-Z][a-zA-Z0-9_$.]*)|([a-z][a-zA-Z0-9_]*))\\s*,\\s*\\{/g;\n\n // Track line numbers for source location\n const lines = code.split('\\n');\n const getLineCol = (index: number) => {\n let line = 1;\n let lastNewline = -1;\n for (let i = 0; i < index && i < code.length; i++) {\n if (code[i] === '\\n') {\n line++;\n lastNewline = i;\n }\n }\n return { line, col: index - lastNewline - 1 };\n };\n\n let match;\n while ((match = jsxCallRegex.exec(code)) !== null) {\n const openBraceIndex = match.index + match[0].length - 1;\n const { line, col } = getLineCol(match.index);\n\n // Check if already has our data attribute\n const nextChars = code.slice(openBraceIndex + 1, openBraceIndex + 100);\n if (nextChars.includes(`\"data-${prefix}-file\"`)) {\n continue;\n }\n\n // Inject data attributes as first properties\n const injection = `\"data-${prefix}-file\": \"${id}\", \"data-${prefix}-line\": \"${line}\", \"data-${prefix}-col\": \"${col}\", `;\n\n magicString.appendLeft(openBraceIndex + 1, injection);\n modified = true;\n }\n\n if (!modified) {\n return null;\n }\n\n return {\n code: magicString.toString(),\n map: magicString.generateMap({ hires: true })\n };\n }\n };\n}\n\nexport default vdevJsxSource;\n"],"mappings":";AACA,OAAO,iBAAiB;AAejB,SAAS,cAAc,UAA6B,CAAC,GAAW;AACnE,QAAM,SAAS,QAAQ,UAAU;AACjC,QAAM,UAAU,QAAQ,WAAW,CAAC,cAAc;AAElD,SAAO;AAAA,IACH,MAAM;AAAA;AAAA,IAEN,SAAS;AAAA,IAET,UAAU,MAAc,IAAoC;AAExD,UAAI,QAAQ,KAAK,aAAW,QAAQ,KAAK,EAAE,CAAC,GAAG;AAC3C,eAAO;AAAA,MACX;AAGA,UAAI,CAAC,YAAY,KAAK,EAAE,GAAG;AACvB,eAAO;AAAA,MACX;AAGA,UAAI,CAAC,KAAK,SAAS,MAAM,KAAK,CAAC,KAAK,SAAS,OAAO,KAAK,CAAC,KAAK,SAAS,SAAS,GAAG;AAChF,eAAO;AAAA,MACX;AAMA,YAAM,cAAc,IAAI,YAAY,IAAI;AACxC,UAAI,WAAW;AAIf,YAAM,eAAe;AAGrB,YAAM,QAAQ,KAAK,MAAM,IAAI;AAC7B,YAAM,aAAa,CAAC,UAAkB;AAClC,YAAI,OAAO;AACX,YAAI,cAAc;AAClB,iBAAS,IAAI,GAAG,IAAI,SAAS,IAAI,KAAK,QAAQ,KAAK;AAC/C,cAAI,KAAK,CAAC,MAAM,MAAM;AAClB;AACA,0BAAc;AAAA,UAClB;AAAA,QACJ;AACA,eAAO,EAAE,MAAM,KAAK,QAAQ,cAAc,EAAE;AAAA,MAChD;AAEA,UAAI;AACJ,cAAQ,QAAQ,aAAa,KAAK,IAAI,OAAO,MAAM;AAC/C,cAAM,iBAAiB,MAAM,QAAQ,MAAM,CAAC,EAAE,SAAS;AACvD,cAAM,EAAE,MAAM,IAAI,IAAI,WAAW,MAAM,KAAK;AAG5C,cAAM,YAAY,KAAK,MAAM,iBAAiB,GAAG,iBAAiB,GAAG;AACrE,YAAI,UAAU,SAAS,SAAS,MAAM,QAAQ,GAAG;AAC7C;AAAA,QACJ;AAGA,cAAM,YAAY,SAAS,MAAM,YAAY,EAAE,YAAY,MAAM,YAAY,IAAI,YAAY,MAAM,WAAW,GAAG;AAEjH,oBAAY,WAAW,iBAAiB,GAAG,SAAS;AACpD,mBAAW;AAAA,MACf;AAEA,UAAI,CAAC,UAAU;AACX,eAAO;AAAA,MACX;AAEA,aAAO;AAAA,QACH,MAAM,YAAY,SAAS;AAAA,QAC3B,KAAK,YAAY,YAAY,EAAE,OAAO,KAAK,CAAC;AAAA,MAChD;AAAA,IACJ;AAAA,EACJ;AACJ;AAEA,IAAO,qBAAQ;","names":[]}
|