lovelace-strategy

name	lovelace-strategy
description	Workflows for developing, building, bundling, and testing the TypeScript / Lit Lovelace dashboard strategy in lovelace_strategy/.

Keymaster Lovelace Strategy Development Guide

This skill guides development on the TypeScript/Lit custom strategy located in lovelace_strategy/.

Directory Layout & Assets

• lovelace_strategy/: TypeScript source files for the Lovelace strategy.
• custom_components/keymaster/www/: Destination directory for built JavaScript bundle distribution.
• vitest.config.ts: Vitest test runner configuration.
• rollup.config.js: Rollup bundling configuration.
• scripts/compare_lovelace_output.py: Verifies generated Lovelace dashboard views.

Commands

All frontend operations should be executed via yarn:

# Install dependencies
yarn install

# Run build / Rollup compilation
yarn build

# Run unit tests using Vitest
yarn test

# Run tests with coverage
yarn test:coverage

# Run ESLint on TypeScript files
yarn lint

# Auto-fix ESLint formatting/lint issues
yarn lint:fix

Testing Dashboard Generation

When altering card definitions or view strategies:

1. Run yarn test to verify Vitest unit specs.

2. Build the bundle with yarn build.

3. If applicable, run Python strategy comparison:

   python3 scripts/compare_lovelace_output.py