@leadconnector/vibe-tagger 0.1.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.
Files changed (9) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +55 -0
  3. package/dist/index.cjs +220 -0
  4. package/dist/index.cjs.map +1 -0
  5. package/dist/index.d.cts +11 -0
  6. package/dist/index.d.ts +11 -0
  7. package/dist/index.js +193 -0
  8. package/dist/index.js.map +1 -0
  9. package/package.json +42 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,55 @@
1
+ # vibe-tagger
2
+
3
+ Vite plugin that instruments React JSX elements with source-location metadata for visual editing workflows.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm install -D vibe-tagger
9
+ # or
10
+ bun add -D vibe-tagger
11
+ # or
12
+ yarn add -D vibe-tagger
13
+ ```
14
+
15
+ ## Usage
16
+
17
+ ```ts
18
+ // vite.config.ts
19
+ import { defineConfig } from "vite";
20
+ import react from "@vitejs/plugin-react-swc";
21
+ import { componentTagger } from "vibe-tagger";
22
+
23
+ export default defineConfig(({ mode }) => ({
24
+ plugins: [
25
+ react(),
26
+ mode === "development" && componentTagger(),
27
+ ].filter(Boolean),
28
+ }));
29
+ ```
30
+
31
+ ## What it does
32
+
33
+ In development mode, the plugin intercepts React's `jsx-dev-runtime` to:
34
+
35
+ 1. Attach `Symbol.for("__jsxSource__")` to every DOM element with `{ fileName, lineNumber, columnNumber, displayName }`
36
+ 2. Maintain a global `window.sourceElementMap` (`Map<string, Set<WeakRef<Element>>>`) for fast source-to-element lookups
37
+
38
+ This enables visual editing tools to map clicked elements back to their source code location.
39
+
40
+ ## API
41
+
42
+ ### `componentTagger(options?): Plugin`
43
+
44
+ Returns a Vite plugin. Uses `enforce: "pre"` to run before other plugins.
45
+
46
+ #### Options
47
+
48
+ | Option | Type | Default | Description |
49
+ |--------|------|---------|-------------|
50
+ | `jsxSource` | `boolean` | `true` | Enable JSX source tagging |
51
+ | `debug` | `boolean` | `false` | Enable debug logging |
52
+
53
+ ## License
54
+
55
+ MIT
package/dist/index.cjs ADDED
@@ -0,0 +1,220 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var src_exports = {};
22
+ __export(src_exports, {
23
+ componentTagger: () => vibeTagger
24
+ });
25
+ module.exports = __toCommonJS(src_exports);
26
+
27
+ // src/devRuntimeCode.ts
28
+ var devRuntimeCode = [
29
+ 'import * as React from "react";',
30
+ 'import * as ReactJSXDevRuntime from "react/jsx-dev-runtime";',
31
+ "",
32
+ "const _jsxDEV = ReactJSXDevRuntime.jsxDEV;",
33
+ "export const Fragment = ReactJSXDevRuntime.Fragment;",
34
+ "",
35
+ 'const SOURCE_KEY = Symbol.for("__jsxSource__");',
36
+ "",
37
+ "const cleanFileName = (fileName) => {",
38
+ ' if (!fileName) return "";',
39
+ ' if (fileName.includes("dev_server")) {',
40
+ ' fileName = fileName.split("dev_server")[1].slice(1);',
41
+ " }",
42
+ ' if (fileName.includes("sandbox-scheduler/sandbox")) {',
43
+ ' const sandboxPart = fileName.split("sandbox-scheduler/")[1];',
44
+ ' fileName = sandboxPart.split("/").slice(1).join("/");',
45
+ " }",
46
+ ' return fileName.replace(/^\\/dev-server\\//, "");',
47
+ "};",
48
+ "",
49
+ "const sourceElementMap = new Map();",
50
+ "window.sourceElementMap = sourceElementMap;",
51
+ "",
52
+ "function getSourceKey(sourceInfo) {",
53
+ " return `${cleanFileName(sourceInfo.fileName)}:${sourceInfo.lineNumber}:${sourceInfo.columnNumber}`;",
54
+ "}",
55
+ "",
56
+ "function unregisterElement(node, sourceInfo) {",
57
+ " const key = getSourceKey(sourceInfo);",
58
+ " const refs = sourceElementMap.get(key);",
59
+ " if (refs) {",
60
+ " for (const ref of refs) {",
61
+ " if (ref.deref() === node) {",
62
+ " refs.delete(ref);",
63
+ " break;",
64
+ " }",
65
+ " }",
66
+ " if (refs.size === 0) {",
67
+ " sourceElementMap.delete(key);",
68
+ " }",
69
+ " }",
70
+ "}",
71
+ "",
72
+ "function registerElement(node, sourceInfo) {",
73
+ " const key = getSourceKey(sourceInfo);",
74
+ " if (!sourceElementMap.has(key)) {",
75
+ " sourceElementMap.set(key, new Set());",
76
+ " }",
77
+ " sourceElementMap.get(key).add(new WeakRef(node));",
78
+ "}",
79
+ "",
80
+ "function getTypeName(type) {",
81
+ ' if (typeof type === "string") return type;',
82
+ ' if (typeof type === "function") return type.displayName || type.name || "Unknown";',
83
+ ' if (typeof type === "object" && type !== null) {',
84
+ ' return type.displayName || type.render?.displayName || type.render?.name || "Unknown";',
85
+ " }",
86
+ ' return "Unknown";',
87
+ "}",
88
+ "",
89
+ "export function jsxDEV(type, props, key, isStatic, source, self) {",
90
+ " // For custom components (like <Icon />, <Button />), tag their rendered output",
91
+ " // This captures the JSX element name for library components that don't have source info",
92
+ ' if (source?.fileName && typeof type !== "string" && type !== Fragment) {',
93
+ " const typeName = getTypeName(type);",
94
+ " const jsxSourceInfo = {",
95
+ " fileName: cleanFileName(source.fileName),",
96
+ " lineNumber: source.lineNumber,",
97
+ " columnNumber: source.columnNumber,",
98
+ " displayName: typeName,",
99
+ " };",
100
+ "",
101
+ " const originalRef = props?.ref;",
102
+ " const enhancedProps = {",
103
+ " ...props,",
104
+ " ref: (node) => {",
105
+ " if (node) {",
106
+ " // Only tag if this element doesn't already have source info",
107
+ " // (library components won't have it, user components will)",
108
+ " if (!node[SOURCE_KEY]) {",
109
+ " node[SOURCE_KEY] = jsxSourceInfo;",
110
+ " registerElement(node, jsxSourceInfo);",
111
+ " }",
112
+ " }",
113
+ ' if (typeof originalRef === "function") {',
114
+ " originalRef(node);",
115
+ ' } else if (originalRef && typeof originalRef === "object") {',
116
+ " originalRef.current = node;",
117
+ " }",
118
+ " },",
119
+ " };",
120
+ "",
121
+ " return _jsxDEV(type, enhancedProps, key, isStatic, source, self);",
122
+ " }",
123
+ "",
124
+ " // For host elements (div, span, etc.), tag with component context",
125
+ ' if (source?.fileName && typeof type === "string") {',
126
+ " const sourceInfo = {",
127
+ " fileName: cleanFileName(source.fileName),",
128
+ " lineNumber: source.lineNumber,",
129
+ " columnNumber: source.columnNumber,",
130
+ " displayName: type,",
131
+ " };",
132
+ "",
133
+ " const originalRef = props?.ref;",
134
+ "",
135
+ " const enhancedProps = {",
136
+ " ...props,",
137
+ " ref: (node) => {",
138
+ " if (node) {",
139
+ " const existingSource = node[SOURCE_KEY];",
140
+ " if (existingSource) {",
141
+ " if (getSourceKey(existingSource) !== getSourceKey(sourceInfo)) {",
142
+ " unregisterElement(node, existingSource);",
143
+ " node[SOURCE_KEY] = sourceInfo;",
144
+ " registerElement(node, sourceInfo);",
145
+ " }",
146
+ " } else {",
147
+ " node[SOURCE_KEY] = sourceInfo;",
148
+ " registerElement(node, sourceInfo);",
149
+ " }",
150
+ " }",
151
+ ' if (typeof originalRef === "function") {',
152
+ " originalRef(node);",
153
+ ' } else if (originalRef && typeof originalRef === "object") {',
154
+ " originalRef.current = node;",
155
+ " }",
156
+ " },",
157
+ " };",
158
+ " return _jsxDEV(type, enhancedProps, key, isStatic, source, self);",
159
+ " }",
160
+ "",
161
+ " return _jsxDEV(type, props, key, isStatic, source, self);",
162
+ "}"
163
+ ].join("\n");
164
+ var devRuntimeCode_default = devRuntimeCode;
165
+
166
+ // src/features/jsxSource.ts
167
+ function createJsxTaggerFeature() {
168
+ return {
169
+ resolveId(id, importer) {
170
+ if (id === "react/jsx-dev-runtime" && !importer?.includes("\0jsx-source")) {
171
+ return "\0jsx-source/jsx-dev-runtime";
172
+ }
173
+ return null;
174
+ },
175
+ load(id) {
176
+ if (id === "\0jsx-source/jsx-dev-runtime") {
177
+ return devRuntimeCode_default;
178
+ }
179
+ return null;
180
+ }
181
+ };
182
+ }
183
+
184
+ // src/plugin.ts
185
+ function vibeTagger({
186
+ jsxSource = true,
187
+ debug = false
188
+ } = {}) {
189
+ const features = [];
190
+ if (jsxSource) {
191
+ features.push(createJsxTaggerFeature());
192
+ }
193
+ return {
194
+ name: "vibe-tagger",
195
+ enforce: "pre",
196
+ resolveId(id, importer) {
197
+ for (const feature of features) {
198
+ const result = feature.resolveId?.(id, importer);
199
+ if (result !== null && result !== void 0) {
200
+ return result;
201
+ }
202
+ }
203
+ return null;
204
+ },
205
+ load(id) {
206
+ for (const feature of features) {
207
+ const result = feature.load?.(id);
208
+ if (result !== null && result !== void 0) {
209
+ return result;
210
+ }
211
+ }
212
+ return null;
213
+ }
214
+ };
215
+ }
216
+ // Annotate the CommonJS export names for ESM import in node:
217
+ 0 && (module.exports = {
218
+ componentTagger
219
+ });
220
+ //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts","../src/devRuntimeCode.ts","../src/features/jsxSource.ts","../src/plugin.ts"],"sourcesContent":["export { vibeTagger as componentTagger } from \"./plugin\";\nexport type { VibeTaggerOptions } from \"./plugin\";\n","// Runtime code that replaces react/jsx-dev-runtime in the browser.\n// Served as a virtual module by the Vite plugin.\n\nconst devRuntimeCode = [\n 'import * as React from \"react\";',\n 'import * as ReactJSXDevRuntime from \"react/jsx-dev-runtime\";',\n \"\",\n \"const _jsxDEV = ReactJSXDevRuntime.jsxDEV;\",\n \"export const Fragment = ReactJSXDevRuntime.Fragment;\",\n \"\",\n 'const SOURCE_KEY = Symbol.for(\"__jsxSource__\");',\n \"\",\n \"const cleanFileName = (fileName) => {\",\n ' if (!fileName) return \"\";',\n ' if (fileName.includes(\"dev_server\")) {',\n ' fileName = fileName.split(\"dev_server\")[1].slice(1);',\n \" }\",\n ' if (fileName.includes(\"sandbox-scheduler/sandbox\")) {',\n ' const sandboxPart = fileName.split(\"sandbox-scheduler/\")[1];',\n ' fileName = sandboxPart.split(\"/\").slice(1).join(\"/\");',\n \" }\",\n ' return fileName.replace(/^\\\\/dev-server\\\\//, \"\");',\n \"};\",\n \"\",\n \"const sourceElementMap = new Map();\",\n \"window.sourceElementMap = sourceElementMap;\",\n \"\",\n \"function getSourceKey(sourceInfo) {\",\n \" return `${cleanFileName(sourceInfo.fileName)}:${sourceInfo.lineNumber}:${sourceInfo.columnNumber}`;\",\n \"}\",\n \"\",\n \"function unregisterElement(node, sourceInfo) {\",\n \" const key = getSourceKey(sourceInfo);\",\n \" const refs = sourceElementMap.get(key);\",\n \" if (refs) {\",\n \" for (const ref of refs) {\",\n \" if (ref.deref() === node) {\",\n \" refs.delete(ref);\",\n \" break;\",\n \" }\",\n \" }\",\n \" if (refs.size === 0) {\",\n \" sourceElementMap.delete(key);\",\n \" }\",\n \" }\",\n \"}\",\n \"\",\n \"function registerElement(node, sourceInfo) {\",\n \" const key = getSourceKey(sourceInfo);\",\n \" if (!sourceElementMap.has(key)) {\",\n \" sourceElementMap.set(key, new Set());\",\n \" }\",\n \" sourceElementMap.get(key).add(new WeakRef(node));\",\n \"}\",\n \"\",\n \"function getTypeName(type) {\",\n ' if (typeof type === \"string\") return type;',\n ' if (typeof type === \"function\") return type.displayName || type.name || \"Unknown\";',\n ' if (typeof type === \"object\" && type !== null) {',\n ' return type.displayName || type.render?.displayName || type.render?.name || \"Unknown\";',\n \" }\",\n ' return \"Unknown\";',\n \"}\",\n \"\",\n \"export function jsxDEV(type, props, key, isStatic, source, self) {\",\n \" // For custom components (like <Icon />, <Button />), tag their rendered output\",\n \" // This captures the JSX element name for library components that don't have source info\",\n ' if (source?.fileName && typeof type !== \"string\" && type !== Fragment) {',\n \" const typeName = getTypeName(type);\",\n \" const jsxSourceInfo = {\",\n \" fileName: cleanFileName(source.fileName),\",\n \" lineNumber: source.lineNumber,\",\n \" columnNumber: source.columnNumber,\",\n \" displayName: typeName,\",\n \" };\",\n \"\",\n \" const originalRef = props?.ref;\",\n \" const enhancedProps = {\",\n \" ...props,\",\n \" ref: (node) => {\",\n \" if (node) {\",\n \" // Only tag if this element doesn't already have source info\",\n \" // (library components won't have it, user components will)\",\n \" if (!node[SOURCE_KEY]) {\",\n \" node[SOURCE_KEY] = jsxSourceInfo;\",\n \" registerElement(node, jsxSourceInfo);\",\n \" }\",\n \" }\",\n ' if (typeof originalRef === \"function\") {',\n \" originalRef(node);\",\n ' } else if (originalRef && typeof originalRef === \"object\") {',\n \" originalRef.current = node;\",\n \" }\",\n \" },\",\n \" };\",\n \"\",\n \" return _jsxDEV(type, enhancedProps, key, isStatic, source, self);\",\n \" }\",\n \"\",\n \" // For host elements (div, span, etc.), tag with component context\",\n ' if (source?.fileName && typeof type === \"string\") {',\n \" const sourceInfo = {\",\n \" fileName: cleanFileName(source.fileName),\",\n \" lineNumber: source.lineNumber,\",\n \" columnNumber: source.columnNumber,\",\n \" displayName: type,\",\n \" };\",\n \"\",\n \" const originalRef = props?.ref;\",\n \"\",\n \" const enhancedProps = {\",\n \" ...props,\",\n \" ref: (node) => {\",\n \" if (node) {\",\n \" const existingSource = node[SOURCE_KEY];\",\n \" if (existingSource) {\",\n \" if (getSourceKey(existingSource) !== getSourceKey(sourceInfo)) {\",\n \" unregisterElement(node, existingSource);\",\n \" node[SOURCE_KEY] = sourceInfo;\",\n \" registerElement(node, sourceInfo);\",\n \" }\",\n \" } else {\",\n \" node[SOURCE_KEY] = sourceInfo;\",\n \" registerElement(node, sourceInfo);\",\n \" }\",\n \" }\",\n ' if (typeof originalRef === \"function\") {',\n \" originalRef(node);\",\n ' } else if (originalRef && typeof originalRef === \"object\") {',\n \" originalRef.current = node;\",\n \" }\",\n \" },\",\n \" };\",\n \" return _jsxDEV(type, enhancedProps, key, isStatic, source, self);\",\n \" }\",\n \"\",\n \" return _jsxDEV(type, props, key, isStatic, source, self);\",\n \"}\",\n].join(\"\\n\");\n\nexport default devRuntimeCode;\n","import devRuntimeCode from \"../devRuntimeCode\";\n\nexport interface JsxSourceFeature {\n resolveId(id: string, importer?: string): string | null;\n load(id: string): string | null;\n}\n\nexport function createJsxTaggerFeature(): JsxSourceFeature {\n return {\n resolveId(id: string, importer?: string): string | null {\n if (id === \"react/jsx-dev-runtime\" && !importer?.includes(\"\\0jsx-source\")) {\n return \"\\0jsx-source/jsx-dev-runtime\";\n }\n return null;\n },\n load(id: string): string | null {\n if (id === \"\\0jsx-source/jsx-dev-runtime\") {\n return devRuntimeCode;\n }\n return null;\n },\n };\n}\n","import type { Plugin } from \"vite\";\nimport { createJsxTaggerFeature } from \"./features/jsxSource\";\n\nexport interface VibeTaggerOptions {\n /** Enable JSX source tagging. Default: true */\n jsxSource?: boolean;\n /** Enable debug logging. Default: false */\n debug?: boolean;\n}\n\nexport function vibeTagger({\n jsxSource = true,\n debug = false,\n}: VibeTaggerOptions = {}): Plugin {\n const features: ReturnType<typeof createJsxTaggerFeature>[] = [];\n\n if (jsxSource) {\n features.push(createJsxTaggerFeature());\n }\n\n return {\n name: \"vibe-tagger\",\n enforce: \"pre\",\n\n resolveId(id: string, importer?: string) {\n for (const feature of features) {\n const result = feature.resolveId?.(id, importer);\n if (result !== null && result !== undefined) {\n return result;\n }\n }\n return null;\n },\n\n load(id: string) {\n for (const feature of features) {\n const result = feature.load?.(id);\n if (result !== null && result !== undefined) {\n return result;\n }\n }\n return null;\n },\n };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACGA,IAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,IAAI;AAEX,IAAO,yBAAQ;;;ACrIR,SAAS,yBAA2C;AACzD,SAAO;AAAA,IACL,UAAU,IAAY,UAAkC;AACtD,UAAI,OAAO,2BAA2B,CAAC,UAAU,SAAS,cAAc,GAAG;AACzE,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT;AAAA,IACA,KAAK,IAA2B;AAC9B,UAAI,OAAO,gCAAgC;AACzC,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT;AAAA,EACF;AACF;;;ACZO,SAAS,WAAW;AAAA,EACzB,YAAY;AAAA,EACZ,QAAQ;AACV,IAAuB,CAAC,GAAW;AACjC,QAAM,WAAwD,CAAC;AAE/D,MAAI,WAAW;AACb,aAAS,KAAK,uBAAuB,CAAC;AAAA,EACxC;AAEA,SAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IAET,UAAU,IAAY,UAAmB;AACvC,iBAAW,WAAW,UAAU;AAC9B,cAAM,SAAS,QAAQ,YAAY,IAAI,QAAQ;AAC/C,YAAI,WAAW,QAAQ,WAAW,QAAW;AAC3C,iBAAO;AAAA,QACT;AAAA,MACF;AACA,aAAO;AAAA,IACT;AAAA,IAEA,KAAK,IAAY;AACf,iBAAW,WAAW,UAAU;AAC9B,cAAM,SAAS,QAAQ,OAAO,EAAE;AAChC,YAAI,WAAW,QAAQ,WAAW,QAAW;AAC3C,iBAAO;AAAA,QACT;AAAA,MACF;AACA,aAAO;AAAA,IACT;AAAA,EACF;AACF;","names":[]}
package/dist/index.d.cts ADDED
@@ -0,0 +1,11 @@
1
+ import { Plugin } from 'vite';
2
+
3
+ interface VibeTaggerOptions {
4
+ /** Enable JSX source tagging. Default: true */
5
+ jsxSource?: boolean;
6
+ /** Enable debug logging. Default: false */
7
+ debug?: boolean;
8
+ }
9
+ declare function vibeTagger({ jsxSource, debug, }?: VibeTaggerOptions): Plugin;
10
+
11
+ export { type VibeTaggerOptions, vibeTagger as componentTagger };
package/dist/index.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { Plugin } from 'vite';
2
+
3
+ interface VibeTaggerOptions {
4
+ /** Enable JSX source tagging. Default: true */
5
+ jsxSource?: boolean;
6
+ /** Enable debug logging. Default: false */
7
+ debug?: boolean;
8
+ }
9
+ declare function vibeTagger({ jsxSource, debug, }?: VibeTaggerOptions): Plugin;
10
+
11
+ export { type VibeTaggerOptions, vibeTagger as componentTagger };
package/dist/index.js ADDED
@@ -0,0 +1,193 @@
1
+ // src/devRuntimeCode.ts
2
+ var devRuntimeCode = [
3
+ 'import * as React from "react";',
4
+ 'import * as ReactJSXDevRuntime from "react/jsx-dev-runtime";',
5
+ "",
6
+ "const _jsxDEV = ReactJSXDevRuntime.jsxDEV;",
7
+ "export const Fragment = ReactJSXDevRuntime.Fragment;",
8
+ "",
9
+ 'const SOURCE_KEY = Symbol.for("__jsxSource__");',
10
+ "",
11
+ "const cleanFileName = (fileName) => {",
12
+ ' if (!fileName) return "";',
13
+ ' if (fileName.includes("dev_server")) {',
14
+ ' fileName = fileName.split("dev_server")[1].slice(1);',
15
+ " }",
16
+ ' if (fileName.includes("sandbox-scheduler/sandbox")) {',
17
+ ' const sandboxPart = fileName.split("sandbox-scheduler/")[1];',
18
+ ' fileName = sandboxPart.split("/").slice(1).join("/");',
19
+ " }",
20
+ ' return fileName.replace(/^\\/dev-server\\//, "");',
21
+ "};",
22
+ "",
23
+ "const sourceElementMap = new Map();",
24
+ "window.sourceElementMap = sourceElementMap;",
25
+ "",
26
+ "function getSourceKey(sourceInfo) {",
27
+ " return `${cleanFileName(sourceInfo.fileName)}:${sourceInfo.lineNumber}:${sourceInfo.columnNumber}`;",
28
+ "}",
29
+ "",
30
+ "function unregisterElement(node, sourceInfo) {",
31
+ " const key = getSourceKey(sourceInfo);",
32
+ " const refs = sourceElementMap.get(key);",
33
+ " if (refs) {",
34
+ " for (const ref of refs) {",
35
+ " if (ref.deref() === node) {",
36
+ " refs.delete(ref);",
37
+ " break;",
38
+ " }",
39
+ " }",
40
+ " if (refs.size === 0) {",
41
+ " sourceElementMap.delete(key);",
42
+ " }",
43
+ " }",
44
+ "}",
45
+ "",
46
+ "function registerElement(node, sourceInfo) {",
47
+ " const key = getSourceKey(sourceInfo);",
48
+ " if (!sourceElementMap.has(key)) {",
49
+ " sourceElementMap.set(key, new Set());",
50
+ " }",
51
+ " sourceElementMap.get(key).add(new WeakRef(node));",
52
+ "}",
53
+ "",
54
+ "function getTypeName(type) {",
55
+ ' if (typeof type === "string") return type;',
56
+ ' if (typeof type === "function") return type.displayName || type.name || "Unknown";',
57
+ ' if (typeof type === "object" && type !== null) {',
58
+ ' return type.displayName || type.render?.displayName || type.render?.name || "Unknown";',
59
+ " }",
60
+ ' return "Unknown";',
61
+ "}",
62
+ "",
63
+ "export function jsxDEV(type, props, key, isStatic, source, self) {",
64
+ " // For custom components (like <Icon />, <Button />), tag their rendered output",
65
+ " // This captures the JSX element name for library components that don't have source info",
66
+ ' if (source?.fileName && typeof type !== "string" && type !== Fragment) {',
67
+ " const typeName = getTypeName(type);",
68
+ " const jsxSourceInfo = {",
69
+ " fileName: cleanFileName(source.fileName),",
70
+ " lineNumber: source.lineNumber,",
71
+ " columnNumber: source.columnNumber,",
72
+ " displayName: typeName,",
73
+ " };",
74
+ "",
75
+ " const originalRef = props?.ref;",
76
+ " const enhancedProps = {",
77
+ " ...props,",
78
+ " ref: (node) => {",
79
+ " if (node) {",
80
+ " // Only tag if this element doesn't already have source info",
81
+ " // (library components won't have it, user components will)",
82
+ " if (!node[SOURCE_KEY]) {",
83
+ " node[SOURCE_KEY] = jsxSourceInfo;",
84
+ " registerElement(node, jsxSourceInfo);",
85
+ " }",
86
+ " }",
87
+ ' if (typeof originalRef === "function") {',
88
+ " originalRef(node);",
89
+ ' } else if (originalRef && typeof originalRef === "object") {',
90
+ " originalRef.current = node;",
91
+ " }",
92
+ " },",
93
+ " };",
94
+ "",
95
+ " return _jsxDEV(type, enhancedProps, key, isStatic, source, self);",
96
+ " }",
97
+ "",
98
+ " // For host elements (div, span, etc.), tag with component context",
99
+ ' if (source?.fileName && typeof type === "string") {',
100
+ " const sourceInfo = {",
101
+ " fileName: cleanFileName(source.fileName),",
102
+ " lineNumber: source.lineNumber,",
103
+ " columnNumber: source.columnNumber,",
104
+ " displayName: type,",
105
+ " };",
106
+ "",
107
+ " const originalRef = props?.ref;",
108
+ "",
109
+ " const enhancedProps = {",
110
+ " ...props,",
111
+ " ref: (node) => {",
112
+ " if (node) {",
113
+ " const existingSource = node[SOURCE_KEY];",
114
+ " if (existingSource) {",
115
+ " if (getSourceKey(existingSource) !== getSourceKey(sourceInfo)) {",
116
+ " unregisterElement(node, existingSource);",
117
+ " node[SOURCE_KEY] = sourceInfo;",
118
+ " registerElement(node, sourceInfo);",
119
+ " }",
120
+ " } else {",
121
+ " node[SOURCE_KEY] = sourceInfo;",
122
+ " registerElement(node, sourceInfo);",
123
+ " }",
124
+ " }",
125
+ ' if (typeof originalRef === "function") {',
126
+ " originalRef(node);",
127
+ ' } else if (originalRef && typeof originalRef === "object") {',
128
+ " originalRef.current = node;",
129
+ " }",
130
+ " },",
131
+ " };",
132
+ " return _jsxDEV(type, enhancedProps, key, isStatic, source, self);",
133
+ " }",
134
+ "",
135
+ " return _jsxDEV(type, props, key, isStatic, source, self);",
136
+ "}"
137
+ ].join("\n");
138
+ var devRuntimeCode_default = devRuntimeCode;
139
+
140
+ // src/features/jsxSource.ts
141
+ function createJsxTaggerFeature() {
142
+ return {
143
+ resolveId(id, importer) {
144
+ if (id === "react/jsx-dev-runtime" && !importer?.includes("\0jsx-source")) {
145
+ return "\0jsx-source/jsx-dev-runtime";
146
+ }
147
+ return null;
148
+ },
149
+ load(id) {
150
+ if (id === "\0jsx-source/jsx-dev-runtime") {
151
+ return devRuntimeCode_default;
152
+ }
153
+ return null;
154
+ }
155
+ };
156
+ }
157
+
158
+ // src/plugin.ts
159
+ function vibeTagger({
160
+ jsxSource = true,
161
+ debug = false
162
+ } = {}) {
163
+ const features = [];
164
+ if (jsxSource) {
165
+ features.push(createJsxTaggerFeature());
166
+ }
167
+ return {
168
+ name: "vibe-tagger",
169
+ enforce: "pre",
170
+ resolveId(id, importer) {
171
+ for (const feature of features) {
172
+ const result = feature.resolveId?.(id, importer);
173
+ if (result !== null && result !== void 0) {
174
+ return result;
175
+ }
176
+ }
177
+ return null;
178
+ },
179
+ load(id) {
180
+ for (const feature of features) {
181
+ const result = feature.load?.(id);
182
+ if (result !== null && result !== void 0) {
183
+ return result;
184
+ }
185
+ }
186
+ return null;
187
+ }
188
+ };
189
+ }
190
+ export {
191
+ vibeTagger as componentTagger
192
+ };
193
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/devRuntimeCode.ts","../src/features/jsxSource.ts","../src/plugin.ts"],"sourcesContent":["// Runtime code that replaces react/jsx-dev-runtime in the browser.\n// Served as a virtual module by the Vite plugin.\n\nconst devRuntimeCode = [\n 'import * as React from \"react\";',\n 'import * as ReactJSXDevRuntime from \"react/jsx-dev-runtime\";',\n \"\",\n \"const _jsxDEV = ReactJSXDevRuntime.jsxDEV;\",\n \"export const Fragment = ReactJSXDevRuntime.Fragment;\",\n \"\",\n 'const SOURCE_KEY = Symbol.for(\"__jsxSource__\");',\n \"\",\n \"const cleanFileName = (fileName) => {\",\n ' if (!fileName) return \"\";',\n ' if (fileName.includes(\"dev_server\")) {',\n ' fileName = fileName.split(\"dev_server\")[1].slice(1);',\n \" }\",\n ' if (fileName.includes(\"sandbox-scheduler/sandbox\")) {',\n ' const sandboxPart = fileName.split(\"sandbox-scheduler/\")[1];',\n ' fileName = sandboxPart.split(\"/\").slice(1).join(\"/\");',\n \" }\",\n ' return fileName.replace(/^\\\\/dev-server\\\\//, \"\");',\n \"};\",\n \"\",\n \"const sourceElementMap = new Map();\",\n \"window.sourceElementMap = sourceElementMap;\",\n \"\",\n \"function getSourceKey(sourceInfo) {\",\n \" return `${cleanFileName(sourceInfo.fileName)}:${sourceInfo.lineNumber}:${sourceInfo.columnNumber}`;\",\n \"}\",\n \"\",\n \"function unregisterElement(node, sourceInfo) {\",\n \" const key = getSourceKey(sourceInfo);\",\n \" const refs = sourceElementMap.get(key);\",\n \" if (refs) {\",\n \" for (const ref of refs) {\",\n \" if (ref.deref() === node) {\",\n \" refs.delete(ref);\",\n \" break;\",\n \" }\",\n \" }\",\n \" if (refs.size === 0) {\",\n \" sourceElementMap.delete(key);\",\n \" }\",\n \" }\",\n \"}\",\n \"\",\n \"function registerElement(node, sourceInfo) {\",\n \" const key = getSourceKey(sourceInfo);\",\n \" if (!sourceElementMap.has(key)) {\",\n \" sourceElementMap.set(key, new Set());\",\n \" }\",\n \" sourceElementMap.get(key).add(new WeakRef(node));\",\n \"}\",\n \"\",\n \"function getTypeName(type) {\",\n ' if (typeof type === \"string\") return type;',\n ' if (typeof type === \"function\") return type.displayName || type.name || \"Unknown\";',\n ' if (typeof type === \"object\" && type !== null) {',\n ' return type.displayName || type.render?.displayName || type.render?.name || \"Unknown\";',\n \" }\",\n ' return \"Unknown\";',\n \"}\",\n \"\",\n \"export function jsxDEV(type, props, key, isStatic, source, self) {\",\n \" // For custom components (like <Icon />, <Button />), tag their rendered output\",\n \" // This captures the JSX element name for library components that don't have source info\",\n ' if (source?.fileName && typeof type !== \"string\" && type !== Fragment) {',\n \" const typeName = getTypeName(type);\",\n \" const jsxSourceInfo = {\",\n \" fileName: cleanFileName(source.fileName),\",\n \" lineNumber: source.lineNumber,\",\n \" columnNumber: source.columnNumber,\",\n \" displayName: typeName,\",\n \" };\",\n \"\",\n \" const originalRef = props?.ref;\",\n \" const enhancedProps = {\",\n \" ...props,\",\n \" ref: (node) => {\",\n \" if (node) {\",\n \" // Only tag if this element doesn't already have source info\",\n \" // (library components won't have it, user components will)\",\n \" if (!node[SOURCE_KEY]) {\",\n \" node[SOURCE_KEY] = jsxSourceInfo;\",\n \" registerElement(node, jsxSourceInfo);\",\n \" }\",\n \" }\",\n ' if (typeof originalRef === \"function\") {',\n \" originalRef(node);\",\n ' } else if (originalRef && typeof originalRef === \"object\") {',\n \" originalRef.current = node;\",\n \" }\",\n \" },\",\n \" };\",\n \"\",\n \" return _jsxDEV(type, enhancedProps, key, isStatic, source, self);\",\n \" }\",\n \"\",\n \" // For host elements (div, span, etc.), tag with component context\",\n ' if (source?.fileName && typeof type === \"string\") {',\n \" const sourceInfo = {\",\n \" fileName: cleanFileName(source.fileName),\",\n \" lineNumber: source.lineNumber,\",\n \" columnNumber: source.columnNumber,\",\n \" displayName: type,\",\n \" };\",\n \"\",\n \" const originalRef = props?.ref;\",\n \"\",\n \" const enhancedProps = {\",\n \" ...props,\",\n \" ref: (node) => {\",\n \" if (node) {\",\n \" const existingSource = node[SOURCE_KEY];\",\n \" if (existingSource) {\",\n \" if (getSourceKey(existingSource) !== getSourceKey(sourceInfo)) {\",\n \" unregisterElement(node, existingSource);\",\n \" node[SOURCE_KEY] = sourceInfo;\",\n \" registerElement(node, sourceInfo);\",\n \" }\",\n \" } else {\",\n \" node[SOURCE_KEY] = sourceInfo;\",\n \" registerElement(node, sourceInfo);\",\n \" }\",\n \" }\",\n ' if (typeof originalRef === \"function\") {',\n \" originalRef(node);\",\n ' } else if (originalRef && typeof originalRef === \"object\") {',\n \" originalRef.current = node;\",\n \" }\",\n \" },\",\n \" };\",\n \" return _jsxDEV(type, enhancedProps, key, isStatic, source, self);\",\n \" }\",\n \"\",\n \" return _jsxDEV(type, props, key, isStatic, source, self);\",\n \"}\",\n].join(\"\\n\");\n\nexport default devRuntimeCode;\n","import devRuntimeCode from \"../devRuntimeCode\";\n\nexport interface JsxSourceFeature {\n resolveId(id: string, importer?: string): string | null;\n load(id: string): string | null;\n}\n\nexport function createJsxTaggerFeature(): JsxSourceFeature {\n return {\n resolveId(id: string, importer?: string): string | null {\n if (id === \"react/jsx-dev-runtime\" && !importer?.includes(\"\\0jsx-source\")) {\n return \"\\0jsx-source/jsx-dev-runtime\";\n }\n return null;\n },\n load(id: string): string | null {\n if (id === \"\\0jsx-source/jsx-dev-runtime\") {\n return devRuntimeCode;\n }\n return null;\n },\n };\n}\n","import type { Plugin } from \"vite\";\nimport { createJsxTaggerFeature } from \"./features/jsxSource\";\n\nexport interface VibeTaggerOptions {\n /** Enable JSX source tagging. Default: true */\n jsxSource?: boolean;\n /** Enable debug logging. Default: false */\n debug?: boolean;\n}\n\nexport function vibeTagger({\n jsxSource = true,\n debug = false,\n}: VibeTaggerOptions = {}): Plugin {\n const features: ReturnType<typeof createJsxTaggerFeature>[] = [];\n\n if (jsxSource) {\n features.push(createJsxTaggerFeature());\n }\n\n return {\n name: \"vibe-tagger\",\n enforce: \"pre\",\n\n resolveId(id: string, importer?: string) {\n for (const feature of features) {\n const result = feature.resolveId?.(id, importer);\n if (result !== null && result !== undefined) {\n return result;\n }\n }\n return null;\n },\n\n load(id: string) {\n for (const feature of features) {\n const result = feature.load?.(id);\n if (result !== null && result !== undefined) {\n return result;\n }\n }\n return null;\n },\n };\n}\n"],"mappings":";AAGA,IAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,IAAI;AAEX,IAAO,yBAAQ;;;ACrIR,SAAS,yBAA2C;AACzD,SAAO;AAAA,IACL,UAAU,IAAY,UAAkC;AACtD,UAAI,OAAO,2BAA2B,CAAC,UAAU,SAAS,cAAc,GAAG;AACzE,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT;AAAA,IACA,KAAK,IAA2B;AAC9B,UAAI,OAAO,gCAAgC;AACzC,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT;AAAA,EACF;AACF;;;ACZO,SAAS,WAAW;AAAA,EACzB,YAAY;AAAA,EACZ,QAAQ;AACV,IAAuB,CAAC,GAAW;AACjC,QAAM,WAAwD,CAAC;AAE/D,MAAI,WAAW;AACb,aAAS,KAAK,uBAAuB,CAAC;AAAA,EACxC;AAEA,SAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IAET,UAAU,IAAY,UAAmB;AACvC,iBAAW,WAAW,UAAU;AAC9B,cAAM,SAAS,QAAQ,YAAY,IAAI,QAAQ;AAC/C,YAAI,WAAW,QAAQ,WAAW,QAAW;AAC3C,iBAAO;AAAA,QACT;AAAA,MACF;AACA,aAAO;AAAA,IACT;AAAA,IAEA,KAAK,IAAY;AACf,iBAAW,WAAW,UAAU;AAC9B,cAAM,SAAS,QAAQ,OAAO,EAAE;AAChC,YAAI,WAAW,QAAQ,WAAW,QAAW;AAC3C,iBAAO;AAAA,QACT;AAAA,MACF;AACA,aAAO;AAAA,IACT;AAAA,EACF;AACF;","names":[]}
package/package.json ADDED
@@ -0,0 +1,42 @@
1
+ {
2
+ "name": "@leadconnector/vibe-tagger",
3
+ "version": "0.1.0",
4
+ "description": "Vite plugin that instruments React JSX elements with source-location metadata for visual editing",
5
+ "main": "./dist/index.js",
6
+ "module": "./dist/index.mjs",
7
+ "types": "./dist/index.d.ts",
8
+ "type": "module",
9
+ "files": [
10
+ "dist"
11
+ ],
12
+ "scripts": {
13
+ "build": "tsup src/index.ts --format cjs,esm --dts --outDir dist",
14
+ "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
15
+ "test": "vitest",
16
+ "prepublishOnly": "npm run build",
17
+ "clean": "rimraf dist",
18
+ "prepare": "npm run clean && npm run build"
19
+ },
20
+ "keywords": [
21
+ "vite",
22
+ "plugin",
23
+ "react",
24
+ "jsx",
25
+ "source-map",
26
+ "visual-editing",
27
+ "component",
28
+ "tagger"
29
+ ],
30
+ "license": "MIT",
31
+ "peerDependencies": {
32
+ "vite": ">=5.0.0 <8.0.0"
33
+ },
34
+ "devDependencies": {
35
+ "@types/node": "^22.5.5",
36
+ "rimraf": "^5.0.10",
37
+ "tsup": "^7.3.0",
38
+ "typescript": "^5.5.3",
39
+ "vite": "^6.0.0",
40
+ "vitest": "^3.0.0"
41
+ }
42
+ }