This is page 98 of 143. Use http://codebase.md/xmlui-org/xmlui/tools/vscode/resources/assets/img/bg-iphone-14-pro.jpg?page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ └── config.json
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── FancyButton.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.module.scss
│ │ │ ├── Preview.tsx
│ │ │ ├── Select.module.scss
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ ├── ToneSwitcher.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/dev-docs/containers.md:
--------------------------------------------------------------------------------
```markdown
# XMLUI Container-Based State Management
A deep dive into XMLUI's hierarchical container system for managing component state, variables, and reactive data binding.
## Fundamentals of XMLUI Reactivity
XMLUI implements **automatic reactivity** - a programming model where UI updates happen automatically when underlying data changes, without requiring manual DOM manipulation or explicit update calls.
### The Reactive Loop
XMLUI follows a simple reactive cycle:
1. **Initial Render**: Framework renders the complete UI from declarative markup
2. **Event Occurrence**: User interactions or system events trigger changes
3. **Automatic State Detection**: Framework detects state mutations transparently
4. **Selective UI Refresh**: Only components affected by the state change re-render
5. **Loop Continuation**: Process repeats for subsequent events
From a developer perspective, reactivity means:
- **Write declarative expressions**: Use `{count}` to display values, `count++` to modify them
- **No manual updates**: Framework automatically handles UI synchronization
- **Transparent mutations**: Change variables directly without special APIs
- **Predictable behavior**: UI always reflects current state consistently
### The Role of Containers in Reactivity Implementation
Containers are the **core mechanism** that enables XMLUI's automatic reactivity. They provide the infrastructure necessary to detect state changes, coordinate updates, and maintain UI consistency.
Reactivity requires several technical capabilities:
- **State Storage**: A place to hold component variables and data
- **Change Detection**: Mechanism to detect when state mutations occur
- **Update Coordination**: System to propagate changes to affected UI components
- **Scope Management**: Control over which components can access which state
- **Performance Optimization**: Efficient updates that don't block the UI
Containers provide all these capabilities through a hierarchical architecture that mirrors the component structure.
## Automatic Container Wrapping
XMLUI **automatically wraps components with containers** when they need reactive capabilities. You declare variables or data sources, and the framework creates the container infrastructure.
The framework creates containers for these cases:
- **App Root Container** - Wraps the entire application entry point
- **User-Defined Component Containers** - Each component instance gets isolated state
- **Variables** - Reactive state holders that trigger UI updates
- **Loaders** - Handle asynchronous data operations
- **Uses Declarations** - Control state inheritance from parents
- **Context Variables** - Framework-injected variables (routing, forms)
- **Scripts** - JavaScript blocks with variables and functions
- **Code-Behind Files** - External script files for application root or component roots
Every component receives an identifier (user-defined or framework-assigned). **User-defined IDs enable programmatic component interaction** - accessing methods, properties, and APIs. Framework IDs handle internal state. Component IDs scope to their declaring file (.xmlui). These IDs are stored in the App Root and User-Defined Component Containers.
### App Root Container
For every XMLUI application, a root container is automatically created to wrap the entire application entry point (typically Main.xmlui). This ensures there's always a top-level container to manage application-wide state.
**Example - Main.xmlui:**
```xml
<!-- File: Main.xmlui -->
<App>
<VStack>
<Text id="title">Welcome to My App</Text>
<Button id="actionBtn" label="Click Me" />
<Button label="Cancel" />
</VStack>
</App>
```
```mermaid
%%{init: {"block": {"padding": 8}}}%%
block-beta
columns 1
AR["<div style='text-align: left; width: 100%; padding: 0 15px;'>🏠 App Root Container<br/>💡 Container State:<br/> ├─ title → Text reference<br/> ├─ actionBtn → Button reference<br/> └─ [[cancel]] → Button reference<br/>🌳 Component Tree:<br/> VStack:<br/> ├─ Text (id: title)<br/> ├─ Button (id: actionBtn)<br/> └─ Button (id: [[cancel]])</div>"]
classDef rootContainer fill:#f0f0f0,stroke:#888,stroke-width:2px,color:#333,padding-left:15px,padding-right:15px
class AR rootContainer
```
> **Note**: `[[cancel]]` is an framework-assigned ID for the Cancel button since it doesn't have an explicit `id` attribute.
In this example, XMLUI automatically creates a root container that stores the IDs for `title`, `actionBtn`, and `[[cancel]]`, making them accessible throughout the application.
### User-Defined Component Instance Containers
Each time you use a user-defined component (created with `<Component name="...">`) in your markup, XMLUI automatically creates a container for that specific instance. This ensures **Instance Isolation** - each component usage gets its own state container with isolated internal state.
**Example Files:**
**File: Main.xmlui**
```xml
<!-- File: Main.xmlui -->
<App>
<VStack>
<!-- Each MyButton usage creates its own container -->
<MyButton label="Save" /> <!-- Creates Container A -->
<MyButton label="Cancel" /> <!-- Creates Container B -->
<MyButton label="Delete" /> <!-- Creates Container C -->
</VStack>
</App>
```
**File: components/MyButton.xmlui**
```xml
<!-- File: components/MyButton.xmlui -->
<Component name="MyButton" var.count="{0}">
<Button
label="{$props.label} ({count})"
onClick="count++"
/>
</Component>
```
```mermaid
%%{init: {"block": {"padding": 8}}}%%
block-beta
columns 3
block:AppRoot:3
AR["<div style='text-align: left; width: 100%'>🏠 App Root Container<br/>💡 Container State: MyButton instances<br/>🌳 Component Tree:<br/> VStack:<br/> ├─ MyButton (Container A)<br/> ├─ MyButton (Container B)<br/> └─ MyButton (Container C)</div>"]
end
CA["<div style='text-align: left; width: 100%'>🏠 Container A<br/>💡 State:<br/> ├─ count: 0<br/> └─ $props.label: 'Save'<br/>🌳 Component: Button (Save 0)</div>"]
CB["<div style='text-align: left; width: 100%'>🏠 Container B<br/>💡 State:<br/> ├─ count: 0<br/> └─ $props.label: 'Cancel'<br/>🌳 Component: Button (Cancel 0)</div>"]
CC["<div style='text-align: left; width: 100%'>🏠 Container C<br/>💡 State:<br/> ├─ count: 0<br/> └─ $props.label: 'Delete'<br/>🌳 Component: Button (Delete 0)</div>"]
classDef rootContainer fill:#f0f0f0,stroke:#888,stroke-width:2px,color:#333
classDef innerContainer fill:#f8f8f8,stroke:#aaa,stroke-width:1px,color:#333
class AR,CC,CB,CA rootContainer
class ARS,ART,CHC,CHB,CHA,CSC,CSB,CSA innerContainer
```
Each `MyButton` instance gets its own container with isolated `count` variable - clicking one button doesn't affect the others.
### Variables
Variables in XMLUI are reactive state holders that automatically trigger UI updates when changed. They can contain any JavaScript value, including functions. Variables can declare functions, and those functions can be invoked.
**Simple Variable Example:**
```xml
<Stack var.count="{0}">
<Button onClick="count++" label="Count: {count}" />
</Stack>
```
**Function Variable Example:**
```xml
<Stack var.count="{0}" var.increment="{() => count++}">
<Button onClick="increment()" label="Count: {count}" />
</Stack>
```
Variables and functions can also be defined in `<script>` tags:
```xml
<Stack>
<script>
let count = 0;
const increment = () => count++;
function reset() { count = 0; }
</script>
<Button onClick="increment()" label="Count: {count}" />
<Button onClick="reset()" label="Reset" />
</Stack>
```
**Role in Reactivity**: Variables provide the state storage layer for reactive data binding. When a variable changes, the container detects this through proxy-based change detection and triggers selective UI updates. Functions participate in dependency tracking - when they reference other variables, the system tracks these dependencies and re-evaluates when dependencies change.
### Loaders (`loaders`)
Loaders are XMLUI's mechanism for handling asynchronous data operations. The framework automatically creates loaders when it recognizes that components contain data-handling requirements. This happens through the **ApiBoundComponent** system.
**Automatic Loader Creation Cases:**
1. **Properties with DataSource/DataSourceRef types**: When a component property contains a `DataSource` or `DataSourceRef` object
2. **Events with API action types**: When a component event contains `APICall`, `FileDownload`, or `FileUpload` objects
3. **Components with data properties**: Any component with URL-based `data` properties
```xml
<!-- Property-based loader creation -->
<Table data="{users}" />
<!-- Framework creates internal DataLoader when 'users' references a DataSource -->
<!-- Direct URL pattern (frequently used) -->
<Table data="/api/users" />
<!-- Framework automatically creates DataLoader for URL-based data properties -->
<!-- Event-based loader creation -->
<Button>
Save
<event name="click">
<APICall url="/api/save" method="POST" />
</event>
</Button>
<!-- Framework creates APICall handler -->
<!-- Explicit DataSource (also creates loaders) -->
<DataSource id="users" url="/api/users" />
<Table data="{users}" />
<!-- Creates DataLoader managing: loading states, error states, caching, polling -->
```
**Framework Detection Process**: The `ComponentAdapter` scans component properties and events for specific object types that require API operations. It looks for:
- **Properties**: Objects with `type: "DataSource"` or `type: "DataSourceRef"`
- **Events**: Objects with `type: "APICall"`, `type: "FileDownload"`, or `type: "FileUpload"`
When any of these object types are found, the framework wraps the component in an `ApiBoundComponent`, which automatically generates the necessary loaders and wires them into the container system.
**Role in Reactivity**: Loaders manage asynchronous state transitions (loading → loaded/error) and integrate with the container's reducer system via actions like `LOADER_LOADED`, `LOADER_IN_PROGRESS_CHANGED`, etc. They provide reactive properties like `users.value`, `users.inProgress`, `users.loaded`.
### Uses Declarations (`uses`)
The `uses` property provides explicit control over state inheritance from parent containers:
```xml
<!-- Inherit all parent state (default) -->
<Stack>
<!-- children -->
</Stack>
<!-- Inherit no parent state -->
<Stack uses="[]">
<!-- children -->
</Stack>
<!-- Inherit only specific parent state -->
<Stack uses="['userInfo', 'theme']">
<!-- children -->
</Stack>
```
**Note**: XMLUI is moving toward automating the use of `uses` declarations, with plans to eliminate this property in favor of automatic dependency detection.
**Role in Reactivity**: Controls the scope of reactive data flow between parent and child containers. This prevents unnecessary re-renders when unrelated parent state changes and provides explicit data dependencies.
### Context Variables
Context variables are automatically injected by the framework and component implementations to provide contextual information to child components. These cannot be declared through attributes but are provided by the React implementation of XMLUI components.
**Naming Convention**: Context variables start with `$` by convention to distinguish them from user-defined variables.
**Examples of Context Variables** (not exhaustive):
- **Routing**: `$pathname`, `$routeParams`, `$queryParams`, `$linkInfo`
- **Iterators**: `$item`, `$itemIndex` (in Lists, Tables, etc.)
- **Forms**: `$data`, `$validationResult`, `$value`, `$setValue` (in FormItems)
- **Events**: `$param` (in event handlers)
Different components may inject additional context variables specific to their functionality.
```xml
<!-- Context variables are automatically available -->
<Table data="/api/users">
<Column bindTo="name">
<Text>{$item.name}</Text> <!-- $item provided by Table -->
</Column>
</Table>
<Page url="/users/:id">
<Text>User ID: {$routeParams.id}</Text> <!-- $routeParams provided by Page -->
</Page>
```
**Role in Reactivity**: Context variables are automatically injected into the container state, making them available for reactive data binding. When these variables change (e.g., route changes, current item changes), all dependent UI elements automatically update.
### Scripts
JavaScript code blocks that declare variables and functions:
```xml
<Stack>
<script>
var counter = 0;
function increment() { counter++; }
var multiplier = (x) => x * 2;
</script>
<Button onClick="increment()" label="Count: {counter}" />
</Stack>
```
**Role in Reactivity**: Scripts are parsed and their declarations (variables, functions) become part of the container's reactive state. The scripting system integrates with the dependency tracking and memoization systems to ensure efficient updates.
### Code-Behind Files
Code-behind files provide a way to define scripts in separate files rather than inline within components. The framework automatically treats these external script files as if they were `<script>` declarations within the application root or user-defined component root.
**File Naming Convention:**
- **Application Root**: `Main.xmlui.xs` (for `Main.xmlui`)
- **User-Defined Component**: `ComponentName.xmlui.xs` (for `ComponentName.xmlui`)
**Role in Reactivity**: Code-behind files are processed identically to inline `<script>` blocks. Their variable and function declarations become part of the container's reactive state, with the same dependency tracking and memoization behavior. The framework automatically imports and executes code-behind files during component initialization, making their exports available in the component's reactive scope.
### Examples
**Important**: Simply having an `id` attribute does NOT automatically create a container. Component IDs are handled differently and are stored in the nearest parent container.
Components are wrapped in containers when they have any of these characteristics (determined by the `isContainerLike` function):
```tsx
// From ContainerWrapper.tsx - Container creation logic
export function isContainerLike(node: ComponentDef) {
if (node.type === "Container") {
return true;
}
// If any of the following properties have a value, we need a container
return !!(
node.loaders || // Data loading operations
node.vars || // Variable declarations
node.uses || // Parent state scoping
node.contextVars || // Context variable provision
node.functions || // Function declarations
node.scriptCollected // Script blocks
);
}
```
**Container Creation Examples:**
```xml
<!-- Creates container - has variable -->
<Stack var.count="{0}" />
<!-- Creates container - has script -->
<Stack>
<script>let x = 1;</script>
</Stack>
<!-- Creates container - has data loading -->
<Table data="/api/users" />
<!-- Does NOT create container - only has ID -->
<Stack id="myStack" />
<!-- Does NOT create container - only layout properties -->
<Stack direction="horizontal" />
```
## Container Structure, Hierarchy, and Features
This section explores the architectural design of containers, their hierarchical organization, and how they support XMLUI's special concepts like loaders, user-defined components, and reactive variables.
### Container Hierarchy
The container system consists of three main React components working together:
```
ContainerWrapper
└── ErrorBoundary
└── StateContainer
└── ErrorBoundary
└── Container
```
### Core Container Components
#### ContainerWrapper
- **Purpose**: Outer wrapper that converts components into containerized form
- **Location**: `/xmlui/src/components-core/rendering/ContainerWrapper.tsx`
- **Key Responsibility**: Determines if a component needs containerization and wraps it accordingly
Components are wrapped in containers if they have any of these characteristics:
- Loaders (data management operations)
- Variables declared (`vars`)
- Context variables (`contextVars`)
- Scripts (`script` or `scriptCollected`)
- Explicit state usage declarations (`uses` property)
#### StateContainer
- **Purpose**: Manages the actual state storage and state composition
- **Location**: `/xmlui/src/components-core/rendering/StateContainer.tsx`
- **Key Responsibility**: Assembles state from multiple sources and manages state lifecycle
#### Container
- **Purpose**: Executes event handlers and manages state changes while maintaining UI responsiveness
- **Location**: `/xmlui/src/components-core/rendering/Container.tsx`
- **Key Responsibility**: Asynchronous event handler execution and state synchronization
## State Composition and Management
### ContainerState Type
```typescript
// From /xmlui/src/abstractions/ContainerDefs.ts
export type ContainerState = Record<string | symbol, any>;
```
### State Assembly Process
The `StateContainer` assembles the complete state from multiple layers:
1. **State from Parent**: Inherited state from parent containers (with optional scoping via `uses`)
2. **Component APIs**: Exposed component methods and properties
3. **Local Variables**: Variables declared in the current component
4. **Context Variables**: Variables provided to child components
5. **Routing Parameters**: URL parameters, query strings, and navigation context
### State Flow Implementation
```typescript
// Simplified flow from StateContainer.tsx
const stateFromOutside = extractScopedState(parentState, node.uses);
const componentStateWithApis = mergeComponentApis(componentState, componentApis);
const localVarsStateContext = useCombinedState(stateFromOutside, componentStateWithApis, node.contextVars);
const resolvedLocalVars = useVars(varDefinitions, functionDeps, localVarsStateContext, memoedVars);
const mergedWithVars = useMergedState(resolvedLocalVars, componentStateWithApis);
// State priority order (later overrides earlier):
// 1. stateFromOutside (parent state - lowest priority)
// 2. node.contextVars (context variables like $item)
// 3. mergedWithVars (local vars + component APIs - highest priority)
const combinedState = useCombinedState(
stateFromOutside, // Parent state (lowest priority) - allows shadowing
node.contextVars, // Context vars
mergedWithVars, // Local vars and component APIs (highest priority) - enables shadowing
routingParams // Routing parameters
);
```
**State Shadowing**: The priority order allows local variables to shadow (override) parent state variables with the same name. This enables child containers to define their own versions of variables without being forced to use the parent's state, supporting better component encapsulation.
### Variable Resolution and Memoization
Variables are resolved through a sophisticated memoization system:
```typescript
// From StateContainer.tsx - useVars function
type MemoedVars = Map<any, {
getDependencies: (value: string | CodeDeclaration, referenceTrackedApi: Record<string, ComponentApi>) => Array<string>;
obtainValue: (expression: any, state: ContainerState, appContext: AppContextObject | undefined, strict: boolean | undefined, stateDeps: Record<string, any>, appContextDeps: Record<string, any>) => any;
}>;
```
#### Variable Dependency Tracking
1. **Function Dependencies**: Arrow expressions and their variable dependencies are collected first
2. **Variable Dependencies**: Dependencies between variables are resolved in multiple passes
3. **Memoization**: Results are memoized based on dependency changes to avoid unnecessary recalculation
## Reducer-Based State Updates
### Container Actions
State changes are managed through Redux-style actions via the `ContainerActionKind` enum:
```typescript
// From /xmlui/src/components-core/rendering/containers.ts
export const enum ContainerActionKind {
LOADER_LOADED = "ContainerActionKind:LOADER_LOADED",
LOADER_IN_PROGRESS_CHANGED = "ContainerActionKind:LOADER_IN_PROGRESS_CHANGED",
LOADER_IS_REFETCHING_CHANGED = "ContainerActionKind:LOADER_IS_REFETCHING_CHANGED",
LOADER_ERROR = "ContainerActionKind:LOADER_ERROR",
EVENT_HANDLER_STARTED = "ContainerActionKind:EVENT_HANDLER_STARTED",
EVENT_HANDLER_COMPLETED = "ContainerActionKind:EVENT_HANDLER_COMPLETED",
EVENT_HANDLER_ERROR = "ContainerActionKind:EVENT_HANDLER_ERROR",
COMPONENT_STATE_CHANGED = "ContainerActionKind:COMPONENT_STATE_CHANGED",
STATE_PART_CHANGED = "ContainerActionKind:STATE_PART_CHANGED",
}
```
#### Event Handler State Preservation
The event handler lifecycle actions (`EVENT_HANDLER_STARTED`, `EVENT_HANDLER_COMPLETED`, `EVENT_HANDLER_ERROR`) implement a critical state preservation pattern. When setting lifecycle flags like `inProgress` or `error`, the reducer checks if state already exists for the component's `uid`:
```typescript
// From reducer.ts - state preservation pattern
case ContainerActionKind.EVENT_HANDLER_STARTED:
state[uid] = state[uid]
? { ...state[uid], [inProgressFlagName]: true }
: { [inProgressFlagName]: true };
break;
```
**Why This Matters**: Components with reducer state (like `DataSource` or `APICall`) maintain their `data`, `error`, and other properties throughout the event handler lifecycle. Without this preservation, setting the `inProgress` flag would replace the entire state object, losing critical data like loaded results or previous errors. This fix resolved issues where APIs would become non-functional after their first error because the state was being wiped out instead of updated.
### Partial State Changes
The most sophisticated action is `STATE_PART_CHANGED`, which handles deep object/array mutations:
```typescript
// Example: Updating nested property some.count++
{
"type": "ContainerActionKind:STATE_PART_CHANGED",
"payload": {
"actionType": "set",
"path": ["some", "count"],
"target": { "count": 0 },
"value": 1,
"localVars": resolvedLocalVars
}
}
```
The reducer uses Lodash's `setWith` to update nested paths while preserving object vs array types based on target structure.
## Proxy-Based Change Detection
### BuildProxy Function
State changes are detected using JavaScript Proxies that intercept get/set operations:
```typescript
// From /xmlui/src/components-core/rendering/buildProxy.ts
export function buildProxy(
proxyTarget: any,
callback: (changeInfo: ProxyCallbackArgs) => void,
tree: Array<string | symbol> = [],
): any {
return new Proxy(proxyTarget, {
get: function (target, prop, receiver) {
const value = Reflect.get(target, prop, receiver);
// Create nested proxies for objects and arrays
if (value && typeof value === "object" && ["Array", "Object"].includes(value.constructor.name)) {
if (!proxiedValues.has(value)) {
proxiedValues.set(value, buildProxy(value, callback, tree.concat(prop)));
}
return proxiedValues.get(value);
}
return value;
},
set: function (target, prop, value, receiver) {
// Notify of state changes
callback({
action: "set",
path: getPath(prop),
pathArray: tree.concat(prop),
target,
newValue: value,
previousValue: Reflect.get(target, prop, receiver),
});
return Reflect.set(target, prop, value, receiver);
}
});
}
```
### Change Propagation
When a proxied state change occurs:
1. **Detection**: Proxy intercepts the change and calls the callback
2. **Path Analysis**: Determines if the change belongs to current container or parent
3. **Dispatch**: Sends `STATE_PART_CHANGED` action to appropriate container
4. **Reduction**: Immer-based reducer applies the change immutably
5. **Re-render**: React re-renders affected components
## Component Identification and APIs
### Symbol-Based Component IDs
Components within containers are identified using JavaScript Symbols:
```typescript
// Component ID resolution
const componentUid = componentId ?? Symbol(id);
if (id) {
componentUid.description = id; // For debugging and API access
}
```
### Component ID Storage vs Accessibility
A key insight about XMLUI's component management is understanding where component IDs are stored, how they flow through the container hierarchy, and what happens when a component has an ID but doesn't create its own container.
**Component ID Creation and Storage Flow**
1. **Universal ID Assignment**: ALL components receive a unique Symbol-based ID, regardless of whether they create containers:
```tsx
// From ComponentAdapter.tsx - every component gets a UID
const uid = useMemo(() => Symbol(safeNode.uid), [safeNode.uid]);
```
2. **Container vs Non-Container Components**:
- **Components that create containers**: Store their child component IDs in their own `componentApis` state
- **Components that DON'T create containers**: Their IDs are stored in the nearest parent container
3. **Registration Mechanism**: Components register their APIs (including their ID) with the nearest container:
```tsx
// From ComponentAdapter.tsx - all components register with nearest container
const memoedRegisterComponentApi: RegisterComponentApiFn = useCallback(
(api) => {
registerComponentApi(uid, api); // Registers with nearest parent container
},
[registerComponentApi, uid],
);
```
4. **Storage in Parent Container**: The `StateContainer` maintains a `componentApis` map:
```tsx
// From StateContainer.tsx - parent container stores all child component IDs
const registerComponentApi: RegisterComponentApiFnInner = useCallback((uid, api) => {
setComponentApis(produce((draft) => {
if (!draft[uid]) {
draft[uid] = {};
}
Object.entries(api).forEach(([key, value]) => {
draft[uid][key] = value;
});
}));
}, []);
```
**Global Access Through State Composition**
Even though component IDs are stored hierarchically, they become accessible file-wide through state inheritance:
```tsx
// From StateContainer.tsx - state flows down through hierarchy
const combinedState = useCombinedState(
stateFromOutside, // Parent state (contains parent component IDs)
node.contextVars, // Framework context variables
mergedWithVars, // Local variables and component state
routingParams, // Routing parameters
);
```
**Example Scenarios**:
1. **Component with ID but no container**:
```xml
<Stack var.count="{0}"> <!-- Creates container A -->
<Button id="myBtn" /> <!-- ID stored in container A -->
<Text id="myText" /> <!-- ID also stored in container A -->
</Stack>
```
2. **Nested containers with inheritance**:
```xml
<Stack var.count="{0}"> <!-- Creates container A -->
<Button id="myBtn" /> <!-- ID stored in container A -->
<Stack var.data="{null}"> <!-- Creates container B -->
<Text>{myBtn.visible}</Text> <!-- Can access myBtn via state inheritance -->
<Button id="innerBtn" /> <!-- ID stored in container B -->
</Stack>
</Stack>
```
**Storage and Access Pattern**:
- `myBtn` and `myText` IDs are stored in container A's `componentApis` (they don't create their own containers)
- `innerBtn` ID is stored in container B's `componentApis`
- Container B inherits parent state through `stateFromOutside`, making `myBtn` accessible
- All components can reference each other within the same .xmlui file through the state inheritance chain
**Root Component Storage**:
If `<Stack id="myStack" />` is a root component that doesn't create its own container, its ID is stored in the automatically-created root container. XMLUI ensures there's always at least one container in the hierarchy to store component IDs.
This design ensures that:
- **Performance**: Each container only manages its direct responsibility
- **Usability**: All components within a .xmlui file can reference each other
- **Consistency**: Component IDs flow predictably through the container hierarchy
- **Reliability**: There's always a root container to store component IDs, even for simple root components
### Component API Registration
Components can expose APIs that other components can invoke:
```typescript
// From StateContainer.tsx
const registerComponentApi: RegisterComponentApiFnInner = useCallback((uid, api) => {
setComponentApis(produce((draft) => {
if (!draft[uid]) {
draft[uid] = {};
}
Object.entries(api).forEach(([key, value]) => {
if (draft[uid][key] !== value) {
draft[uid][key] = value;
}
});
}));
}, []);
```
APIs are merged into the component state so they're accessible via the component's ID:
```typescript
// API access pattern
componentStateWithApis[componentId] = { ...componentState, ...exposedApi };
```
#### API State Scoping
Component API state (particularly reducer state from loaders like `DataSource` or `APICall`) is carefully scoped to prevent state leakage between containers. When component APIs are exposed as string keys in the container state (using the component's `id` as the key), the StateContainer only includes reducer state for APIs that are actually registered within that specific container.
**Implementation**: The StateContainer maintains a Set of registered API keys and filters which reducer state properties are copied to string keys:
```typescript
// From StateContainer.tsx - API state scoping
const registeredApiKeys = new Set<string>();
for (const sym of Object.getOwnPropertySymbols(componentApis)) {
if (sym.description) {
registeredApiKeys.add(sym.description);
}
}
// Only copy reducer state if the API is registered in this container
for (const key of Object.keys(componentState)) {
if (registeredApiKeys.has(key)) {
ret[key] = { ...(ret[key] || {}), ...componentState[key] };
}
}
```
**Benefit**: This prevents child containers from inheriting parent API reducer state. For example, if a parent has a `DataSource` with `id="users"`, child containers won't see `users.inProgress`, `users.error`, or other reducer properties unless they register their own API with that ID. This ensures clean separation and prevents confusing state interactions.
## Asynchronous Event Handler Execution
### UI Responsiveness Strategy
The Container component maintains UI responsiveness during long-running operations through:
1. **Async Instruction Execution**: Each instruction in an event handler runs asynchronously
2. **State Synchronization Points**: Execution pauses after each instruction for state updates
3. **Promise-Based Coordination**: Uses promises to coordinate when state changes are committed
4. **Transition-Based Updates**: Uses React's `startTransition` for non-urgent updates
### Execution Flow
```typescript
// Simplified execution pattern from Container.tsx
const executeHandler = async (statements: Statement[], options: ExecutionOptions) => {
for (const statement of statements) {
// Execute statement
await processStatement(statement, evalContext);
// Collect state changes
if (changes.length > 0) {
// Dispatch state changes
changes.forEach(change => {
statePartChanged(change.pathArray, change.newValue, change.target, change.action);
});
// Create promise for this statement
const statementPromise = new Promise(resolve => {
statementPromiseResolvers.current.set(statementId, resolve);
});
// Increment version to trigger re-render
startTransition(() => {
setVersion(prev => prev + 1);
});
// Wait for state to be committed
await statementPromise;
}
}
};
```
### Version-Based Synchronization
The Container uses a version counter to coordinate state updates:
```typescript
// When version changes, resolve pending promises
useEffect(() => {
// Resolve all pending statement promises
statementPromiseResolvers.current.forEach(resolve => resolve());
statementPromiseResolvers.current.clear();
}, [version]);
```
## State Scoping and Inheritance
### Parent State Extraction
Child containers can limit which parent state they receive:
```typescript
// From StateContainer.tsx
function extractScopedState(parentState: ContainerState, uses?: string[]): ContainerState | undefined {
if (!uses) {
return parentState; // Inherit all parent state
}
if (uses.length === 0) {
return EMPTY_OBJECT; // Inherit no parent state
}
return pick(parentState, uses); // Inherit only specified keys
}
```
### Context Variables
Containers can provide context variables to their children:
```typescript
// contextVars flow down to child containers automatically
const localVarsStateContext = useCombinedState(
stateFromOutside,
componentStateWithApis,
node.contextVars // These become available to children
);
```
### State Merging Strategies
Different merging strategies are used for different state layers:
1. **Override**: Higher-priority state overrides lower-priority (`useCombinedState`)
2. **Merge**: Object and array values are deep-merged (`useMergedState`)
3. **Replace**: Simple values replace entirely
## Routing Integration
### Routing Parameters as State
Routing information is automatically injected into container state:
```typescript
// From StateContainer.tsx - useRoutingParams
const routingParams = useMemo(() => {
return {
$pathname: location.pathname,
$routeParams: routeParams, // URL parameters like :id
$queryParams: queryParamsMap, // Query string parameters
$linkInfo: linkInfo, // Navigation context
};
}, [linkInfo, location.pathname, queryParamsMap, routeParams]);
```
These are automatically available in all containers as context variables.
## Error Boundaries and Resilience
### Layered Error Protection
The container system has multiple error boundaries:
1. **Container-Level**: Protects StateContainer from Container errors
2. **StateContainer-Level**: Protects parent containers from child container errors
3. **Component-Level**: Individual component errors don't crash containers
### State Preservation
If a Container crashes during event handler execution, the StateContainer preserves its state, allowing recovery or graceful degradation.
## Performance Optimizations
### Memoization Strategies
1. **Component Memoization**: Container components are memoized to prevent unnecessary re-renders
2. **Variable Memoization**: Variable resolution results are cached based on dependencies
3. **Shallow Comparison**: State objects use shallow comparison for change detection
4. **Reference Tracking**: Proxy objects maintain stable references for nested access
### Change Detection Optimizations
1. **Path-Based Updates**: Only affected parts of state tree are updated
2. **Dependency Tracking**: Variables are only re-evaluated when their dependencies change
3. **Batch Updates**: Multiple changes in single instruction are batched together
4. **Transition Updates**: Non-urgent updates use React transitions for better performance
## Debugging Support
### State Transition Logging
The container reducer can log state transitions for debugging:
```typescript
// From reducer.ts
export function createContainerReducer(debugView: IDebugViewContext) {
const allowLogging = debugView.collectStateTransitions;
// ... logging implementation
}
```
### Component Keys and Resolution
Components receive resolved keys for debugging and tracking:
```typescript
// From renderChild.tsx
const key = extractParam(state, node.uid, appContext, true);
return (
<ComponentWrapper
key={key}
resolvedKey={key} // For debugging container parent chains
// ...
/>
);
```
## Integration Points
### DataSource Integration
DataSource components integrate with the container system through loader actions:
```typescript
// Loader state management
dispatch({
type: ContainerActionKind.LOADER_LOADED,
payload: {
uid: dataSourceUid,
data: fetchedData,
pageInfo: paginationInfo
}
});
```
### Form Integration
Form components manage their state through the container system while maintaining their own internal state for performance.
### API Integration
Component APIs are registered with containers and become part of the state, making them accessible to other components via component IDs.
## Key Design Principles
1. **Hierarchical Encapsulation**: State is scoped to container boundaries while allowing controlled inheritance
2. **Reactive Consistency**: All state changes automatically propagate to dependent UI elements
3. **Async Coordination**: Long-running operations don't block the UI thread
4. **Immutable Updates**: All state changes produce new immutable state objects
5. **Proxy Transparency**: State mutations are detected transparently without special syntax
6. **Error Isolation**: Component errors are contained and don't propagate to affect other parts of the application
This container-based architecture provides XMLUI with a robust, scalable state management solution that maintains the declarative programming model while handling complex state interactions and ensuring optimal performance characteristics.
```
--------------------------------------------------------------------------------
/xmlui/src/components/APICall/APICall.spec.ts:
--------------------------------------------------------------------------------
```typescript
import { expect, test } from "../../testing/fixtures";
import type { ApiInterceptorDefinition } from "../../components-core/interception/abstractions";
// Test data constants for API mocking
const basicApiInterceptor: ApiInterceptorDefinition = {
operations: {
"get-test": {
url: "/api/test",
method: "get",
handler: `console.log('GET!!!'); return { message: "GET success", id: 1 };`,
},
"post-test": {
url: "/api/test/1",
method: "post",
handler: `return { message: "POST success", id: 2, data: $requestBody };`,
},
"put-test": {
url: "/api/test/1",
method: "put",
handler: `return { message: "PUT success", id: 1, data: $requestBody };`,
},
"delete-test": {
url: "/api/test/1",
method: "delete",
handler: `return { message: "DELETE success", deleted: true };`,
},
"query-params-test": {
url: "/api/search",
method: "get",
handler: `return { query: $queryParams, results: ["item1", "item2"] };`,
},
"headers-test": {
url: "/api/headers",
method: "get",
handler: `console.log('hd', $requestHeaders); return { headers: $requestHeaders };`,
},
"error-test": {
url: "/api/error",
method: "post",
handler: `throw Errors.HttpError(400, { message: "Bad request", details: "Invalid data" });`,
},
"slow-test": {
url: "/api/slow",
method: "get",
handler: `
await new Promise(resolve => setTimeout(resolve, 100));
return { message: "Slow response" };
`,
},
},
};
const confirmationInterceptor: ApiInterceptorDefinition = {
operations: {
"confirm-test": {
url: "/api/confirm",
method: "post",
handler: `return { message: "Confirmed action", timestamp: Date.now() };`,
},
},
};
// =============================================================================
// BASIC FUNCTIONALITY TESTS
// =============================================================================
test.describe("Basic Functionality", () => {
test("component renders and initializes correctly", async ({ initTestBed, page }) => {
await initTestBed(`<APICall id="test" url="/api/test" method="get" />`, {
apiInterceptor: basicApiInterceptor,
});
// APICall is non-visual, so we check for proper registration by checking if it exists in context
const component = page.getByTestId("test-id-component");
expect(await component.count()).toBe(0); // Non-visual component
});
test("component executes with basic properties", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall id="api" url="/api/test" method="get" onSuccess="arg => testState = arg.message" />
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("GET success");
});
// =============================================================================
// HTTP METHOD TESTS
// =============================================================================
test.describe("HTTP method property", () => {
const methods = ["get", "post", "put", "delete"];
methods.forEach((method) => {
test(`executes ${method.toUpperCase()} request correctly`, async ({
initTestBed,
createButtonDriver,
}) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test${method === "get" ? "" : "/1"}"
method="${method}"
${method !== "get" ? `body='{{ "test": "data" }}'` : ""}
onSuccess="result => testState = result.message"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect
.poll(testStateDriver.testState, { timeout: 2000 })
.toEqual(`${method.toUpperCase()} success`);
});
});
test("supports additional HTTP methods like PATCH", async ({
initTestBed,
createButtonDriver,
}) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test/1"
method="patch"
body='{{ "test": "data" }}'
onSuccess="() => testState = 'patch-success'"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: {
operations: {
"real-patch": {
url: "/api/test/1",
method: "patch",
handler: `return { message: "PATCH success" };`,
},
},
},
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("patch-success");
});
test("defaults to GET method when not specified", async ({
initTestBed,
createButtonDriver,
}) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall id="api" url="/api/test" onSuccess="result => testState = result.message" />
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("GET success");
});
test("handles invalid method gracefully", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall id="api" url="/api/test" method="invalid" onError="() => testState = 'error'" />
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("error");
});
});
// =============================================================================
// URL PROPERTY TESTS
// =============================================================================
test.describe("url property", () => {
test("handles absolute URLs", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall id="api" url="/api/test" onSuccess="() => testState = 'success'" />
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
});
test("handles relative URLs", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall id="api" url="api/test" onSuccess="() => testState = 'success'" />
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: {
operations: {
"relative-test": {
url: "**/api/test",
method: "get",
handler: `return { success: true };`,
},
},
},
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
});
test("handles URL with special characters", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall id="api" url="/api/test?q=hello%20world&filter=a%26b" onSuccess="() => testState = 'success'" />
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: {
operations: {
"special-chars": {
url: "**/api/test**",
method: "get",
handler: `return { success: true };`,
},
},
},
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
});
});
// =============================================================================
// BODY PROPERTY TESTS
// =============================================================================
test.describe("body property", () => {
test("sends JSON body correctly", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test/1"
method="post"
body="{{ name: 'John', age: 30 }}"
onSuccess="result => testState = result.data.name"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("John");
});
test("handles empty body", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall id="api" url="/api/test/1" method="post" body="" onSuccess="() => testState = 'success'" />
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
});
test("handles complex nested objects in body", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test/1"
method="post"
body="{{ user: { profile: { name: 'Jane', settings: { theme: 'dark' } } }, items: [1, 2, 3] }}"
onSuccess="result => testState = result.data.user.profile.name"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("Jane");
});
});
// =============================================================================
// RAW BODY PROPERTY TESTS
// =============================================================================
test.describe("rawBody property", () => {
test("sends raw string body", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test"
method="post"
rawBody="plain text content"
onSuccess="() => testState = 'success'"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: {
operations: {
"raw-body": {
url: "/api/test",
method: "post",
handler: `return { received: $requestBody };`,
},
},
},
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
});
test("rawBody takes precedence over body", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test"
method="post"
body="{{ name: 'John' }}"
rawBody="raw content"
onSuccess="() => testState = 'success'"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: {
operations: {
"precedence-test": {
url: "/api/test",
method: "post",
handler: `return { received: $requestBody };`,
},
},
},
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
});
});
// =============================================================================
// QUERY PARAMS PROPERTY TESTS
// =============================================================================
test.describe("queryParams property", () => {
test("sends query parameters correctly", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/search"
queryParams="{{ q: 'test', limit: 10, active: true }}"
onSuccess="result => testState = result.query.q"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("test");
});
test("handles empty query parameters", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall id="api" url="/api/search" queryParams="{{}}" onSuccess="() => testState = 'success'" />
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
});
test("handles special characters in query parameters", async ({
initTestBed,
createButtonDriver,
}) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/search"
queryParams="{{ q: 'hello world', special: 'a&b=c' }}"
onSuccess="result => testState = result.query.q"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("hello world");
});
});
// =============================================================================
// HEADERS PROPERTY TESTS
// =============================================================================
test.describe("headers property", () => {
test("sends custom headers correctly", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/headers"
headers="{{ 'X-Custom-Header': 'test-value', 'Authorization': 'Bearer token123' }}"
onSuccess="result => testState = result.headers['x-custom-header']"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("test-value");
});
test("handles empty headers", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall id="api" url="/api/headers" headers="{{}}" onSuccess="() => testState = 'success'" />
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
});
});
// =============================================================================
// CONFIRMATION DIALOG TESTS
// =============================================================================
test.describe("confirmation dialog properties", () => {
test("shows confirmation dialog with custom title and message", async ({
initTestBed,
createButtonDriver,
page,
}) => {
await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/confirm"
method="post"
confirmTitle="Custom Title"
confirmMessage="Are you sure you want to proceed?"
confirmButtonLabel="Yes, Continue"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: confirmationInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
// Check for confirmation dialog
await expect(page.getByText("Custom Title")).toBeVisible();
await expect(page.getByText("Are you sure you want to proceed?")).toBeVisible();
await expect(page.getByText("Yes, Continue")).toBeVisible();
});
test("API call proceeds when confirmation is accepted", async ({
initTestBed,
createButtonDriver,
page,
}) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/confirm"
method="post"
confirmTitle="Confirm"
confirmMessage="Proceed?"
onSuccess="() => testState = 'confirmed'"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: confirmationInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
// Accept confirmation
await page.getByRole("button", { name: /yes/i }).click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("confirmed");
});
test("API call is cancelled when confirmation is rejected", async ({
initTestBed,
createButtonDriver,
page,
}) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/confirm"
method="post"
confirmTitle="Confirm"
confirmMessage="Proceed?"
onSuccess="() => testState = 'confirmed'"
onError="() => testState = 'error'"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: confirmationInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
// Reject confirmation
await page.getByRole("button", { name: /cancel|no/i }).click();
// Should not execute API call
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual(null);
});
});
// =============================================================================
// NOTIFICATION MESSAGE TESTS
// =============================================================================
test.describe("notification message properties", () => {
test("shows progress notification during API call", async ({
initTestBed,
createButtonDriver,
page,
}) => {
await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/slow"
inProgressNotificationMessage="Processing your request..."
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
// Check for progress notification
await expect(page.getByText("Processing your request...")).toBeVisible();
});
test("shows success notification with result data", async ({
initTestBed,
createButtonDriver,
page,
}) => {
await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test"
completedNotificationMessage="Success: {$result.message}"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
// Check for success notification
await expect(page.getByText("Success: GET success")).toBeVisible();
});
test("shows error notification with error details", async ({
initTestBed,
createButtonDriver,
page,
}) => {
await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/error"
method="post"
errorNotificationMessage="Error {$error.statusCode}: {$error.details.message}"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
// Check for error notification
await expect(page.getByText("Error 400: Bad request")).toBeVisible();
});
});
// =============================================================================
// EXECUTE METHOD TESTS
// =============================================================================
test.describe("execute method", () => {
test("triggers API call", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall id="api" url="/api/test" onSuccess="() => testState = 'executed'" />
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("executed");
});
test("accepts parameters", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test/1"
method="post"
body="{$param}"
onSuccess="result => testState = result.data.name"
/>
<Button testId="trigger" onClick="api.execute({ name: 'John', age: 30 })" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("John");
});
test("provides access to multiple parameters", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test/1"
method="post"
body="{{ first: $params[0], second: $params[1], third: $params[2] }}"
onSuccess="result => testState = result.data.first + '-' + result.data.second + '-' + result.data.third"
/>
<Button testId="trigger" onClick="api.execute('param1', 'param2', 'param3')" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect
.poll(testStateDriver.testState, { timeout: 2000 })
.toEqual("param1-param2-param3");
});
test("can be called multiple times", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment var.callCount="{0}">
<Button testId="trigger" label="Execute {callCount}" >
<event name="click">
<APICall
url="/api/test"
onSuccess="console.log('before', callCount); callCount++; console.log('after', callCount); testState = callCount;"
/>
</event>
</Button>
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for async execution
//await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual(1);
await button.click();
//await expect.poll(testStateDriver.testState).toEqual(2);
await button.click();
//await expect.poll(testStateDriver.testState).toEqual(3);
});
});
// =============================================================================
// CONTEXT VARIABLE TESTS
// =============================================================================
test.describe("context variables", () => {
test("$param provides access to first parameter", async ({
initTestBed,
createButtonDriver,
}) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test/1"
method="post"
body="{$param}"
onSuccess="result => testState = result.data.message"
/>
<Button testId="trigger" onClick="api.execute({ message: 'hello' })" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("hello");
});
test("$params provides access to all parameters", async ({
initTestBed,
createButtonDriver,
}) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test/1"
method="post"
body="{{ all: $params }}"
onSuccess="result => testState = result.data.all.length"
/>
<Button testId="trigger" onClick="api.execute('a', 'b', 'c')" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual(3);
});
test("$result provides access to response data", async ({
initTestBed,
createButtonDriver,
}) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test"
onSuccess="result => testState = result.id + ' - ' + result.message"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("1 - GET success");
});
test("$error provides access to error information", async ({
initTestBed,
createButtonDriver,
}) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/error"
method="post"
onError="error => testState = error.statusCode + ' - ' + error.details.message"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("400 - Bad request");
});
});
});
// =============================================================================
// OTHER EDGE CASE TESTS
// =============================================================================
test.describe("Other Edge Cases", () => {
test("handles null and undefined parameters gracefully", async ({
initTestBed,
createButtonDriver,
}) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test/1"
method="post"
body="{$param}"
onSuccess="() => testState = 'success'"
onError="() => testState = 'error'"
/>
<Button testId="trigger" onClick="api.execute(null)" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
});
test("handles undefined URL gracefully", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall id="api" onError="() => testState = 'error'" />
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("error");
});
test("handles malformed JSON in body gracefully", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test"
method="post"
body="{ invalid json }"
onSuccess="() => testState = 'success'"
onError="() => testState = 'error'"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("error");
});
test("handles very large request payloads", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test/1"
method="post"
body="{$param}"
onSuccess="() => testState = 'success'"
/>
<Button testId="trigger" onClick="api.execute({ data: 'x'.repeat(10000) })" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
});
test("handles special Unicode characters in data", async ({
initTestBed,
createButtonDriver,
}) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test/1"
method="post"
body="{$param}"
onSuccess="result => testState = result.data.emoji"
/>
<Button testId="trigger" onClick="api.execute({ emoji: '👨👩👧👦🚀', chinese: '你好世界' })" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
await button.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("👨👩👧👦🚀");
});
test("handles rapid successive API calls", async ({ page, initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment>
<APICall
id="api"
url="/api/test"
onSuccess="testState ??= 0; testState++;"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const button = await createButtonDriver("trigger");
// Rapidly click multiple times
await button.click();
await page.waitForTimeout(100);
await button.click();
await page.waitForTimeout(100);
await button.click();
await page.waitForTimeout(100);
// Should handle all calls
await expect.poll(testStateDriver.testState, { timeout: 5000 }).toEqual(3);
});
test("handles component cleanup correctly", async ({ initTestBed, createButtonDriver }) => {
const { testStateDriver } = await initTestBed(
`
<Fragment var.showApi="true">
<Fragment if="showApi">
<APICall id="api" url="/api/test" onSuccess="() => testState = 'success'" />
</Fragment>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
<Button testId="hide" onClick="showApi = false" label="Hide" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const executeButton = await createButtonDriver("trigger");
const hideButton = await createButtonDriver("hide");
// Execute API call first
await executeButton.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
// Hide the component
await hideButton.click();
// Try to execute again (should not crash)
try {
await executeButton.click();
} catch (error) {
// This is expected as the component is no longer available
}
});
test("handles when condition preventing execution", async ({
initTestBed,
createButtonDriver,
}) => {
const { testStateDriver } = await initTestBed(
`
<Fragment var.allowExecution="false">
<APICall
id="api"
url="/api/test"
when="allowExecution"
onSuccess="() => testState = 'success'"
onError="() => testState = 'error'"
/>
<Button testId="trigger" onClick="api.execute()" label="Execute" />
<Button testId="allow" onClick="allowExecution = true" label="Allow" />
</Fragment>
`,
{
apiInterceptor: basicApiInterceptor,
},
);
const executeButton = await createButtonDriver("trigger");
const allowButton = await createButtonDriver("allow");
// Try to execute when not allowed
await executeButton.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual(null);
// Allow execution and try again
await allowButton.click();
await executeButton.click();
await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
});
});
```
