refactor(compiler): support passing children to foreign components#68996
Draft
leonsenft wants to merge 5 commits into
Draft
refactor(compiler): support passing children to foreign components#68996leonsenft wants to merge 5 commits into
leonsenft wants to merge 5 commits into
Conversation
Add descriptive text to foreign view head and tail comments in dev mode to assist in debugging.
Implement the `ɵɵforeignComponent` instruction to render foreign components (components from other frameworks) inside Angular templates. The instruction creates a host LContainer, instantiates a foreign view, executes the foreign component's RENDER function, inserts the returned native DOM nodes, and registers the disposal hook. Add unit tests to verify element rendering, property passing, dependency injection, and disposal on destruction.
…nt props Avoid triggering the `interpolated_signal_not_invoked` diagnostic when a signal is passed directly as a property binding to a foreign component. Foreign components may accept signals directly, so they should not be flagged as uninvoked in this context. To support testing this, the typecheck testing infrastructure was updated to allow defining mock foreign components in the test setup.
Previously, the `ɵɵforeignComponent` instruction set the `currentTNode` state during the first template creation pass (via `getOrCreateTNode`), but failed to do so on subsequent instantiations when the `TNode` was accessed from cache. This resulted in the global `currentTNode` state remaining unchanged from the previous instruction. When closing a parent element (e.g., via `ɵɵelementEnd`), this mismatched state caused assertion failures because the framework attempted to close the wrong parent node. This change fixes the issue by calling `setCurrentTNode(tNode, false)` when the foreign component's `TNode` is retrieved from the cache.
Previously, any children nested inside a foreign component were ignored during template ingestion. With this change, the compiler now: 1. Identifies when a foreign component has children in the template AST. 2. Compiles these children into a separate template view (using the standard TemplateOp). 3. Passes a `ɵɵforeignContent` expression under the `children` prop inside the foreign component's `props` object. At runtime, the new `ɵɵforeignContent(index)` instruction instantiates the template at the specified slot index in memory (detached from the DOM), extracts its root DOM nodes, and returns them. These root nodes are then passed directly to the foreign component's `props.children` so they can be rendered by the foreign framework. The instantiated children view is registered in the parent LView's child tree, ensuring its change detection and destruction are managed automatically as part of the standard Angular view tree lifecycle.
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 is based on #68787
Previously, any children nested inside a foreign component were ignored during template ingestion. With this change, the compiler now:
ɵɵforeignContentexpression under thechildrenprop inside the foreign component'spropsobject.At runtime, the new
ɵɵforeignContent(index)instruction instantiates the template at the specified slot index in memory (detached from the DOM), extracts its root DOM nodes, and returns them. These root nodes are then passed directly to the foreign component'sprops.childrenso they can be rendered by the foreign framework.The instantiated children view is registered in the parent LView's child tree, ensuring its change detection and destruction are managed automatically as part of the standard Angular view tree lifecycle.