feat(angular): support universal web components in v0.9 renderer - #2211
feat(angular): support universal web components in v0.9 renderer#2211josemontespg wants to merge 2 commits into
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the Angular renderer for A2UI v0.9 to transition from Angular-specific component implementations to universal Web Components, updating SurfaceComponent to directly mount custom elements and updating AngularCatalog to bridge Angular components via toWebComponent. Feedback on these changes highlights a potential stale injector issue in toWebComponent due to global custom element registration, redundant lifecycle hooks in SurfaceComponent that duplicate the reactive effect logic, and a silent rendering failure risk in ComponentHostComponent for migrated components that lack an Angular component class.
eeb6375 to
a5d1df7
Compare
bd96f18 to
502f268
Compare
a5d1df7 to
a2ba300
Compare
502f268 to
53e4f09
Compare
941f7f3 to
4e418de
Compare
4e418de to
63c1e79
Compare
a2ba300 to
cf228ac
Compare
6979ea1 to
18af221
Compare
cf228ac to
acbd410
Compare
7591651 to
cb24871
Compare
acbd410 to
6ec7083
Compare
cb24871 to
88aaa5f
Compare
6ec7083 to
f771a10
Compare
1365263 to
5606bfd
Compare
f771a10 to
5a40d20
Compare
f0dc737 to
9899d0c
Compare
5a40d20 to
e97d174
Compare
9899d0c to
ab6bcee
Compare
e97d174 to
5a40d20
Compare
ab6bcee to
9899d0c
Compare
cc02a75 to
9281cca
Compare
b441cb1 to
3dcf3dd
Compare
9281cca to
418ea80
Compare
3dcf3dd to
5c6f383
Compare
418ea80 to
50b886f
Compare
61ef404 to
4fd5ee1
Compare
| * A component implementation supported by the Angular catalog, which can be | ||
| * either a native W3C Custom Element or an Angular `@Component` declaration. | ||
| */ | ||
| export type BasicCatalogComponent = WebComponentImplementation | AngularComponentImplementation; |
There was a problem hiding this comment.
This should be just CatalogComponent, since this can be used by other catalogs, not just the basic.
There was a problem hiding this comment.
Done! Renamed BasicCatalogComponent to CatalogComponent across all catalog definitions, services, and surfaces.
| constructor() { | ||
| // Provide MarkdownRenderer context to the host DOM element so that any | ||
| // child Web Components (such as A2uiText) can access markdown rendering capabilities. | ||
| const md = inject(MarkdownRenderer, {optional: true}); |
There was a problem hiding this comment.
This looks like an internal implementation detail of the Text component. Can this logic be encapsulated in the Text component, instead of having to provide it here?
There was a problem hiding this comment.
Done! Moved the Markdown ContextProvider out of ComponentHostComponent and provided it at the surface root in SurfaceComponent, keeping ComponentHostComponent completely generic.
| * Optional additional components to include in the catalog beyond | ||
| * the standard basic catalog components. | ||
| * | ||
| * @deprecated Use AngularCatalog constructor directly to combine BASIC_COMPONENTS with custom ones. |
There was a problem hiding this comment.
don't remove the deprecation warnings
| * @deprecated Use AngularCatalog constructor directly to combine BASIC_COMPONENTS with custom ones. | ||
| */ | ||
| extraComponents?: AngularComponentImplementation[]; | ||
| extraComponents?: BasicCatalogComponent[]; |
There was a problem hiding this comment.
they should remain the same because the extra components might not be from the basic catalog.
| export const BASIC_COMPONENTS: AngularComponentImplementation[] = Object.values( | ||
| DEFAULT_COMPONENT_IMPLEMENTATIONS, | ||
| ); | ||
| export class NativeBasicCatalog extends AngularCatalog { |
There was a problem hiding this comment.
do we really need to export these classes or are they just an implementation detail? if so remove the export keyword
| configOrFactory: RendererConfiguration | (() => RendererConfiguration) = {}, | ||
| ): EnvironmentProviders { | ||
| const isFactory = typeof configOrFactory === 'function'; | ||
| const initialConfig = isFactory ? {} : configOrFactory; |
There was a problem hiding this comment.
if it is factory, should we call configOrFactory() ?
There was a problem hiding this comment.
undo the removal of these component catalog exports since we are not deleting the components anymore
There was a problem hiding this comment.
update the changelog entry with the current implementation from the code changes. Also update the PR description
b9f71ec to
064cfa5
Compare
064cfa5 to
3bf9f98
Compare
|
Superseded by #2273 after reordering universal markdown support before the Angular universal component adapter in the stack. |
1 participant
Summary
This PR enables the Angular v0.9 renderer to seamlessly consume universal Web Components from
@a2ui/web_coreand provide a bridge for Angular-native components:@a2ui/web_core.toWebComponentadapter with dynamic injector lookup and lifecycle detachment handling to register Angular components intoCatalog<WebComponentImplementation>.SurfaceComponentto use Angular signal reactiveeffectfor surface mounting, eliminating redundant lifecycle triggers.Verification
yarn --cwd renderers/angular test:unitpassed (259/259 tests).yarn --cwd renderers/angular test:integrationpassed (204/204 tests).yarn format:all && yarn lint:allpassed cleanly with 0 errors across the monorepo.Resolves #1270