Skip to content

feat(website): add sampleapp demo in playground - #25

Merged
KaloyanTsv1 merged 6 commits into
mainfrom
fix/shellbar-slot-validation-sampleapp
Oct 13, 2026
Merged

KaloyanTsv1 merged 6 commits into
mainfrom
fix/shellbar-slot-validation-sampleapp

Conversation

@KaloyanTsv1

Copy link
Copy Markdown
Contributor

Summary

  • Fix ShellBar cross-realm slot validation error — The playground iframe runs in a separate JS realm, so el instanceof HTMLElement throws in UI5ElementMetadata.validateSlotValue when ShellBar processes slotted children (each realm has its own HTMLElement constructor). Fixed by copying @ui5/webcomponents-base into local-cdn and patching UI5ElementMetadata.js to use nodeType checks instead of instanceof for HTMLElement/Node slot types. The playground import map is updated to serve @ui5/webcomponents-base from local-cdn instead of jsDelivr CDN.
  • Add full sampleapp demo — Interactive airports map showcasing ShellBar, filters, fly-to destinations, distance measurement, and drawing/selection controls.
  • Fix ShellBar logo — Replaced inline <svg> (an SVGElement, not an HTMLElement) with <img> so it passes slot type validation.
  • Fix fly-to stale coords bug — The goToBtn click handler was reading flyToDestCoords cached by the change event, which fires after the button click when the user picks from the dropdown and immediately clicks Go. Fixed by reading the combobox selection directly inside the click handler.

Test plan

  • Run node website/build-scripts/local-cdn.mjs and verify local-cdn/ui5-base/dist/UI5ElementMetadata.js contains isValidSlotType
  • Start the website dev server (cd website && npm start) and open the sampleapp sample page
  • Verify no The element is not of type HTMLElement error in the console
  • Verify the SAP logo renders correctly in the ShellBar
  • Open the Fly-To dialog, select a destination, click Go To — verify it flies to the selected destination (not the previous one)

… playground

The playground iframe runs in a separate JS realm, causing `el instanceof HTMLElement`
to throw in UI5ElementMetadata.validateSlotValue when ShellBar processes its slotted
children — each realm has its own HTMLElement constructor.

Fix by copying @ui5/webcomponents-base locally and patching UI5ElementMetadata.js to
use nodeType checks instead of instanceof for HTMLElement/Node slot validation.
Update the playground import map to serve @ui5/webcomponents-base from local-cdn.

Also adds the full sampleapp demo (airports map with ShellBar, filters, fly-to,
distance measurement, selection controls) and fixes two bugs in the sample:
- ShellBar logo: replace inline <svg> (SVGElement, not HTMLElement) with <img>
- Fly-to: read combobox selection at click time to avoid stale coords from
  change event firing after goToBtn click
@KaloyanTsv1 KaloyanTsv1 changed the title feat(website): add sampleapp demo and fix ShellBar slot validation in playground feat(website): add sampleapp demo in playground Oct 12, 2026
@cla-assistant

cla-assistant Bot commented Oct 13, 2026 •

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

@KaloyanTsv1
KaloyanTsv1 merged commit cff4177 into main Oct 13, 2026
4 checks passed
@KaloyanTsv1
KaloyanTsv1 deleted the fix/shellbar-slot-validation-sampleapp branch October 13, 2026 10:42
@sap-ui5-webcomponents-release

Copy link
Copy Markdown

🎉 This PR is included in version 0.1.0 🎉

The release is available on npm and GitHub releases.

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

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants