vite-plugin-source-locator 1.1.1 → 1.1.3

package/README.md

@@ -42,11 +42,11 @@ No `main.tsx` wiring required. The plugin auto-injects the client overlay in dev
 
 ## Pick Mode
 
-1. Click the badge (bottom-right): **Source Locator (cursor) — click to pick**
+1. Click the badge (bottom-right): **Source Locator (auto) — click to pick**
 2. Hover elements — blue highlight + file paths in tooltip
 3. Click to open source — cycles **TSX → CSS → TSX** when both exist
 4. **Esc** — cancel pick mode
-5. **Shift+L** — cycle IDE: cursor → vscode → webstorm
+5. **Shift+L** — cycle IDE (session only, resets on refresh)
 
 ## Exports
 
@@ -63,7 +63,7 @@ sourceLocator({
   enabled: true,
   endpoint: '/__open-in-editor',
   attribute: 'data-source',
-  ides: ['cursor', 'vscode', 'webstorm'],
+  ides: ['auto', 'cursor', 'vscode', 'webstorm'],
   theme: 'light',
 })
 ```
@@ -89,7 +89,7 @@ import { initSourceLocator } from 'vite-plugin-source-locator/client'
 initSourceLocator({
   endpoint: '/__open-in-editor',
   attribute: 'data-source',
-  ides: ['cursor', 'vscode', 'webstorm'],
+  ides: ['auto', 'cursor', 'vscode', 'webstorm'],
   theme: {
     background: '#ffffff',
     text: '#000000',
@@ -132,7 +132,7 @@ import { initSourceLocator } from 'vite-plugin-source-locator/client'
 initSourceLocator({
   endpoint: '/__open-in-editor',
   attribute: 'data-source',
-  ides: ['cursor', 'vscode', 'webstorm'],
+  ides: ['auto', 'cursor', 'vscode', 'webstorm'],
   theme: 'blue',
 })
 ```
@@ -141,7 +141,32 @@ initSourceLocator({
 
 IDE opening works on **macOS, Windows, and Linux** via [`launch-editor`](https://github.com/vitejs/launch-editor).
 
-The editor CLI must be available on your `PATH`:
+### Auto detection (default)
+
+By default, `ides` includes `'auto'` as the first entry. In `auto` mode, the plugin detects your open IDE:
+
+1. `LAUNCH_EDITOR` / `REACT_EDITOR` environment variable
+2. Running editor process (VS Code, Cursor, WebStorm, etc.)
+3. `VISUAL` / `EDITOR` environment variable
+
+The plugin resolves known app-bundle CLI paths automatically (e.g. VS Code on macOS). If detection still fails, install the editor shell command or set `LAUNCH_EDITOR` to the full CLI path.
+
+```typescript
+// auto-detect open IDE (default)
+sourceLocator()
+
+// VS Code only
+sourceLocator({ ides: ['vscode'] })
+
+// auto + manual override with Shift+L (session only)
+sourceLocator({ ides: ['auto', 'vscode'] })
+```
+
+The first entry in `ides` is the default. Shift+L cycles through the list in memory (resets on page refresh).
+
+### Explicit editor
+
+When not using `auto`, the plugin resolves common install paths first, then falls back to the CLI name on `PATH`:
 
 | IDE | CLI command |
 |-----|-------------|
@@ -149,12 +174,12 @@ The editor CLI must be available on your `PATH`:
 | VS Code | `code` |
 | WebStorm | `webstorm` |
 
-You can override the default editor with environment variables:
+If opening fails with `ENOENT`, install the shell command in your editor (VS Code: **Shell Command: Install 'code' command in PATH**) or set a full path:
 
-- `LAUNCH_EDITOR=cursor`
-- `REACT_EDITOR=code`
-
-Shift+L cycles through the `ides` list configured in plugin options.
+```
+LAUNCH_EDITOR=/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code
+REACT_EDITOR=/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code
+```
 
 ## Adding a New IDE
 

package/dist/client/controller.js

@@ -1,7 +1,6 @@
-import { nextClickTarget, parseSourceLocation, resolveTheme } from '../shared/index.js';
+import { nextClickTarget, nextIde, parseSourceLocation, resolveTheme } from '../shared/index.js';
 import { findCssSource } from './css-source.js';
 import { createLocatorOverlayUi } from './overlay.js';
-import { cycleStoredIde, getStoredIde } from './preference.js';
 const EMPTY_SOURCES = Object.freeze({
     tsx: undefined,
     css: undefined,
@@ -13,13 +12,13 @@ function getSourceEl(target, attribute, host) {
     const el = target.closest(`[${attribute}]`);
     return el instanceof HTMLElement ? el : null;
 }
-async function openSourceInEditor(source, config) {
+async function openSourceInEditor(source, config, activeIde) {
     const loc = parseSourceLocation(source);
     const params = new URLSearchParams({
         file: loc.file,
         line: loc.line,
         col: loc.col,
-        ide: getStoredIde(),
+        ide: activeIde,
     });
     await fetch(`${config.endpoint}?${params.toString()}`);
 }
@@ -34,7 +33,8 @@ function resolveOpenSource(sources) {
 export function startPickController(root, host, config) {
     let pickMode = false;
     let sources = EMPTY_SOURCES;
-    const ui = createLocatorOverlayUi(root, () => setPickMode(!pickMode), resolveTheme(config.theme));
+    let activeIde = config.ides[0] ?? 'auto';
+    const ui = createLocatorOverlayUi(root, () => setPickMode(!pickMode), resolveTheme(config.theme), () => activeIde);
     function setPickMode(active) {
         pickMode = active;
         ui.setPickActive(active);
@@ -68,10 +68,10 @@ export function startPickController(root, host, config) {
         }
         if (!e.shiftKey || e.key !== 'L')
             return;
-        const next = cycleStoredIde(config.ides);
+        activeIde = nextIde(activeIde, config.ides);
         if (!pickMode)
             ui.refreshBadgeLabel();
-        ui.flashMessage(`IDE: ${next}`);
+        ui.flashMessage(`IDE: ${activeIde}`);
     };
     const onClick = async (e) => {
         if (!pickMode || host.contains(e.target))
@@ -86,7 +86,7 @@ export function startPickController(root, host, config) {
             ui.flashMessage('No source for this element');
             return;
         }
-        await openSourceInEditor(openSource, config);
+        await openSourceInEditor(openSource, config, activeIde);
         sources = { ...sources, clickTarget: nextClickTarget(sources.clickTarget, !!sources.css) };
         ui.showSourceTooltip(el, sources.tsx, sources.css, sources.clickTarget, e.clientX, e.clientY);
     };

package/dist/client/overlay.d.ts

@@ -1,5 +1,5 @@
-import type { ClickTarget, LocatorTheme } from '../shared/index.js';
-export declare function createLocatorOverlayUi(root: ShadowRoot, onTogglePick: () => void, theme: LocatorTheme): {
+import type { ClickTarget, LocatorIde, LocatorTheme } from '../shared/index.js';
+export declare function createLocatorOverlayUi(root: ShadowRoot, onTogglePick: () => void, theme: LocatorTheme, getActiveIde: () => LocatorIde): {
     mountBadge: () => void;
     setPickActive: (active: boolean) => void;
     refreshBadgeLabel: () => void;

package/dist/client/overlay.js

@@ -6,7 +6,7 @@ const TOOLTIP_CURSOR_OFFSET = 16;
 const FLASH_DURATION_MS = 1500;
 const FLASH_HORIZONTAL_OFFSET = 80;
 const FLASH_BOTTOM_OFFSET = 80;
-export function createLocatorOverlayUi(root, onTogglePick, theme) {
+export function createLocatorOverlayUi(root, onTogglePick, theme, getActiveIde) {
     let activeEl = null;
     let flashTimeout = null;
     let badgeEl = null;
@@ -70,20 +70,20 @@ export function createLocatorOverlayUi(root, onTogglePick, theme) {
         document.body.style.cursor = active ? 'crosshair' : '';
         if (!badgeEl)
             return;
-        badgeEl.textContent = badgeLabel(active);
+        badgeEl.textContent = badgeLabel(active, getActiveIde());
         applyBadgeColors(active);
         if (!active)
             removeTooltip();
     };
     const refreshBadgeLabel = () => {
         if (badgeEl)
-            badgeEl.textContent = badgeLabel(false);
+            badgeEl.textContent = badgeLabel(false, getActiveIde());
     };
     const mountBadge = () => {
         badgeEl = document.createElement('button');
         badgeEl.id = UI_IDS.badge;
         badgeEl.type = 'button';
-        badgeEl.textContent = badgeLabel(false);
+        badgeEl.textContent = badgeLabel(false, getActiveIde());
         Object.assign(badgeEl.style, LAYOUT.badge, {
             background: theme.badgeBackground,
             color: theme.badgeText,

package/dist/client/preference.d.ts

@@ -1,5 +1,2 @@
 import type { LocatorIde } from '../shared/index.js';
-export declare function getStoredIde(): LocatorIde;
-export declare function setStoredIde(ide: LocatorIde): void;
-export declare function cycleStoredIde(order: LocatorIde[]): LocatorIde;
-export declare function badgeLabel(picking: boolean): string;
+export declare function badgeLabel(picking: boolean, activeIde: LocatorIde): string;

package/dist/client/preference.js

@@ -1,21 +1,7 @@
-import { DEFAULT_IDE, STORAGE_KEY, isLocatorIde, nextIde } from '../shared/index.js';
-export function getStoredIde() {
-    const stored = localStorage.getItem(STORAGE_KEY) ?? DEFAULT_IDE;
-    return isLocatorIde(stored) ? stored : DEFAULT_IDE;
-}
-export function setStoredIde(ide) {
-    localStorage.setItem(STORAGE_KEY, ide);
-}
-export function cycleStoredIde(order) {
-    const next = nextIde(getStoredIde(), order);
-    setStoredIde(next);
-    return next;
-}
 const BADGE_PICKING_HINT = 'Esc to cancel';
 const BADGE_IDLE_HINT = 'click to pick';
-export function badgeLabel(picking) {
-    const ide = getStoredIde();
+export function badgeLabel(picking, activeIde) {
     if (picking)
-        return `Pick element (${ide}) — ${BADGE_PICKING_HINT}`;
-    return `Source Locator (${ide}) — ${BADGE_IDLE_HINT}`;
+        return `Pick element (${activeIde}) — ${BADGE_PICKING_HINT}`;
+    return `Source Locator (${activeIde}) — ${BADGE_IDLE_HINT}`;
 }

package/dist/shared/index.d.ts

@@ -1,6 +1,6 @@
 export type { LocatorTheme, LocatorThemeInput, LocatorThemeOverride, LocatorThemePreset, } from './theme.js';
 export { resolveTheme } from './theme.js';
-export type LocatorIde = 'cursor' | 'vscode' | 'webstorm';
+export type LocatorIde = 'auto' | 'cursor' | 'vscode' | 'webstorm';
 export type SourceLocation = {
     file: string;
     line: string;
@@ -9,10 +9,10 @@ export type SourceLocation = {
 export type ClickTarget = 'tsx' | 'css';
 export declare const SOURCE_ATTR = "data-source";
 export declare const OPEN_ENDPOINT = "/__open-in-editor";
-export declare const STORAGE_KEY = "locator-ide";
 export declare const DEFAULT_IDE: LocatorIde;
 export declare const IDE_ORDER: LocatorIde[];
 export declare function isLocatorIde(value: string): value is LocatorIde;
+export declare function resolveIde(value: string, allowed: LocatorIde[]): LocatorIde;
 export declare function nextIde(current: LocatorIde, order?: LocatorIde[]): LocatorIde;
 export declare function parseSourceLocation(raw: string): SourceLocation;
 export declare function formatSourceLocation(loc: SourceLocation): string;

package/dist/shared/index.js

@@ -1,12 +1,19 @@
 export { resolveTheme } from './theme.js';
 export const SOURCE_ATTR = 'data-source';
 export const OPEN_ENDPOINT = '/__open-in-editor';
-export const STORAGE_KEY = 'locator-ide';
-export const DEFAULT_IDE = 'cursor';
-export const IDE_ORDER = ['cursor', 'vscode', 'webstorm'];
+export const DEFAULT_IDE = 'auto';
+export const IDE_ORDER = ['auto', 'cursor', 'vscode', 'webstorm'];
 export function isLocatorIde(value) {
     return IDE_ORDER.includes(value);
 }
+export function resolveIde(value, allowed) {
+    const fallback = allowed[0] ?? DEFAULT_IDE;
+    if (!isLocatorIde(value))
+        return fallback;
+    if (!allowed.includes(value))
+        return fallback;
+    return value;
+}
 export function nextIde(current, order = IDE_ORDER) {
     const index = order.indexOf(current);
     const nextIndex = (index + 1) % order.length;

package/dist/vite/editor-cli.d.ts

@@ -0,0 +1,4 @@
+import type { LocatorIde } from '../shared/index.js';
+export declare function toLaunchEditorName(ide: Exclude<LocatorIde, 'auto'>): string;
+export declare function resolveCliPath(command: string): string;
+export declare function resolveAutoEditor(): string | null;

package/dist/vite/editor-cli.js

@@ -0,0 +1,47 @@
+import { existsSync } from 'node:fs';
+import guessEditor from 'launch-editor/guess.js';
+const IDE_LAUNCH_NAMES = {
+    vscode: 'code',
+    cursor: 'cursor',
+    webstorm: 'webstorm',
+};
+function buildCliCandidates() {
+    if (process.platform === 'win32') {
+        const localAppData = process.env.LOCALAPPDATA ?? '';
+        const programFiles = process.env.ProgramFiles ?? 'C:\\Program Files';
+        return {
+            code: [
+                `${localAppData}\\Programs\\Microsoft VS Code\\bin\\code.cmd`,
+                `${programFiles}\\Microsoft VS Code\\bin\\code.cmd`,
+                'code',
+            ],
+            cursor: [`${localAppData}\\Programs\\cursor\\Cursor.exe`, 'cursor'],
+            webstorm: [`${programFiles}\\JetBrains\\WebStorm\\bin\\webstorm64.exe`, 'webstorm'],
+        };
+    }
+    return {
+        code: ['/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code', 'code'],
+        cursor: ['/Applications/Cursor.app/Contents/Resources/app/bin/cursor', 'cursor'],
+        webstorm: ['/Applications/WebStorm.app/Contents/MacOS/webstorm', 'webstorm'],
+    };
+}
+const CLI_CANDIDATES = buildCliCandidates();
+export function toLaunchEditorName(ide) {
+    return IDE_LAUNCH_NAMES[ide];
+}
+export function resolveCliPath(command) {
+    if ((command.includes('/') || command.includes('\\')) && existsSync(command)) {
+        return command;
+    }
+    const candidates = CLI_CANDIDATES[command] ?? [command];
+    const bundlePath = candidates.find((path) => (path.includes('/') || path.includes('\\')) && existsSync(path));
+    if (bundlePath)
+        return bundlePath;
+    return command;
+}
+export function resolveAutoEditor() {
+    const [editor] = guessEditor();
+    if (!editor)
+        return null;
+    return resolveCliPath(editor);
+}

package/dist/vite/editors.d.ts

@@ -1,2 +1,2 @@
-import type { SourceLocation } from '../shared/index.js';
-export declare function openInEditor(loc: SourceLocation, ideParam: string): void;
+import type { LocatorIde, SourceLocation } from '../shared/index.js';
+export declare function openInEditor(loc: SourceLocation, ideParam: string, allowed: LocatorIde[]): void;

package/dist/vite/editors.js

@@ -1,7 +1,18 @@
 import launch from 'launch-editor';
-import { DEFAULT_IDE, isLocatorIde } from '../shared/index.js';
-export function openInEditor(loc, ideParam) {
-    const ide = isLocatorIde(ideParam) ? ideParam : DEFAULT_IDE;
+import { resolveIde } from '../shared/index.js';
+import { resolveAutoEditor, resolveCliPath, toLaunchEditorName } from './editor-cli.js';
+export function openInEditor(loc, ideParam, allowed) {
+    const ide = resolveIde(ideParam, allowed);
     const spec = `${loc.file}:${loc.line}:${loc.col}`;
-    launch(spec, ide);
+    if (ide === 'auto') {
+        const resolved = resolveAutoEditor();
+        if (resolved) {
+            launch(spec, resolved);
+            return;
+        }
+        launch(spec);
+        return;
+    }
+    const command = resolveCliPath(toLaunchEditorName(ide));
+    launch(spec, command);
 }

package/dist/vite/index.js

@@ -1,7 +1,7 @@
 import { existsSync } from 'node:fs';
 import { isAbsolute, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { DEFAULT_IDE, IDE_ORDER, OPEN_ENDPOINT, SOURCE_ATTR } from '../shared/index.js';
+import { IDE_ORDER, OPEN_ENDPOINT, SOURCE_ATTR } from '../shared/index.js';
 import { babelPluginAddSourceAttr } from './babel-plugin.js';
 import { openInEditor } from './editors.js';
 const VIRTUAL_CLIENT_ID = 'virtual:source-locator-client';
@@ -16,13 +16,13 @@ function resolveOptions(options = {}) {
         theme: options.theme,
     };
 }
-function readQuery(url) {
+function readQuery(url, defaultIde) {
     const parsed = new URL(url, 'http://localhost');
     return {
         file: parsed.searchParams.get('file'),
         line: parsed.searchParams.get('line') ?? '1',
         col: parsed.searchParams.get('col') ?? '1',
-        ide: parsed.searchParams.get('ide') ?? DEFAULT_IDE,
+        ide: parsed.searchParams.get('ide') ?? defaultIde,
     };
 }
 function resolveFilePath(file, root) {
@@ -56,7 +56,7 @@ function sourceLocator(options = {}) {
         },
         configureServer(server) {
             server.middlewares.use(config.endpoint, (req, res) => {
-                const { file, line, col, ide } = readQuery(req.url ?? '');
+                const { file, line, col, ide } = readQuery(req.url ?? '', config.ides[0] ?? 'auto');
                 if (!file) {
                     res.writeHead(400);
                     res.end('missing file');
@@ -69,7 +69,7 @@ function sourceLocator(options = {}) {
                         res.end('file not found');
                         return;
                     }
-                    openInEditor({ file: resolvedFile, line, col }, ide);
+                    openInEditor({ file: resolvedFile, line, col }, ide, config.ides);
                     res.writeHead(200, { 'Content-Type': 'text/plain' });
                     res.end('ok');
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-source-locator",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Dev-only Vite plugin: click UI elements to jump to source in your IDE",
   "license": "MIT",
   "type": "module",