(child) - JavaScript

JSX children selected by position or value

(child pos? val?)

Where:

1. pos: position in the list (1-based) *
2. val: child value at that position *

Matching:

1. text children, e.g. <Link>text</Link>
2. expression children, e.g. <Link>{expr}</Link>
3. element children, e.g. <Link><Icon /></Link>

Behavior

• With only a position, (child N) matches elements that have a child at that position.
• Without position or value, (child) only matches elements that have at least one child.

Examples

Find components that render untranslated text directly.

(jsx _ _ (child _ (str /welcome|hello/i)))

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

<Header>Welcome</Header>
<Header>{t("welcome")}</Header>
<Footer>Hello there</Footer>

---

Identify buttons whose first child is an icon component.

(jsx Button _ (child 1 (jsx Icon)))

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

<Button><Icon />Save</Button>
<Button>Save<Icon /></Button>
<Link><Icon />Save</Link>

---

Extract all direct children of a list for inspection.

(jsx List _ (child _ (:into)))

Selects in lines { 2, 2 }:

<List>
  <Item />
  <Item />
</List>

---

Arguments

pos

1. Number

Does NOT support: Composition — Free-form Selection — Refinement — Replacement

val

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