@vybe-adk/swc-dom-source
v0.1.2
Published
SWC plugin to inject data-source attributes into DOM elements
Readme
@vybe-adk/swc-dom-source
SWC plugin that injects source location data attributes into DOM elements for debugging.
Installation
npm install @vybe-adk/swc-dom-sourceUsage
Add the plugin to your Next.js config:
// next.config.js
module.exports = {
experimental: {
swcPlugins: [
["@vybe-adk/swc-dom-source", { attr: "data-source", exclude: ["components/ui"] }],
],
},
};Options
| Option | Type | Default | Description |
|-----------|------------|-----------------|--------------------------------------------------|
| attr | string | "data-source" | The attribute name to inject |
| exclude | string[] | [] | File path patterns to exclude from transformation |
Output
The plugin adds a data attribute to host JSX elements (lowercase tags like div, span, etc.) with the format:
filename:line:columnExample output:
<div data-source="src/components/Button.tsx:15:4">Click me</div>Compatibility
This plugin must match the swc_core version used by your framework. Using a mismatched version will cause runtime errors.
| swc_core version | Next.js version | Status |
|---------------------|-----------------|-------------|
| 35.x | 15.x | Supported |
| 36.x+ | 16.x | Not yet supported |
This plugin currently uses swc_core v35.0.0, which aligns with Next.js 15. Next.js 16 ships a newer SWC version and is not yet supported.
Building from source
Requires Rust with the wasm32-wasip1 target:
rustup target add wasm32-wasip1
npm run buildContributing
Contributions are welcome! Please see CONTRIBUTING.md for guidelines.
License
MIT
