Linter Rule: Require a herb:slots directive for herb:state

Rule: herb-state-requires-slots

Description

Requires a template that declares herb:state to also opt into slots with a <%# herb:slots %> directive.

Rationale

State machinery only compiles when the template declares slots. Without the directive the herb:state comment is just a comment, the template renders normally, every action attribute wires up, and then nothing ever changes on screen, with no error anywhere.

Either mode makes the states live. Client mode parks branch markup up front, so client-decidable switches are instant and work offline. Server mode fetches a branch on demand and carries its markup in the values payload, trading a round trip for a smaller page. The rule takes no position between them, it only asks the template to pick one explicitly.

Examples

✅ Good

<%# herb:slots client %>
<%# herb:state (open: false) %>

<button data-herb-toggle="open">Details</button>
<% if open? %><nav>Menu</nav><% end %>

<%# herb:slots server %>
<%# herb:state (track: "") %>

<li><%= track %></li>

🚫 Bad

<%# herb:state (open: false) %>
`herb:state` declares client-owned state, but this template never opts into slots, so the states compile to nothing. Add `<%# herb:slots client %>` to park branch markup up front, or `<%# herb:slots server %>` to fetch it on demand. (herb-state-requires-slots)

<button data-herb-toggle="open">Details</button>
<% if open? %><nav>Menu</nav><% end %>

References

• herb-component-requires-slots