Say we had the following JSX component:
export function Footer() {
return (
<footer class="foo bar baz">
<span>foo bar baz</span>
</footer>
);
}
Using Babel, it is of course very easy to detect & run a transform against the contents of class:
function plugin({ types: t }) {
return {
name: 'my-plugin',
visitor: {
JSXAttribute(path) {
if (/class(?:Name)?/.test(path.node.name.name)) {
...
}
}
}
}
}
However, this presents a bit of an issue with certain build tools that don't (easily) let you get in between JSX transpilation & transforming. What I was wondering was if there was a way to run a transform against transpiled JSX in a way that isn't (reasonably) likely to ever cause false matches? For example, the function above could transpile to the following:
import { jsx as _jsx } from "preact/jsx-runtime";
export function Footer() {
return _jsx("footer", {
class: "foo bar baz",
children: _jsx("span", {
children: "foo bar baz"
})
});
}
A naive variation of the original plugin might look like the following:
function plugin({ types: t }) {
return {
name: 'my-plugin',
visitor: {
JSXAttribute(path) {
if (/class(?:Name)?/.test(path.node.name.name)) {
...
}
},
ObjectProperty(path) {
if (/class(?:Name)?/.test(path.node.key.name)) {
...
}
}
}
}
}
While this "works" for the situation, it would also transform something like notJSXTransform('foo', { class: 'bar' });, which would be undesirable. Can't necessarily look for a certain Identifier on a CallExpression either, as there's no guarantees of the imported JSX function name.
I wasn't able to find any spec on what might be a safe way to approach this, if there is a way at all. I think it would be interesting and beneficial to be able to handle these situations better (where a user isn't in full control over the transforms ran & when), but I don't know if losing the JSX AST is too big of a blow to possibly overcome.