You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: .github/copilot-instructions.md
+60-17Lines changed: 60 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,12 +2,13 @@
2
2
3
3
You are an assistant helping with development of the Home Assistant frontend. The frontend is built using Lit-based Web Components and TypeScript, providing a responsive and performant interface for home automation control.
4
4
5
-
**Note**: This file contains high-level guidelines and references to implementation patterns. For detailed component documentation, API references, and usage examples, refer to the `gallery/` directory.
5
+
**Note**: This file contains high-level guidelines and references to implementation patterns. For gallery-specific documentation, demos, page structure, and usage examples, see [`gallery/AGENTS.md`](gallery/AGENTS.md).
6
6
7
7
## Table of Contents
8
8
9
9
-[Quick Reference](#quick-reference)
10
10
-[Core Architecture](#core-architecture)
11
+
-[State Access: Contexts Instead of `hass`](#state-access-contexts-instead-of-hass)
11
12
-[Development Standards](#development-standards)
12
13
-[Component Library](#component-library)
13
14
-[Common Patterns](#common-patterns)
@@ -52,6 +53,57 @@ The Home Assistant frontend is a modern web application that:
52
53
- Communicates with the backend via WebSocket API
53
54
- Provides comprehensive theming and internationalization
54
55
56
+
## State Access: Contexts Instead of `hass`
57
+
58
+
Every component used to take the whole `hass: HomeAssistant` object — a god-object that re-renders on any unrelated `hass` change, forces tests to mock everything, and hides what a component actually reads. We're moving leaf components to **fine-grained [Lit context](https://lit.dev/docs/data/context/)**: consume only the slice you need and re-render only when it changes.
59
+
60
+
For new code, consume the matching context instead of adding a `hass` property. `hass` stays for container components that own it and feed the providers; the canonical migration is [`hui-button-card.ts`](src/panels/lovelace/cards/hui-button-card.ts). Infrastructure: contexts in [`src/data/context/index.ts`](src/data/context/index.ts), the `consume…` helpers in [`src/common/decorators/consume-context-entry.ts`](src/common/decorators/consume-context-entry.ts), and `@transform` in [`src/common/decorators/transform.ts`](src/common/decorators/transform.ts). Providers are wired automatically by `contextMixin` on `HassBaseEl` — you only consume.
61
+
62
+
### Contexts
63
+
64
+
Consume the narrowest context that covers your reads:
Lazy contexts (subscribe on first consumer, tear down after the last): `labelsContext`, `fullEntitiesContext`, `configEntriesContext`, `manifestsContext`. The single-field contexts (`localizeContext`, `themesContext`, `userContext`, …) are **deprecated** — use the grouped ones above.
80
+
81
+
### Consuming
82
+
83
+
Use the `consume…` helpers for entity-scoped and `localize` reads. `entityIdPath` is resolved against `this`, so these watch `this._config.entity`:
`@transform`'s `watch` option re-runs the transformer when a host prop changes — needed when an entity id is computed, since `consumeEntityState` only watches the first path segment. To consume a whole group untransformed, drop `@transform` and type it `ContextType<typeof statesContext>`.
106
+
55
107
## Development Standards
56
108
57
109
### Code Quality Requirements
@@ -136,6 +188,7 @@ export class HaMyComponent extends LitElement {
136
188
### Data Management
137
189
138
190
-**Use WebSocket API**: All backend communication via home-assistant-js-websocket
191
+
-**Prefer contexts over `hass`**: For state reads, consume the relevant Lit context instead of taking the whole `hass` object — see [State Access: Contexts Instead of `hass`](#state-access-contexts-instead-of-hass)
139
192
-**Cache appropriately**: Use collections and caching for frequently accessed data
140
193
-**Handle errors gracefully**: All API calls should have error handling
141
194
-**Update real-time**: Subscribe to state changes for live updates
@@ -285,11 +338,6 @@ Common patterns:
285
338
-**Destructive actions**: `variant="danger"` for delete/remove operations (the generic confirmation dialog uses `variant="danger"` for its confirm button — see `src/dialogs/generic/dialog-box.ts`)
286
339
- Always place primary action in `slot="primaryAction"` and secondary in `slot="secondaryAction"` within `ha-dialog-footer`
0 commit comments