(jsx) - JavaScript

JSX elements and fragments, matched by name, attributes, and children

(jsx name? attrs? children?)

Where:

1. name: element name (the Button in <Button />, or <> for fragments) *
2. attrs: attributes on the element *
3. children: child nodes within the element *

Matching:

1. elements, e.g. <div>...</div>
2. self-closing elements, e.g. <Button />
3. member and namespaced elements, e.g. <A.B />
4. fragments, e.g. <>...</>

Behavior

• Fragments only match when the name selector is <>.
• Self-closing elements cannot match when a children selector is provided.

Examples

Find components rendered as fragments so they can be wrapped for styling.

(jsx <>)

Selects in lines { 1 } but not in { 2 }:

const A = () => <>Hello</>
const B = () => <div>Hello</div>

---

Identify buttons that still pass inline handlers for refactoring.

(jsx Button (attr onClick))

Selects in lines { 1 } but not in { 2, 3 }:

<Button onClick={track}>Save</Button>
<Button disabled>Save</Button>
<Link onClick={track}>Save</Link>

---

Find dialog components that render translated children.

(jsx Dialog _ (child _ (call t)))

Selects in lines { 1 } but not in { 2, 3 }:

<Dialog>{t("welcome")}</Dialog>
<Dialog>{"Welcome"}</Dialog>
<Modal>{t("welcome")}</Modal>

---

Arguments

name

1. Identifier: shorthand for (id)
   
2. Pattern: shorthand for (id)
   
3. (id)
   
4. (:into)
5. (:nearest)
6. (:and)
7. (:or)
8. (:not)
9. (:text)
10. (:kind)
11. (:replace)
12. (:replace-in)
13. (:capture)
14. (:ref)
15. (arr)
16. (attr)
17. (bool)
18. (call)
19. (child)
20. (comp)
21. (export)
22. (fun)
23. (id)
24. (id+)
25. (import)
26. (jsx)
27. (mem)
28. (null)
29. (num)
30. (obj)
31. (of)
32. (prop)
33. (regex)
34. (regex+)
35. (str)
36. (str*)
37. (str+)
38. (tpl)
39. (tpl*)
40. (var)

attrs

1. (attr)
   
2. (:into)
3. (:nearest)
4. (:and)
5. (:or)
6. (:not)
7. (:text)
8. (:kind)
9. (:replace)
10. (:replace-in)
11. (:capture)

children

1. (child)
   
2. (:into)
3. (:nearest)
4. (:and)
5. (:or)
6. (:not)
7. (:text)
8. (:kind)
9. (:replace)
10. (:replace-in)
11. (:capture)