Skip to content

Development

Adding a component

  1. Create Components/<Name>.razor (+ optional .razor.cs, scoped .razor.css).
  2. Use design tokens from wwwroot/tokens*.css rather than hard-coded colors so theming and density work.
  3. If JS interop is required, add a module under wwwroot/ (mirror modal.js/datepicker.js) and load it with IJSRuntime.InvokeAsync<IJSObjectReference>("import", ...).
  4. Add a bUnit test in tests/<Name>.UnitTests.

Markup safety analyzers

The SecurityAnalyzers project bans unsafe patterns at build time (RawHtmlPatternAnalyzer, MarkupStringJustificationAnalyzer, AddMarkupContentBannedAnalyzer, InnerHtmlJsInteropAnalyzer). Justify any MarkupString usage as the analyzers require or the build fails.

Tokens and theming

  • Token layers live in wwwroot/: base, dark, density, a11y, semantic, utilities, RTL.
  • The Tailwind pipeline compiles Styles/app.css to wwwroot/css/app.css via npm run build (configured in the RCL package.json).
  • A new theme strategy = a new satellite project implementing IThemeProvider plus a ServiceCollectionExtensions registration, following .Tokens / .Flowbite / .DaisyUI.

Trimming / linker safety

tests/<Name>.LinkerTest is a Blazor WASM project that references only the Tokens adapter and verifies tree-shaking. Keep adapter projects independent so consumers do not pull unused theming code.

Testing

  • tests/<Name>.UnitTests: MSTest + bUnit (with Moq, FluentAssertions, coverlet). Covers components, metrics, diagnostics, and globalization.
  • Accessibility E2E (Playwright + Deque.AxeCore.Playwright) and Stories exist only in the template repository (authoring mode), not in generated output.

See also