prefer-self-closing-tree

Prefer self-closing tree elements without children

Separate opening and closing tags imply that a tree element contains children even when its body is empty.
Instead, you SHOULD write an element without children as one self-closing tag.

- Category: style
- Level: warning
- Fix: automatic
- Scope: module

Reported

import { TreeBuilder } from "destack:tree";

class Panel {
    id: int32 = 0;
}

extension of Panel implements TreeBuilder {
    type Tags = { hr: {} };

    static element<const Tag: keyof this.Tags, Children: (...unknown[],)>(
        tag: Tag,
        attributes: this.Tags[Tag],
        children: Children,
    ): Panel {
        return new Panel();
    }

    static fragment<Children: (...unknown[],)>(children: Children): Panel {
        return new Panel();
    }
}

function render(): Panel {
    return <hr></hr>;
}
Accepted

import { TreeBuilder } from "destack:tree";

class Panel {
    id: int32 = 0;
}

extension of Panel implements TreeBuilder {
    type Tags = { hr: {} };

    static element<const Tag: keyof this.Tags, Children: (...unknown[],)>(
        tag: Tag,
        attributes: this.Tags[Tag],
        children: Children,
    ): Panel {
        return new Panel();
    }

    static fragment<Children: (...unknown[],)>(children: Children): Panel {
        return new Panel();
    }
}

function render(): Panel {
    return <hr />;
}
Prior art

- eslint-plugin-react · self-closing-comp

language/linter/src/rules/style/preferselfclosingtree.rs:8