I know this is something people have solved before, but all the solutions were lacking something that I wanted. This library makes it easy to make a card with Preact, bundle styles, and add a config component. It has efficient hooks for accessing data, which do not leak memory, and are (mostly) fully typed using info from the HA docs.
This solves hard problems around the lifecycle challenges between Lit and Preact, minimizes re-renders to only when the entities you’re watching change, and includes skills for AI to use the library.
Bundling styles seems to be something that is hard no matter what. This includes a very simple CSS in JS solution that bundles static CSS at build time.
There’s a template repo that handles builds, Storybook, and HACS releases.