feat(fast-html): add AttributeMap class for automatic @attr definitions

[janechu]

Pull Request

📖 Description

This PR adds an AttributeMap class to @microsoft/fast-html that automatically defines @attr properties on a custom element's class prototype based on the JSON schema generated by TemplateElement.

When attributeMap: "all" is configured for an element via TemplateElement.options(), the AttributeMap inspects the schema after template processing and creates @attr-style reactive properties for all leaf bindings — i.e. simple template expressions like {{foo}} or <div id="{{bar}}"> that have no nested properties, no array type, and no child element references.

Key behaviours:

• camelCase → dash-case: property fooBar is registered with attribute name foo-bar
• Skips non-leaf properties: paths like {{user.name}} result in user having sub-properties in the schema and are excluded
• Skips existing accessors: properties already decorated with @attr or @observable are left untouched to avoid duplicating accessors
• Updates FASTElementDefinition: attributeLookup and propertyLookup are patched so attributeChangedCallback correctly delegates to the new AttributeDefinition
• No decorator syntax required: uses Observable.defineProperty with an AttributeDefinition instance directly, bypassing the decorator metadata path (which has already run before the template is processed)

Usage

TemplateElement.options({
    "my-element": {
        attributeMap: "all",
    },
});

This mirrors the existing ObserverMap integration pattern.

📑 Test Plan

13 Playwright tests were added across two spec files:

• packages/fast-html/src/components/attribute-map.spec.ts — verifies accessor registration, camelCase→dash-case conversion, event handler exclusion, and FASTElementDefinition lookup updates by navigating to the fixture page
• packages/fast-html/test/fixtures/attribute-map/attribute-map.spec.ts — end-to-end tests verifying template re-rendering when properties are set via JavaScript

All existing tests (666 Playwright + 4 rules) continue to pass.

npm run build -w @microsoft/fast-html   # ✅ passes
npm run test -w @microsoft/fast-html    # ✅ 666 passed, 0 failed

✅ Checklist

General

• I have included a change request file using $ npm run change
• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

⏭ Next Steps

• Consider adding attributeMap support to the package README / documentation once the API stabilises
• Investigate whether observedAttributes can be updated after element registration to fully support the DOM attribute → property direction (currently, only property → DOM attribute reflection works for elements registered before the template is processed)