Vite plugin and source mapping
@pulsedev/vite tags every element with the file, line and column it came from, so your agent can open the exact spot instead of searching. It isn't published on npm yet. Here is what it does and what to do in the meantime.
Current status
@pulsedev/vite is not on the npm registry yet, so npm install -D @pulsedev/vite fails with a 404. Everything else in PulseDev works without it. The widget, the agents and the review flow only need the script tag.
What the plugin does
Without the plugin, a click gives your agent the element's selector, markup, text, computed styles, matched CSS rules, a screenshot and the page URL. The agent uses those to search your project for the component. That usually works, but it costs a search step and can pick the wrong file when markup is repeated.
The plugin removes the search. While the Vite dev server runs, it adds a data-source attribute to each HTML element in your templates, set to the file path relative to your project root plus the line and column:
<button class="btn plan__cta" data-source="src/components/PlanCard.vue:14:5"> Choose Growth</button>When you click, the widget reads the nearest data-source on the element or its ancestors and sends it with your note. PulseDev then tells the agent the exact source location and asks it to open that file directly.
What it covers
| Source | Tagged | Notes |
|---|---|---|
.vue | Yes | Plain HTML elements in the <template>. Templates with a lang other than html (such as Pug) are skipped. |
.jsx / .tsx | Yes | Lowercase intrinsic elements like <div> and <button>. Components such as <Card> are not tagged; the elements inside them are. |
.svelte, .astro | No | The plugin doesn't parse these files. |
node_modules | No | Only your own files are transformed. |
Elements that already have a data-source attribute are left alone.
It only runs in dev
The plugin is registered with Vite's apply: 'serve', so it runs under vite and vite dev and does nothing during vite build. Production HTML never gets data-source attributes. It also needs no token or port; it only rewrites your templates.
Once it is published, setup will be the usual Vite plugin pattern:
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import pulsedev from '@pulsedev/vite'export default defineConfig({ plugins: [pulsedev(), vue()],})Working without it
Until then, a few habits get you most of the benefit:
- Click the most specific element you can. Cmd-click selects the parent if you overshoot, and Shift-click adds more elements to the same note.
- Name the component in your note when you know it, for example "the PlanCard on /pricing".
- Keep class names meaningful. The agent searches for them, and a class like
plan__ctaleads straight to one file.
See Embed the widget for the script tag, and the framework guides for dev-only setups per stack.