# 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

```ds title="main.ds"
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

```ds title="main.ds"
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](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md)

[language/linter/src/rules/style/prefer_self_closing_tree.rs:8](https://github.com/destack-sh/destack/blob/main/language/linter/src/rules/style/prefer_self_closing_tree.rs#L8)