@reticlehq/babel-plugin

​

What it stamps

// src/components/Login.jsx
export function Login({ submit }) {
  return <button onClick={submit}>Sign in</button>;
}

export function Login({ submit }) {
  return (
    <button onClick={submit} data-reticle-source="src/components/Login.jsx:2:9">
      Sign in
    </button>
  );
}

​

What it skips

• Component tags. Only lowercase host elements are stamped, because a component’s own JSX gets stamped where it is defined.
• Lowercase tags that are not HTML or SVG elements, such as react-three-fiber’s <mesh>. Only known DOM tags are stamped, because a custom renderer can crash on the attribute.
• Files whose first non-empty line is a comment holding exactly @reticle-ignore.
• Elements that already carry the attribute.
• Nodes with no location information.
• Anything whose tag name is not a plain JSXIdentifier.

​

Do you install it?

npm i -D @reticlehq/babel-plugin

​

The export

function reticleSourcePlugin({ types }: { types: typeof BabelTypes }): PluginObj<PluginPass>;

​

Wiring it by hand

// babel.config.cjs
module.exports = {
  plugins: process.env.NODE_ENV === 'development' ? [require('@reticlehq/babel-plugin')] : [],
};

​

Why an attribute rather than a runtime lookup