@rahul_ur/devlink-babel-plugin

Babel plugin that adds source-location metadata to JSX elements for Devlink live inspection.

The plugin injects a configurable JSX attribute, data-source by default, with a value in this format:

relative/path/to/file.tsx:startLine:startColumn:endLine:endColumn

Example output after JSX compilation:

jsx(Button, {
  "data-source": "src/components/Button.tsx:12:6:12:28",
  label: "Save"
});

Installation

npm install @rahul_ur/devlink-babel-plugin --save-dev

The package expects @babel/core version 7 or newer as a peer dependency.

Usage

Add the plugin to your Babel configuration:

module.exports = {
  plugins: [
    [
      '@rahul_ur/devlink-babel-plugin',
      {
        root: process.cwd(),
        attribute: 'data-source',
        envs: ['development']
      }
    ]
  ]
};

With input like this:

export function App() {
  return <Button label="Save" />;
}

the plugin adds source metadata before JSX is compiled:

export function App() {
  return <Button data-source="src/App.tsx:2:10:2:39" label="Save" />;
}

Options

| Option | Type | Default | Description | | --- | --- | --- | --- | | root | string | process.cwd() | Project root used to produce relative source paths. | | attribute | string | "data-source" | JSX attribute name to inject. | | envs | string[] | ["development"] | NODE_ENV values where the plugin should run. | | extensions | string[] | [".tsx", ".jsx", ".ts", ".js"] | File extensions that can be processed. | | exclude | string[] | ["node_modules", ".test.", ".spec.", "__tests__"] | Filename substrings that should be skipped. |

Behavior

• Adds the source attribute to JSX opening elements that have location metadata.
• Skips files outside the configured extensions.
• Skips excluded paths such as node_modules, test files, and __tests__.
• Skips Fragment and React.Fragment.
• Does not overwrite elements that already have the configured attribute.
• Normalizes generated paths to forward slashes.

Development

npm install
npm test
npm run build

Available scripts:

• npm run build builds ESM, CommonJS, declarations, and renames the ESM output to .mjs.
• npm run dev runs TypeScript in watch mode.
• npm test runs the Jest test suite.
• npm run prepublishOnly builds, tests, and performs a dry-run package check.

License

MIT