Estoy tratando de encontrar un RegExp perfecto para encontrar componentes React con propiedades específicas en ellos. El RegExp debe usarse en el campo de búsqueda de mi IDE VSCode.
Ejemplo de componente: <Button>
Ejemplo de propiedad: size
En caso de que la etiqueta de apertura del componente esté en una sola línea , el RegExp que encontré que funciona perfectamente es este (las banderas no están permitidas en VSCode):
/<Button.+size/
Por ejemplo, esto coincidirá hasta el final del size :
<Button onClick={()=>{}} size='medium'>A veces, el componente tiene tantos accesorios que el estilo del código de la empresa querría dividirlo en varias líneas, 1 propiedad por línea, así:
<Button type="button" size="tiny" className={styles.pauseButton} onClick={togglePaused} title="Pause or enable automatic loading of webhook requests in the debug console." >No puedo escribir un RegExp para que coincida con estos casos particulares:
Lo intenté con /<Button[\s\S]*?size[\s\S]*?>/ pero supera los casos en los que hay una propiedad sin tamaño, por lo que seguirá coincidiendo hasta que encuentre un tamaño palabra en alguna parte.
En este momento estoy usando /<Button[\n]/ que coincide con TODOS y SOLO los componentes divididos, y luego tengo que verificar manualmente si tienen la propiedad específica en ellos. Todavía preferiría un RegExp que coincida con la división solo con la propiedad específica.
También encontré esta buena respuesta , pero se rompe si los componentes tienen otras propiedades que tienen un > adentro, como funciones de flecha y componentes como accesorios. Esta podría ser una buena base para comenzar desde Tho. La RegExp respondida es: <Component(\s|\n)[^>]*?property
Probablemente sea algo con miras al futuro, pero no tengo suficiente experiencia...
Gracias