Digamos que tenemos el siguiente componente JSX:

 export function Footer() { return ( <footer class="foo bar baz"> <span>foo bar baz</span> </footer> ); }

Usando Babel, por supuesto, es muy fácil detectar y ejecutar una transformación contra el contenido de la class :

 function plugin({ types: t }) { return { name: 'my-plugin', visitor: { JSXAttribute(path) { if (/class(?:Name)?/.test(path.node.name.name)) { ... } } } } }

Sin embargo, esto presenta un pequeño problema con ciertas herramientas de compilación que no le permiten (fácilmente) interponerse entre la transpilación y la transformación de JSX. Lo que me preguntaba era si había una manera de ejecutar una transformación contra JSX transpilado de una manera que no sea (razonablemente) probable que cause coincidencias falsas. Por ejemplo, la función anterior podría traducirse en lo siguiente:

 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" }) }); }

Una variación ingenua del complemento original podría verse así:

 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)) { ... } } } } }

Si bien esto "funciona" para la situación, también transformaría algo como notJSXTransform('foo', { class: 'bar' }); , lo que sería indeseable. Tampoco se puede buscar necesariamente un Identifier determinado en una CallExpression de llamada, ya que no hay garantías del nombre de la función JSX importada.

No pude encontrar ninguna especificación sobre cuál podría ser una forma segura de abordar esto, si es que existe alguna forma. Creo que sería interesante y beneficioso poder manejar mejor estas situaciones (donde un usuario no tiene el control total sobre las transformaciones ejecutadas y cuándo), pero no sé si perder el JSX AST es demasiado grande. golpe a posiblemente superar.