Automatic management of lifecycles if supported #142
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This change introduces support for Custom Elements, allowing oc-component elements to automatically manage their own lifecycle, including rendering and unmounting.
Previous Behavior
Previously, oc-component tags were inert placeholders. Developers had to manually scan the DOM and call oc.render or oc.renderNestedComponent to render them if components we added after the client loaded. There was no built-in mechanism for cleanup or unmounting when a component was removed from the DOM.
New Behavior
This PR defines a custom element for the oc-component tag.
Automatic Rendering: When an with the manage-lifecycle attribute is added to the DOM, its connectedCallback is triggered, which automatically calls oc.renderNestedComponent on itself.
Automatic Unmounting: If the component was rendered and has an unmount function (templates will start adding the unmount function on the element), its disconnectedCallback will execute the unmount function when the element is removed from the DOM.
This feature is opt-in and can be enabled globally via the manageLifecycles configuration or on a per-component basis by adding the manage-lifecycle attribute. This automates the component lifecycle, simplifying the integration of components in modern front-end frameworks.