Unified API for rendering design-system components across Nunjucks (Node), Twig (PHP), and Razor (.NET).
{ "type": "<component-id>", "params": { } }type matches the folder name under src/njk/components/ (e.g. error-summary, a-z).params holds macro arguments only (validated by per-component *.schema.json).The Nunjucks global returns a SafeString (same as calling a component macro), so you do not need | safe in templates when autoescape is on.
src/js/asp-component/)| File | Role |
|---|---|
index.js
|
Public exports |
contract.js
|
Contract shape, validation, shared id/macro regexes |
component-manifest.js
|
Loads src/component-manifest.json
|
create-asp-component.js
|
createAspComponent() / renderAspComponent()
|
register-nunjucks.js
|
Registers global aspComponent + indent filter
|
ensure-indent-filter.js
|
Nunjucks indent shim for action templates
|
npm run build:manifest → src/component-manifest.json + src/twig/internal/asp-component-dispatch.twignpm run validate:manifest (part of npm run lint)npm run test:component (Node); dotnet test src/dotnet/tests/AspFrontend.Tests/AspFrontend.Tests.csproj -c Release (.NET)AspFrontend on GitHub Packages (private); npm run pack:dotnet to pack locallyManifest entries may include dotnet: { view: "Footer" } when a Razor view exists under src/dotnet/components/<id>/.
validate:contracts also checks that every component with a JSON Schema has a manifest entry.
Implementation under src/dotnet/ (NuGet package AspFrontend):
| Piece | Role |
|---|---|
AspComponent/IAspComponentRenderer
|
Public aspComponent API
|
AspComponent/AspComponentHtmlExtensions
|
@await Html.AspComponentAsync(...) in Razor
|
AspComponent/Mapping/*ParamsMapper.cs
|
params → view model
|
components/<id>/*.cshtml
|
Markup (same output as tag helpers) |
components/<id>/*TagHelper.cs
|
Optional hand-authored Razor API |
Razor (aspComponent):
@await Html.AspComponentAsync("notification", new {
title = "Notice",
modifier = "green",
content = new { text = "…" }
})Register in Program.cs with .AddAspFrontend(). In _ViewImports.cshtml:
@addTagHelper *, AspFrontend
@using PoliceDigitalServices.AspFrontend.AspComponentOnly action, footer, and notification are currently supported via aspComponent in .NET. Other components may have Nunjucks/Twig macros only until a Razor view and params mapper are added.
The NuGet package ships Razor views and tag helpers only. Load CSS and JavaScript from the npm/CDN package in consuming apps.
src/php/timber-twig-asp-component.php — Twig function aspComponent, reads the same manifest JSON.
validate:contracts, lint commandsscripts/validate-contracts.js — YAML examples vs JSON Schemascripts/build-component-manifest.js — manifest generatorImported from docs/asp-component.md in asp-frontend.