-
Notifications
You must be signed in to change notification settings - Fork 606
[feat]: add lifecycle callbacks for hydration and template events #7199
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is great; excellence to see solid docs included as well!
|
||
**Template Registration Callbacks:** | ||
- `elementDidRegister(name: string)` - Called after the JavaScript class definition has been registered as a partial definition | ||
- `templateWillUpdate(name: string)` - Called before the template has been evaluated and assigned to the definition |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we use something like “define”, “attach”, or “assign”, instead of “update”? Because I think “update” is generally associated with repeatable lifecycles like when an attribute changes the template will re-render.
**Hydration Callbacks:** | ||
- `elementWillHydrate(name: string)` - Called before an element begins hydration | ||
- `elementDidHydrate(name: string)` - Called after an element completes hydration | ||
- `hydrationComplete()` - Called once after all elements have completed hydration |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we call this something like allElemenentsDidHydrate()?
|
||
### Callback Execution Order | ||
|
||
The callbacks execute in the following sequence for each element: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very much optional, but I’ve found the diagram on this page very helpful for illustrating the order of operations when I was using StencilJS: https://stenciljs.com/docs/component-lifecycle
Pull Request
📖 Description
Adds lifecycle hooks to the FASTDefinition, ElementController, and TemplateElement for hydration.
🎫 Issues
completes #7171
📑 Test Plan
The
lifecycle-callbacks
fixture in fast-html provides Playwright tests for this feature.✅ Checklist
General
$ npm run change