Skip to content

Conversation

radium-v
Copy link
Collaborator

@radium-v radium-v commented Oct 9, 2025

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

  • 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.

Copy link
Member

@chrisdholt chrisdholt left a 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!

@radium-v radium-v merged commit 28a1d5d into main Oct 10, 2025
11 checks passed
@radium-v radium-v deleted the users/radium-v/hydration-complete-emit branch October 10, 2025 19:09

**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
Copy link
Contributor

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
Copy link
Contributor

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:
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants