feat: add component hydration lifecycle callbacks to FAST HTML #7171
Description
🙋 Feature Request
The current expected use case of @microsoft/fast-html is to use defineAsync and templateOptions: 'defer-and-hydrate' for components using the declarative f-template syntax. With that in mind, a series of callbacks should be allowed for leverage during hydration as this method allows for a deterministic sequence of events.
💁 Possible Solution
The following hooks should be added to the TemplateElement:
- After JS class definition registration
elementDidRegister()
- Before template has been evaluated and assigned
templateWillUpdate()
- After template has been assigned
templateDidUpdate()
- After the custom element has been defined
elementDidDefine()
- Before hydration has started
elementWillHydrate()
- After hydration has finished
elementDidHydrate()
🔦 Context
This fine grained approach will give opportunities for logic at various points of the initial load and hydration cycle. It will also allow benchmarking.
💻 Examples
import { TemplateElement } from `@microsoft/fast-html`;
TemplateElement.config({
elementDidRegister(name: string): void {
console.log("Element has been registered", name);
},
templateWillUpdate(name: string): void {
console.log("Element's template will update", name);
},
templateDidUpdate(name: string): void {
console.log("Element's template did update", name);
},
elementDidDefine(name: string): void {
console.log("Element's was defined", name);
},
elementWillHydrate(name: string): void {
console.log("Element will hydrate", name);
},
elementDidHydrate(name: string): void {
console.log("Element did hydrate", name);
}
}).define({
name: "f-template"
});