A plugin designed to automatically annotate your JSX components with a data-at(configurable) attribute, indicating the file name and line number for easier debugging and development.
npm i unplugin-jsx-sourceVite
// vite.config.ts
import jsxSource from "unplugin-jsx-source/vite";
export default defineConfig({
plugins: [
jsxSource({
/* options */
}),
],
});Example: playground/
Rollup
// rollup.config.js
import jsxSource from "unplugin-jsx-source/rollup";
export default {
plugins: [
jsxSource({
/* options */
}),
],
};Webpack
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require("unplugin-jsx-source/webpack")({
/* options */
}),
],
};Nuxt
// nuxt.config.js
export default defineNuxtConfig({
modules: [
[
"unplugin-jsx-source/nuxt",
{
/* options */
},
],
],
});This module works for both Nuxt 2 and Nuxt Vite
Vue CLI
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require("unplugin-jsx-source/webpack")({
/* options */
}),
],
},
};esbuild
// esbuild.config.js
import { build } from 'esbuild'
import jsxSource from 'unplugin-jsx-source/esbuild'
build({
plugins: jsxSource()],
})https://github.com/unplugin/unplugin-starter
cause I saw that idea again from Nate (Tamagui's author) https://x.com/natebirdman/status/1890913196967419958
although Astro also has it with <div data-astro-source-file="/absolute/path/file.astro" data-astro-source-loc="72:49"