(jsx)

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

• Identifier: shorthand for (id)
• Pattern: shorthand for (id)
• (id)
• (:kind) • (:ref) • (:text) • (arr) • (attr) • (bool) • (call) • (child) • (comp) • (export) • (fun) • (id) • (id+) • (import) • (jsx) • (mem) • (null) • (num) • (obj) • (of) • (prop) • (regex) • (regex+) • (str) • (str*) • (str+) • (tpl) • (tpl*) • (var) • (:into) • (:and) • (:or) • (:not) • (:replace) • (:capture)

attrs

• (attr)
• (:into) • (:and) • (:or) • (:not) • (:text) • (:kind) • (:replace) • (:capture)

children

• (child)
• (:into) • (:and) • (:or) • (:not) • (:text) • (:kind) • (:replace) • (:capture)