@useclickly/babel-plugin-source

@useclickly/babel-plugin-source

Optional Babel plugin that injects React's __source JSX prop so Clickly can show source file + line for every annotated element.

Most setups don't need this — Vite and Next.js add __source in development by default. Install this plugin if you use raw Webpack, plain esbuild, or any toolchain that strips JSX source info.

Install

npm install -D @useclickly/babel-plugin-source

Use

.babelrc.json:

{
  "plugins": ["@useclickly/babel-plugin-source"]
}

Only enable in development:

// babel.config.js
module.exports = {
  plugins: process.env.NODE_ENV === "development"
    ? ["@useclickly/babel-plugin-source"]
    : [],
};

What it does

Adds the __source = { fileName, lineNumber, columnNumber } prop to every JSX element. React 18+ stores this on the fiber's _debugSource, which Clickly reads when building annotations.

Status

Phase 10 ships the package scaffold. Plugin internals land in Phase 9.

License

MIT