fix(web_core)!: namespace the basic catalog custom element tags - #2648
Draft
josemontespg wants to merge 1 commit into
Draft
josemontespg wants to merge 1 commit into
josemontespg wants to merge 1 commit into
Conversation
Contributor
There was a problem hiding this comment.
Code Review
This pull request renames the custom element tag names in the basic catalog to use the a2ui-basic- prefix (e.g., renaming a2ui-icon to a2ui-basic-icon), updating the components, their tests, and the explorer tests accordingly. It also adds a test in catalog.test.ts to verify that all basic catalog components are registered and correctly namespaced. The review feedback suggests importing and applying the WebComponentImplementation type to the A2uiModal export in Modal.ts for consistency and type safety.
josemontespg
force-pushed
the
web-core-namespace-basic-catalog-tags
branch
from
September 14, 2026 19:16
30cd5b0 to
2f4b8cc
Compare
josemontespg
commented
Sep 14, 2026
josemontespg
removed this pull request from stack #2649
September 14, 2026 19:58
josemontespg
force-pushed
the
web-core-namespace-basic-catalog-tags
branch
from
September 14, 2026 20:01
2f4b8cc to
bd68bc3
Compare
josemontespg
added this pull request to stack #2654
September 14, 2026 20:02
josemontespg
removed this pull request from stack #2654
September 14, 2026 20:24
Importing the basic catalog registers 18 custom elements, and only 5 of them were namespaced. The other 13 squatted short, generic names, so a host page that already owned one — `a2ui-audioplayer`, say — took the application down at module-evaluation time with `NotSupportedError: the name "a2ui-audioplayer" has already been used with this registry`. Rename the remaining 13 to `a2ui-basic-*`, finishing the migration. The `@customElement` argument and the `WebComponentImplementation.tagName` move in lockstep, because the catalog instantiates elements by `tagName` and a decorator-only rename compiles cleanly and then fails in the browser; a new test iterates the catalog and asserts every `tagName` resolves to a registered element, which catches a partial rename. CSS class names such as `.a2ui-card` are a separate contract shared with the React and Angular basic catalogs and are left alone. Registration stays eager and still throws on collision: now that the tags are namespaced, a remaining `NotSupportedError` is a genuine duplicate-registration bug and should stay loud.
josemontespg
force-pushed
the
web-core-namespace-basic-catalog-tags
branch
from
September 14, 2026 20:28
bd68bc3 to
fb84314
Compare
josemontespg
added this pull request to stack #2655
September 14, 2026 20:28
This branch has not been deployed
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.
Summary
Namespaces the 13 remaining basic catalog custom element tags to
a2ui-basic-*(such as renaminga2ui-cardtoa2ui-basic-card). This completes the namespace migration for the basic catalog and prevents global custom element registration collisions.Problem
Custom element tag names share a single global browser registry (
window.customElements).When an application imports
@a2ui/web_core/v0_9/basic_catalog, components eagerly register their custom element tags. Thirteen components previously used short, un-namespaced tags likea2ui-card,a2ui-icon,a2ui-modal, anda2ui-audioplayer.If a host application or another library on the page already registered an element with any of those names, the browser throws an error during module evaluation:
Because registration occurs at import time, this error blocks the host application from loading.
Additionally, five basic catalog components (
Text,Button,TextField,Row, andColumn) had already been migrated toa2ui-basic-*in earlier releases. The remaining thirteen components were left un-namespaced, creating an inconsistent naming scheme across the catalog.Solution
Rename the remaining 13 custom element tags to
a2ui-basic-*:Both the
@customElementdecorator and the exportedWebComponentImplementation.tagNameare updated together across all 13 components:a2ui-audioplayera2ui-basic-audioplayera2ui-carda2ui-basic-carda2ui-checkboxa2ui-basic-checkboxa2ui-choicepickera2ui-basic-choicepickera2ui-datetimeinputa2ui-basic-datetimeinputa2ui-dividera2ui-basic-dividera2ui-icona2ui-basic-icona2ui-imagea2ui-basic-imagea2ui-lista2ui-basic-lista2ui-modala2ui-basic-modala2ui-slidera2ui-basic-slidera2ui-tabsa2ui-basic-tabsa2ui-videoa2ui-basic-videoUpdate CSS selectors and tests: Updates internal tag selectors in component stylesheets (
a2ui-basic-card { ... }), component unit tests, and Lit explorer integration tests.Enforce naming and type safety in tests: In
catalog.test.ts, tests assert that every component inbasicCataloghas atagNameprefixed witha2ui-basic-and resolves to aninstanceof A2uiLitElement.Add missing type annotations: Explicitly types
A2uiModalandA2uiTextFieldwithWebComponentImplementationto ensure compile-time verification oftagName.Preserve CSS class names: CSS class names (such as
.a2ui-cardand.a2ui-icon) are intentionally left unchanged, preserving the shared styling and theming contract used across the Web Core, Lit, React, and Angular renderers.Verification
yarn --cwd renderers/web_core testpasses (563 tests).yarn --cwd renderers/lit test:unit,yarn --cwd renderers/react test, and full renderer topological build pass.Pre-launch Checklist