This is page 106 of 186. Use http://codebase.md/xmlui-org/xmlui/%7BlogoUrl%7D?lines=true&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/build-system.md:
--------------------------------------------------------------------------------
```markdown
1 | # XMLUI Build System
2 |
3 | This document explains XMLUI's build system architecture, CLI tools, and build configurations for application deployment and extension development.
4 |
5 | > **Note:** For building the XMLUI framework package itself, see [Building the XMLUI Core Package](./build-xmlui.md).
6 |
7 | ## Table of Contents
8 |
9 | 1. [Overview](#overview)
10 | 2. [CLI Commands](#cli-commands)
11 | - [xmlui start](#xmlui-start)
12 | - [xmlui build](#xmlui-build)
13 | - [xmlui preview](#xmlui-preview)
14 | - [xmlui build-lib](#xmlui-build-lib)
15 | - [xmlui zip-dist](#xmlui-zip-dist)
16 | 3. [Build Modes](#build-modes)
17 | 4. [Vite Plugin System](#vite-plugin-system)
18 | 5. [Build Configurations](#build-configurations)
19 | 6. [Building XMLUI Extensions](#building-xmlui-extensions)
20 | 7. [Package Structure](#package-structure)
21 | 8. [Development Workflow](#development-workflow)
22 |
23 | ## Overview
24 |
25 | XMLUI uses a multi-mode build system built on **Vite** that supports:
26 |
27 | - **Development server** with hot module reloading for rapid app development
28 | - **Production builds** for XMLUI applications with optimized assets
29 | - **Extension builds** for creating reusable component libraries
30 | - **Metadata extraction** for documentation and language server support
31 |
32 | The build system is orchestrated through the `xmlui` CLI command, which provides a unified interface for all build operations.
33 |
34 | ## CLI Commands
35 |
36 | The XMLUI CLI is installed via the `bin/bootstrap.js` entry point and provides commands for development, building, and deployment.
37 |
38 | ### xmlui start
39 |
40 | Starts a Vite development server with hot module reloading for rapid application development.
41 |
42 | **Usage:**
43 |
44 | ```bash
45 | xmlui start [options]
46 | ```
47 |
48 | **Options:**
49 |
50 | - `--port <number>` - Server port (default: Vite's default port)
51 | - `--withMock [boolean]` - Enable MSW API mocking (default: true)
52 | - `--proxy <pattern->target>` - Proxy API requests (e.g., `/api->http://localhost:3000`)
53 |
54 | **Examples:**
55 |
56 | ```bash
57 | # Start dev server with default settings
58 | xmlui start
59 |
60 | # Start on port 3000 without mocking
61 | xmlui start --port 3000 --withMock=false
62 |
63 | # Start with API proxy
64 | xmlui start --proxy /api->http://localhost:8080
65 | ```
66 |
67 | **Behavior:**
68 |
69 | - Enables full build mode (`VITE_BUILD_MODE=ALL`) with all components included
70 | - Automatically enables MSW for API interception unless disabled
71 | - Provides instant feedback through HMR when source files change
72 | - Compiles `.xmlui` and `.xmlui.xs` files on-demand via vite-xmlui-plugin
73 |
74 | ### xmlui build
75 |
76 | Builds an XMLUI application for production deployment with optimized assets.
77 |
78 | **Usage:**
79 |
80 | ```bash
81 | xmlui build [options]
82 | ```
83 |
84 | **Options:**
85 |
86 | - `--buildMode <mode>` - Build mode: `CONFIG_ONLY`, `INLINE_ALL`, or `ALL` (default: `CONFIG_ONLY` in dev, auto in prod)
87 | - `--flatDist [boolean]` - Flatten dist directory structure for simple hosting (default: false in dev, true in prod)
88 | - `--withMock [boolean]` - Include MSW API mocking in build (default: true in dev, false in prod)
89 | - `--withHostingMetaFiles [boolean]` - Include hosting metadata files (serve.json, web.config) (default: false in dev, false in prod)
90 | - `--withRelativeRoot [boolean]` - Use relative paths for root references (default: false in dev, true in prod)
91 | - `--prod` - Shorthand for production-ready settings
92 |
93 | **Build Modes:**
94 |
95 | | Mode | Description | Use Case |
96 | | ------------- | ------------------------------------------------------- | ---------------------------------------- |
97 | | `CONFIG_ONLY` | Bundles only configuration; loads components at runtime | Development and dynamic apps |
98 | | `INLINE_ALL` | Bundles entire app including all components | Production with minimal runtime overhead |
99 | | `ALL` | Full build with both inline and runtime loading support | Maximum flexibility |
100 |
101 | **Examples:**
102 |
103 | ```bash
104 | # Development build
105 | xmlui build
106 |
107 | # Production build with defaults
108 | xmlui build --prod
109 |
110 | # Production build with specific settings
111 | xmlui build --buildMode=INLINE_ALL --flatDist --withHostingMetaFiles
112 |
113 | # Test deployment build with mocking
114 | xmlui build --buildMode=INLINE_ALL --withMock --withHostingMetaFiles
115 | ```
116 |
117 | **Output Structure:**
118 |
119 | _Standard (flatDist=false):_
120 |
121 | ```
122 | dist/
123 | ├── index.html
124 | ├── assets/
125 | │ ├── index-[hash].js
126 | │ └── index-[hash].css
127 | └── resources/
128 | └── (resource files)
129 | ```
130 |
131 | _Flattened (flatDist=true):_
132 |
133 | ```
134 | dist/
135 | ├── index.html
136 | ├── ui_assets_index-[hash].js
137 | ├── ui_assets_index-[hash].css
138 | ├── ui_resources_logo.png
139 | └── (all files at root with ui_ prefix)
140 | ```
141 |
142 | ### xmlui preview
143 |
144 | Serves a production build locally for testing before deployment.
145 |
146 | **Usage:**
147 |
148 | ```bash
149 | xmlui preview [options]
150 | ```
151 |
152 | **Options:**
153 |
154 | - `--proxy <pattern->target>` - Proxy API requests during preview
155 |
156 | **Example:**
157 |
158 | ```bash
159 | # Build and preview
160 | xmlui build --prod
161 | xmlui preview
162 |
163 | # Preview with API proxy
164 | xmlui preview --proxy /api->http://localhost:8080
165 | ```
166 |
167 | ### xmlui build-lib
168 |
169 | Builds the XMLUI framework itself as a distributable npm package. This command is used during XMLUI framework development, not for application builds.
170 |
171 | **Usage:**
172 |
173 | ```bash
174 | xmlui build-lib [options]
175 | ```
176 |
177 | **Options:**
178 |
179 | - `--watch [boolean]` - Watch mode for continuous rebuilds during development (default: false)
180 | - `--mode <mode>` - Build mode: `lib`, `standalone`, or `metadata`
181 |
182 | **Examples:**
183 |
184 | ```bash
185 | # Build library for npm distribution
186 | npm run build:xmlui
187 |
188 | # Build standalone bundle
189 | npm run build:xmlui-standalone
190 |
191 | # Build with watch mode during development
192 | xmlui build-lib --watch
193 | ```
194 |
195 | ### xmlui zip-dist
196 |
197 | Creates a ZIP archive of the dist directory for deployment.
198 |
199 | **Usage:**
200 |
201 | ```bash
202 | xmlui zip-dist [options]
203 | ```
204 |
205 | **Options:**
206 |
207 | - `--source <path>` - Source directory to zip (default: `dist`)
208 | - `--target <filename>` - Output ZIP filename (default: `ui.zip`)
209 |
210 | **Example:**
211 |
212 | ```bash
213 | xmlui build --prod
214 | xmlui zip-dist --target production.zip
215 | ```
216 |
217 | ## Build Modes
218 |
219 | XMLUI applications can be built in three distinct modes that control how components and configurations are bundled:
220 |
221 | ### CONFIG_ONLY Mode
222 |
223 | **Characteristics:**
224 |
225 | - Only configuration and entry point are bundled
226 | - Components loaded at runtime from source files
227 | - Smallest bundle size
228 | - Requires buildless component discovery at runtime
229 |
230 | **Use Cases:**
231 |
232 | - Development environments
233 | - Applications with frequently changing components
234 | - Scenarios where component hot-swapping is needed
235 |
236 | ### INLINE_ALL Mode
237 |
238 | **Characteristics:**
239 |
240 | - All components pre-compiled and bundled
241 | - No runtime parsing or component discovery
242 | - Fastest startup time
243 | - Larger initial bundle size
244 |
245 | **Use Cases:**
246 |
247 | - Production deployments
248 | - Performance-critical applications
249 | - Environments with restricted runtime file access
250 |
251 | ### ALL Mode
252 |
253 | **Characteristics:**
254 |
255 | - Hybrid approach with both bundled and runtime loading
256 | - Maximum flexibility
257 | - Balanced bundle size and performance
258 |
259 | **Use Cases:**
260 |
261 | - Complex applications with both static and dynamic components
262 | - Testing and staging environments
263 |
264 | ## Vite Plugin System
265 |
266 | The `vite-xmlui-plugin` transforms XMLUI source files during the build process.
267 |
268 | ### Plugin Responsibilities
269 |
270 | 1. **Transform .xmlui files** - Parses markup into component definitions
271 | 2. **Transform .xmlui.xs files** - Processes code-behind scripts
272 | 3. **Transform .xmlui.xm files** - Processes module scripts
273 | 4. **Error handling** - Converts parse errors into error components
274 | 5. **Code generation** - Produces ESM modules for Vite bundling
275 |
276 | ### Transformation Pipeline
277 |
278 | ```
279 | .xmlui file
280 | ↓
281 | xmlUiMarkupToComponent()
282 | ↓
283 | ComponentDef object
284 | ↓
285 | dataToEsm()
286 | ↓
287 | JavaScript module
288 | ```
289 |
290 | ```
291 | .xmlui.xs file
292 | ↓
293 | Parser.parseStatements()
294 | ↓
295 | collectCodeBehindFromSource()
296 | ↓
297 | Code-behind definition
298 | ↓
299 | dataToEsm()
300 | ↓
301 | JavaScript module
302 | ```
303 |
304 | ### Plugin Configuration
305 |
306 | The plugin is configured in `vite.config.ts`:
307 |
308 | ```typescript
309 | import ViteXmlui from "./bin/vite-xmlui-plugin";
310 |
311 | export default {
312 | plugins: [
313 | ViteXmlui({
314 | // Plugin options (currently none defined)
315 | }),
316 | ],
317 | };
318 | ```
319 |
320 | ## Build Configurations
321 |
322 | XMLUI uses Vite with mode-specific configurations for different build targets.
323 |
324 | ### Library Build (lib)
325 |
326 | **Purpose:** Build XMLUI framework for npm distribution
327 |
328 | **Entry Points:**
329 |
330 | - `xmlui` - Main framework export
331 | - `xmlui-parser` - Parser utilities
332 | - `language-server` - Node.js language server
333 | - `language-server-web-worker` - Browser-based language server
334 | - `syntax-monaco` - Monaco editor syntax support
335 | - `syntax-textmate` - TextMate grammar support
336 |
337 | **Output Format:** ES modules
338 |
339 | **Key Features:**
340 |
341 | - TypeScript declarations generated via `vite-plugin-dts`
342 | - CSS injection via `vite-plugin-lib-inject-css`
343 | - SCSS source files copied to `dist/lib/scss/`
344 | - React and SVG support
345 | - Rollup type bundling for optimized .d.ts files
346 |
347 | **NPM Package Exports:**
348 |
349 | ```json
350 | {
351 | ".": "./dist/lib/xmlui.js",
352 | "./parser": "./dist/lib/xmlui-parser.js",
353 | "./language-server": "./dist/lib/language-server.js",
354 | "./vite-xmlui-plugin": "./dist/scripts/bin/vite-xmlui-plugin.js",
355 | "./*.css": "./dist/lib/*.css",
356 | "./index.scss": "./dist/lib/scss/index.scss"
357 | }
358 | ```
359 |
360 | ### Standalone Build (standalone)
361 |
362 | **Purpose:** Build single-file XMLUI runtime for buildless deployments
363 |
364 | **Entry Point:** `src/index-standalone.ts`
365 |
366 | **Output Format:** UMD bundle (`xmlui-standalone.umd.js`)
367 |
368 | **Key Features:**
369 |
370 | - Self-contained runtime with all dependencies
371 | - MSW worker enabled for API mocking
372 | - Version stamping with build date
373 | - Can be loaded via `<script>` tag in browsers
374 | - Supports buildless app execution
375 |
376 | **Use Cases:**
377 |
378 | - CDN distribution
379 | - Buildless application deployment
380 | - Prototyping and demos
381 | - Environments without npm/build tools
382 |
383 | ### Metadata Build (metadata)
384 |
385 | **Purpose:** Extract component metadata for documentation and tooling
386 |
387 | **Entry Point:** `src/components/collectedComponentMetadata.ts`
388 |
389 | **Output:** `xmlui-metadata.js`
390 |
391 | **Use Cases:**
392 |
393 | - Generating documentation
394 | - Language server autocomplete
395 | - Component explorer tools
396 | - API reference generation
397 |
398 | **Workflow:**
399 |
400 | ```bash
401 | # Extract metadata
402 | npm run build:xmlui-metadata
403 |
404 | # Generate documentation from metadata
405 | npm run generate-docs
406 |
407 | # Create summary files
408 | npm run generate-docs-summaries
409 | ```
410 |
411 | ## Package Structure
412 |
413 | ### Source Layout
414 |
415 | ```
416 | src/
417 | ├── index.ts # Main framework entry
418 | ├── index-standalone.ts # Standalone runtime entry
419 | ├── components/ # Core components
420 | ├── parsers/ # .xmlui parser
421 | ├── language-server/ # LSP implementation
422 | ├── syntax/ # Editor syntax support
423 | └── styles/ # Framework SCSS
424 | ```
425 |
426 | ### Build Output (after npm publish)
427 |
428 | ```
429 | dist/
430 | ├── lib/ # Library build
431 | │ ├── xmlui.mjs
432 | │ ├── xmlui.d.ts
433 | │ ├── xmlui-parser.mjs
434 | │ ├── language-server.mjs
435 | │ └── scss/ # SCSS source files
436 | ├── standalone/ # Standalone build
437 | │ └── xmlui-standalone.umd.js
438 | ├── metadata/ # Metadata build
439 | │ └── xmlui-metadata.js
440 | └── scripts/
441 | └── bin/
442 | └── vite-xmlui-plugin.js
443 | ```
444 |
445 | ### Bin Scripts
446 |
447 | ```
448 | bin/
449 | ├── bootstrap.js # CLI entry (ts-node setup)
450 | ├── index.ts # Command router
451 | ├── build.ts # Build implementation
452 | ├── build-lib.ts # Library build
453 | ├── start.ts # Dev server
454 | ├── preview.ts # Preview server
455 | ├── vite-xmlui-plugin.ts # Vite plugin
456 | └── viteConfig.ts # Shared Vite config
457 | ```
458 |
459 | ## Building XMLUI Extensions
460 |
461 | XMLUI extensions are npm packages that provide reusable component libraries. The build system supports extension development through the same CLI commands used for framework and application builds.
462 |
463 | ### Extension Build Commands
464 |
465 | Extensions use standard npm scripts that invoke the `xmlui` CLI:
466 |
467 | **package.json example:**
468 |
469 | ```json
470 | {
471 | "scripts": {
472 | "start": "xmlui start",
473 | "build:extension": "xmlui build-lib",
474 | "build-watch": "xmlui build-lib --watch",
475 | "build:demo": "xmlui build",
476 | "build:meta": "xmlui build-lib --mode=metadata"
477 | }
478 | }
479 | ```
480 |
481 | **Command Reference:**
482 |
483 | | Command | CLI Equivalent | Purpose | Output |
484 | | ------------------------- | --------------------------------- | -------------------------- | ----------------------------- |
485 | | `npm start` | `xmlui start` | Dev server for demo app | Dev server with HMR |
486 | | `npm run build:extension` | `xmlui build-lib` | Build extension library | `dist/` with .js, .d.ts, .css |
487 | | `npm run build-watch` | `xmlui build-lib --watch` | Watch mode for development | Continuous rebuilds |
488 | | `npm run build:demo` | `xmlui build` | Build demo application | Production demo build |
489 | | `npm run build:meta` | `xmlui build-lib --mode=metadata` | Extract component metadata | Metadata for docs/LSP |
490 |
491 | ### Extension Build Workflow
492 |
493 | **Development Process:**
494 |
495 | ```bash
496 | # Terminal 1: Watch extension builds
497 | npm run build-watch
498 |
499 | # Terminal 2: Run demo app with HMR
500 | npm start
501 | ```
502 |
503 | **Build Output:**
504 |
505 | ```
506 | dist/
507 | ├── xmlui-extension-name.js # CommonJS bundle
508 | ├── xmlui-extension-name.mjs # ES module bundle
509 | ├── xmlui-extension-name.d.ts # TypeScript declarations
510 | └── *.css # Extracted component styles
511 | ```
512 |
513 | ### Extension Distribution
514 |
515 | **Publishing to npm:**
516 |
517 | ```bash
518 | # Build all artifacts
519 | npm run build:extension
520 | npm run build:meta
521 |
522 | # Publish
523 | npm publish
524 | ```
525 |
526 | **Package Configuration:**
527 |
528 | ```json
529 | {
530 | "name": "xmlui-myextension",
531 | "main": "./dist/xmlui-myextension.js",
532 | "module": "./dist/xmlui-myextension.mjs",
533 | "exports": {
534 | ".": {
535 | "import": "./dist/xmlui-myextension.mjs",
536 | "require": "./dist/xmlui-myextension.js"
537 | },
538 | "./*.css": {
539 | "import": "./dist/*.css",
540 | "require": "./dist/*.css"
541 | }
542 | },
543 | "files": ["dist"]
544 | }
545 | ```
546 |
547 | ### Using Extensions
548 |
549 | **Installation:**
550 |
551 | ```bash
552 | npm install xmlui-myextension
553 | ```
554 |
555 | **Integration:**
556 |
557 | ```typescript
558 | import { startApp } from "xmlui";
559 | import myExtension from "xmlui-myextension";
560 | import "xmlui-myextension/ComponentName.css";
561 |
562 | const runtime = import.meta.glob(`/demo/**`, { eager: true });
563 | startApp(runtime, [myExtension]);
564 | ```
565 |
566 | ### Example: xmlui-website-blocks
567 |
568 | **Reference implementation in the monorepo:**
569 |
570 | ```
571 | packages/xmlui-website-blocks/
572 | ├── package.json # Extension package config
573 | ├── index.ts # Entry point with startApp
574 | ├── src/ # Extension components
575 | │ └── index.tsx # Component registry export
576 | ├── demo/ # Demo XMLUI application
577 | │ └── Main.xmlui
578 | └── dist/ # Build output
579 | ```
580 |
581 | **Build commands:**
582 |
583 | ```bash
584 | cd packages/xmlui-website-blocks
585 |
586 | # Development
587 | npm start # Demo app at http://localhost:5173
588 |
589 | # Building
590 | npm run build:extension # Library build
591 | npm run build:demo # Demo app build
592 | npm run build:meta # Metadata extraction
593 | ```
594 |
595 | ## Development Workflow
596 |
597 | ### Framework Development
598 |
599 | **Setup:**
600 |
601 | ```bash
602 | cd xmlui
603 | npm install
604 | ```
605 |
606 | **Development Loop:**
607 |
608 | ```bash
609 | # Terminal 1: Watch mode for library
610 | npm run build:bin
611 | xmlui build-lib --watch
612 |
613 | # Terminal 2: Dev server for test app
614 | cd src/testing/infrastructure
615 | xmlui start
616 | ```
617 |
618 | **Testing:**
619 |
620 | ```bash
621 | # Unit tests
622 | npm run test:unit
623 |
624 | # E2E tests
625 | npm run test:e2e-smoke
626 | npm run test:e2e-non-smoke
627 |
628 | # Interactive E2E
629 | npm run test:e2e-ui
630 | ```
631 |
632 | **Publishing:**
633 |
634 | ```bash
635 | # Build all artifacts
636 | npm run build:xmlui
637 | npm run build:xmlui-standalone
638 | npm run build:xmlui-metadata
639 |
640 | # Publish to npm (uses clean-package to transform package.json)
641 | npm publish
642 | ```
643 |
644 | ### Application Development
645 |
646 | **Create New App:**
647 |
648 | ```bash
649 | # Create app directory
650 | mkdir my-xmlui-app
651 | cd my-xmlui-app
652 |
653 | # Initialize with Main.xmlui
654 | echo '<App><Text>Hello XMLUI</Text></App>' > Main.xmlui
655 |
656 | # Create index.html
657 | cat > index.html << 'EOF'
658 | <!DOCTYPE html>
659 | <html>
660 | <head>
661 | <title>My XMLUI App</title>
662 | </head>
663 | <body>
664 | <div id="root"></div>
665 | <script src="https://unpkg.com/xmlui@latest/dist/standalone/xmlui-standalone.umd.js"></script>
666 | </body>
667 | </html>
668 | EOF
669 |
670 | # Serve with any static server
671 | npx serve
672 | ```
673 |
674 | **Built App Development:**
675 |
676 | ```bash
677 | # Install xmlui
678 | npm install xmlui
679 |
680 | # Add vite config
681 | cat > vite.config.ts << 'EOF'
682 | import { defineConfig } from 'vite';
683 | import react from '@vitejs/plugin-react';
684 | import ViteXmlui from 'xmlui/vite-xmlui-plugin';
685 |
686 | export default defineConfig({
687 | plugins: [react(), ViteXmlui()]
688 | });
689 | EOF
690 |
691 | # Start dev server
692 | xmlui start
693 |
694 | # Build for production
695 | xmlui build --prod
696 | ```
697 |
698 | **Key Scripts:**
699 |
700 | ```bash
701 | # Development
702 | xmlui start # Dev server with HMR
703 | xmlui start --withMock=false # Without API mocking
704 | xmlui start --proxy /api->... # With backend proxy
705 |
706 | # Production builds
707 | xmlui build --prod # Optimized build
708 | xmlui build --buildMode=INLINE_ALL --flatDist
709 |
710 | # Deployment
711 | xmlui build --prod --withHostingMetaFiles
712 | xmlui zip-dist
713 | ```
714 |
715 | ### Quick Reference Table
716 |
717 | This table summarizes when to run builds across different contexts:
718 |
719 | | Context | Scenario | npm Script | Underlying CLI | When to Run | Comments |
720 | | -------------- | ------------------------- | -------------------------------- | ----------------------------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
721 | | **docs/** | Editing `.md` files | `npm start` | `xmlui start` | No build - just refresh browser | Markdown files are served directly; dev server provides hot reload for instant feedback |
722 | | **docs/** | Building docs site | `npm run build:docs` | `xmlui build --buildMode=INLINE_ALL --withMock` | Before deployment | Creates optimized production build with INLINE_ALL mode, downloads latest XMLUI release, generates RSS feed |
723 | | **docs/** | Preview production build | `npm run preview` | `xmlui preview` | After building | Serves production build locally for testing before deployment |
724 | | **xmlui/** | Testing component changes | `npm start-test-bed` | `cd src/testing/infrastructure && xmlui start` | Automatic HMR | Runs dev server in `src/testing/infrastructure`; component changes appear instantly via HMR |
725 | | **xmlui/** | Building framework | `npm run build:xmlui` | `vite build --mode lib` | Before npm publish | Builds library for npm distribution using Vite directly (not xmlui CLI); generates .mjs, .d.ts, and CSS |
726 | | **xmlui/** | Building standalone | `npm run build:xmlui-standalone` | `vite build --mode standalone` | For CDN/buildless | Creates self-contained UMD bundle for `<script>` tag usage; framework builds itself with Vite directly |
727 | | **xmlui/** | Generating metadata | `npm run build:xmlui-metadata` | `vite build --mode metadata` | After component changes, before doc generation | Extracts component metadata into `xmlui-metadata.js` for documentation generation and language server autocomplete. This is the source of truth for component APIs, props, and descriptions. Framework uses Vite directly. |
728 | | **xmlui/** | Full doc generation | `npm run generate-all-docs` | Node scripts (not CLI) | After metadata changes | Runs three scripts: (1) `build:xmlui-metadata` - extracts metadata, (2) `generate-docs` - creates component .md files from metadata, (3) `generate-docs-summaries` - creates overview/summary files. This is the complete pipeline from source code → documentation |
729 | | **xmlui/** | Compile bin scripts | `npm run build:bin` | `tsc -p tsconfig.bin.json` | After changes to bin/\*.ts files | Compiles TypeScript bin scripts (CLI tools) to JavaScript using TypeScript directly; needed when modifying build system or CLI commands |
730 | | **extension/** | Development | `npm start` | `xmlui start` | Keep running during dev | Runs dev server with HMR for demo app; use with build-watch in separate terminal |
731 | | **extension/** | Watch mode build | `npm run build-watch` | `xmlui build-lib --watch` | Keep running during dev | Continuously rebuilds extension library on changes; pair with `npm start` for rapid iteration |
732 | | **extension/** | Building for publish | `npm run build:extension` | `xmlui build-lib` | Before npm publish | Creates distributable library bundle (.mjs, .js, .d.ts, CSS) for npm package |
733 | | **extension/** | Build demo app | `npm run build:demo` | `xmlui build` | For demo deployment | Builds the demo application (not the extension itself) for hosting |
734 | | **extension/** | Extract metadata | `npm run build:meta` | `xmlui build-lib --mode=metadata` | For LSP/docs support | Extracts extension component metadata for language server and documentation |
735 |
736 | **Key principles:**
737 |
738 | - **Development mode uses HMR** - No manual builds needed when running `xmlui start`
739 | - **Production requires explicit builds** - Use `xmlui build` or `npm run build:*` scripts
740 | - **Framework builds itself differently** - XMLUI uses Vite directly (`vite build --mode lib`) instead of the `xmlui` CLI
741 | - **Extensions use the CLI** - Extension developers use `xmlui build-lib` and `xmlui start`
742 | - **npm scripts wrap CLI commands** - Convenience shortcuts with project-specific flags
743 |
744 | ### Build Optimization Tips
745 |
746 | 1. **Development:** Use `xmlui start` for instant feedback
747 | 2. **Testing:** Use `CONFIG_ONLY` mode for faster rebuilds
748 | 3. **Production:** Use `INLINE_ALL` with `--flatDist` for optimal performance
749 | 4. **Debugging:** Enable `--withMock` to test without backend
750 | 5. **Large Apps:** Consider lazy loading with `ALL` mode
751 |
752 | ### Environment Variables
753 |
754 | Build behavior can be controlled via environment variables:
755 |
756 | ```bash
757 | # .env file
758 | NODE_ENV=production
759 | VITE_BUILD_MODE=INLINE_ALL
760 | VITE_MOCK_ENABLED=false
761 | VITE_STANDALONE=true
762 | ```
763 |
764 | **Key Variables:**
765 |
766 | - `VITE_BUILD_MODE` - Component bundling strategy
767 | - `VITE_MOCK_ENABLED` - Enable/disable MSW
768 | - `VITE_STANDALONE` - Standalone runtime mode
769 | - `VITE_INCLUDE_ALL_COMPONENTS` - Bundle all components
770 | - `VITE_XMLUI_VERSION` - Version string for metadata
771 |
772 | ---
773 |
774 | ## See Also
775 |
776 | - [Building the XMLUI Core Package](./build-xmlui.md) - Framework package build with Vite
777 | - [Standalone Rendering Architecture](./standalone-app.md) - How built vs buildless apps work
778 | - [Container-Based State Management](./containers.md) - Runtime state system
779 | - [React Fundamentals](./react-fundamentals.md) - React integration details
780 |
```
--------------------------------------------------------------------------------
/docs/public/pages/build-hello-world-component.md:
--------------------------------------------------------------------------------
```markdown
1 | # Build a Hello World component
2 |
3 | In this tutorial we'll build a HelloWorld component that demonstrates the core patterns for XMLUI component development.
4 |
5 | The XMLUI framework supports two types of components:
6 |
7 | **Core components** are built into the main XMLUI library and available by default. Components like Button, Text, Card, and Stack are always available in any XMLUI app.
8 |
9 | **Extension packages** are standalone components that can be optionally included. They are built, distributed, and imported separately, making them perfect for custom components that aren't needed by every XMLUI application.
10 |
11 | We'll build an extension package so the HelloWorld component can:
12 |
13 | - Live separately from the core XMLUI library
14 | - Be optionally included in standalone apps
15 | - Be distributed and reused across different projects
16 |
17 | Extensions are the recommended approach for custom components. By the end of this guide, you'll have created a HelloWorld component that:
18 |
19 | - Displays a customizable greeting message
20 | - Features an interactive click counter
21 | - Uses XMLUI's standard theming system
22 | - Defines event handlers
23 | - Provides callable methods
24 |
25 | ## XMLUI component architecture
26 |
27 | XMLUI components are made of three main parts:
28 |
29 | 1. Native React component (`HelloWorldNative.tsx`) - The actual React implementation
30 | 2. Component metadata (`HelloWorld.tsx`) - Describes props and integrates with XMLUI
31 | 3. For visual components, a .scss file (`HelloWorld.module.scss`)
32 |
33 | This separation allows XMLUI to understand your component's interface while maintaining clean React code.
34 |
35 | ## Prerequisites
36 |
37 | - Familiarity with React and TypeScript
38 | - Basic understanding of XMLUI markup
39 | - Node.js 18.0.0 or higher
40 | - npm (comes with Node.js)
41 |
42 | ## Step 1: Create your project directory
43 |
44 | Let's start by creating a new directory for your HelloWorld component project.
45 |
46 | **Windows**
47 |
48 | ```xmlui copy
49 | mkdir xmlui-hello-world
50 | cd xmlui-hello-world
51 | ```
52 |
53 | **Mac / WSL / Linux**
54 |
55 | ```xmlui copy
56 | mkdir xmlui-hello-world
57 | cd xmlui-hello-world
58 | ```
59 |
60 | This creates a fresh project directory where you'll build your component from scratch.
61 |
62 | > [!INFO]
63 | > This page includes playground examples that use the HelloWorld component. They are available here because this site loads the final extension package that you will build. That means the live playground examples here reflect the final state, not the interim states described as we go along. But in the standalone app that you'll create you will see the progression exactly as described here.
64 |
65 | ## Step 2: Create the package configuration
66 |
67 | First, let's initialize a new npm project and install the xmlui package:
68 |
69 | ```xmlui copy
70 | npm init -y
71 | npm install --save-dev xmlui
72 | ```
73 |
74 | This creates a basic `package.json` and installs the xmlui package as a development dependency.
75 |
76 | Now let's update the `package.json` with the proper configuration for our extension:
77 |
78 | ```xmlui copy
79 | {
80 | "name": "xmlui-hello-world",
81 | "version": "0.1.0",
82 | "type": "module",
83 | "scripts": {
84 | "build:extension": "xmlui build-lib"
85 | },
86 | "devDependencies": {
87 | "xmlui": "*"
88 | },
89 | "main": "./dist/xmlui-hello-world.js",
90 | "module": "./dist/xmlui-hello-world.mjs",
91 | "exports": {
92 | ".": {
93 | "import": "./dist/xmlui-hello-world.mjs",
94 | "require": "./dist/xmlui-hello-world.js"
95 | }
96 | },
97 | "files": [
98 | "dist"
99 | ]
100 | }
101 | ```
102 |
103 | The build system will generate both:
104 |
105 | - xmlui-hello-world.js (CommonJS/UMD for browser script tags)
106 | - xmlui-hello-world.mjs (ES modules for import statements)
107 |
108 | `xmlui-hello-world.js` is the file you'll pull into a standalone XMLUI app using a `<script>` tag.
109 |
110 | ## Step 3: Create the React component
111 |
112 | First, let's create the `src` directory for our component files:
113 |
114 | ```xmlui copy
115 | mkdir src
116 | ```
117 |
118 | Create `src/HelloWorldNative.tsx` with the core React implementation.
119 |
120 | ```xmlui copy
121 | import React, { useState } from "react";
122 | import styles from "./HelloWorld.module.scss";
123 |
124 | type Props = {
125 | id?: string;
126 | message?: string;
127 | };
128 |
129 | export const defaultProps = {
130 | message: "Hello, World!",
131 | };
132 |
133 | export function HelloWorld({
134 | id,
135 | message = defaultProps.message,
136 | }: Props) {
137 | const [clickCount, setClickCount] = useState(0);
138 |
139 | const handleClick = () => {
140 | setClickCount(clickCount + 1);
141 | };
142 |
143 | return (
144 | <div className={styles.container} id={id}>
145 | <h2 className={styles.message}>{message}</h2>
146 | <button className={styles.button} onClick={handleClick}>
147 | Click me!
148 | </button>
149 | <div className={styles.counter}>Clicks: {clickCount}</div>
150 | </div>
151 | );
152 | }
153 | ```
154 |
155 | This creates the core React component with:
156 |
157 | - Essential props (id, message)
158 | - Internal click counter
159 |
160 | ## Step 4: Create basic styles
161 |
162 | ```xmlui copy
163 | .container {
164 | background-color: #f5f5f5;
165 | color: #333;
166 | padding: 1rem;
167 | border-radius: 8px;
168 | text-align: center;
169 | display: inline-block;
170 | min-width: 200px;
171 | }
172 |
173 | .message {
174 | margin: 0 0 1rem 0;
175 | font-size: 1.5rem;
176 | }
177 |
178 | .button {
179 | background-color: #4a90e2;
180 | color: white;
181 | border: none;
182 | padding: 0.75rem 1.5rem;
183 | border-radius: 4px;
184 | cursor: pointer;
185 | font-size: 1rem;
186 | margin-bottom: 1rem;
187 |
188 | &:hover {
189 | opacity: 0.9;
190 | }
191 | }
192 |
193 | .counter {
194 | font-size: 1.2rem;
195 | font-weight: bold;
196 | }
197 | ```
198 |
199 | This SCSS module defines the basic visual styling for our HelloWorld component:
200 |
201 | - `.container` - Main wrapper with background, padding, and layout
202 | - `.message` - Styling for the greeting text
203 | - `.button` - Interactive button with hover effects
204 | - `.counter` - Display for the click count
205 |
206 | At this stage, we use hardcoded colors. In Step 9, we'll replace these theme variables.
207 |
208 | ## Step 5: Create component metadata and renderer
209 |
210 | Create `HelloWorld.tsx`.
211 |
212 | ```xmlui copy
213 | import styles from "./HelloWorld.module.scss";
214 | import { createComponentRenderer, createMetadata } from "xmlui";
215 | import { HelloWorld, defaultProps } from "./HelloWorldNative";
216 |
217 | const HelloWorldMd = createMetadata({
218 | description: "`HelloWorld` is a demonstration component.",
219 | status: "experimental",
220 | props: {
221 | message: {
222 | description: "The message to display.",
223 | isRequired: false,
224 | type: "string",
225 | defaultValue: defaultProps.message,
226 | },
227 | },
228 | });
229 |
230 | export const helloWorldComponentRenderer = createComponentRenderer(
231 | "HelloWorld",
232 | HelloWorldMd,
233 | ({ node, extractValue }) => {
234 | return (
235 | <HelloWorld
236 | id={extractValue.asOptionalString(node.props?.id)}
237 | message={extractValue.asOptionalString(node.props?.message)}
238 | />
239 | );
240 | }
241 | );
242 | ```
243 |
244 | **What we're creating**
245 |
246 | This file bridges the gap between XMLUI markup and React components.
247 |
248 | - Metadata (`HelloWorldMd`) - Documents the component's props, behavior, and usage
249 | - Renderer (`helloWorldComponentRenderer`) - Converts XMLUI markup to React component calls
250 |
251 | **The renderer pattern**
252 |
253 | The renderer function receives XMLUI context (node, extractValue, etc.) and returns a React component.
254 |
255 | It:
256 |
257 | - Extracts prop values from XMLUI markup using `extractValue.asOptionalString()`
258 | - Passes them to the native React component
259 | - Handles optional props gracefully (undefined becomes default values)
260 |
261 | This pattern enables XMLUI to:
262 |
263 | - Validate markup against metadata
264 | - Provide IntelliSense and documentation
265 | - Handle prop type conversion automatically
266 | - Support XMLUI-specific features like theming (step 9) and event handling (Step 10)
267 |
268 | ## Step 6: Create the extension index
269 |
270 | Create `src/index.tsx` which exports your component as an extension.
271 |
272 | ```xmlui copy
273 | cat > src/index.tsx << 'EOF'
274 | import { helloWorldComponentRenderer } from "./HelloWorld";
275 |
276 | export default {
277 | namespace: "XMLUIExtensions",
278 | components: [helloWorldComponentRenderer],
279 | };
280 | EOF
281 | ```
282 |
283 | This creates the main entry point that exports your HelloWorld component under the XMLUIExtensions namespace.
284 |
285 | ## Step 7: Build the extension
286 |
287 | ```xmlui copy
288 | npm run build:extension
289 | ```
290 |
291 | This creates `xmlui-hello-world.js` in the `dist` folder.
292 |
293 | ```xmlui-pg noHeader
294 | ---app
295 | <TreeDisplay content="
296 | packages/xmlui-hello-world
297 | package.json
298 | src
299 | index.tsx
300 | HelloWorld.tsx
301 | HelloWorldNative.tsx
302 | HelloWorld.module.scss
303 | dist
304 | xmlui-hello-world.js
305 | " />
306 | ```
307 |
308 | ## Step 8: Test the extension
309 |
310 | Since we've integrated it into the docs site, you can see it live right here.
311 |
312 | ```xmlui-pg
313 | ---app display
314 | <App>
315 | <VStack gap="2rem" padding="2rem">
316 | <H1>HelloWorld Component Live Demo</H1>
317 |
318 | <Card>
319 | <HelloWorld message="Hello from the docs site!" />
320 | </Card>
321 |
322 | </VStack>
323 |
324 | <script>
325 | // Event handlers for the HelloWorld component
326 | window.addEventListener('helloWorldClick', (event) => {
327 | console.log('HelloWorld clicked!', event.detail);
328 | });
329 | </script>
330 | </App>
331 | ```
332 |
333 | But you will want to see it in a standalone app. Let's create a simple test app to verify our component works.
334 |
335 | First, create a test directory and an `xmlui` subdirectory within it:
336 |
337 | ```xmlui copy
338 | mkdir test-app
339 | cd test-app
340 | mkdir xmlui
341 | ```
342 |
343 | Now, copy your built component into the `xmlui` subdirectory:
344 |
345 | ```xmlui copy
346 | cp ../dist/xmlui-hello-world.js xmlui/xmlui-hello-world.js
347 | ```
348 |
349 | Create the `Main.xmlui` file with your component's markup:
350 |
351 | ```xmlui copy
352 | <App>
353 | <VStack gap="2rem" padding="2rem">
354 | <Heading>HelloWorld Component Test</Heading>
355 | <HelloWorld message="Hello from standalone app!" />
356 | </VStack>
357 |
358 | <script>
359 | // Event handlers for the HelloWorld component
360 | window.addEventListener('helloWorldClick', (event) => {
361 | console.log('HelloWorld clicked!', event.detail);
362 | });
363 | </script>
364 | </App>
365 | ```
366 |
367 | Finally, create a simple `index.html` file to load the XMLUI engine from CDN and your component:
368 |
369 | ```xmlui copy
370 | <!DOCTYPE html>
371 | <html lang="en">
372 | <head>
373 | <meta charset="UTF-8" />
374 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
375 | <title>HelloWorld Extension Test</title>
376 | <script src="https://unpkg.com/xmlui@latest/dist/standalone/xmlui-standalone.umd.js"></script>
377 | <script src="xmlui/xmlui-hello-world.js"></script>
378 | </head>
379 | <body>
380 | </body>
381 | </html>
382 | ```
383 |
384 | This creates a simple test app that loads your component.
385 |
386 | To run the app with Python:
387 |
388 | ```xmlui copy
389 | python -m http.server # visit 8000
390 | ```
391 |
392 | With Node.js:
393 |
394 | ```xmlui copy
395 | npx server # visit 3000
396 | ```
397 |
398 | ## Step 9: Add theming support
399 |
400 | So far, our HelloWorld component uses hardcoded colors. Let's integrate it with XMLUI's theming system to make it more flexible and consistent with the rest of the UI.
401 |
402 | **Understanding XMLUI's theme system**
403 |
404 | XMLUI provides a sophisticated theming system that:
405 |
406 | - Uses semantic design tokens (like `$color-surface-50`, `$color-content-primary`)
407 | - Automatically supports light and dark modes
408 | - Maintains consistency across all components
409 | - Allows runtime customization via the `<Theme>` component
410 |
411 | **Adding theme variables**
412 |
413 | Let's update our SCSS to use XMLUI's theme system:
414 |
415 | ```xmlui copy
416 | @use "xmlui/themes.scss" as t;
417 |
418 | $themeVars: ();
419 | @function createThemeVar($componentVariable) {
420 | $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
421 | @return t.getThemeVar($themeVars, $componentVariable);
422 | }
423 |
424 | $component: "HelloWorld";
425 |
426 | // Define theme variables for our component
427 | $backgroundColor: createThemeVar("backgroundColor-#{$component}");
428 | $textColor: createThemeVar("textColor-#{$component}");
429 |
430 | .container {
431 | background-color: $backgroundColor;
432 | color: $textColor;
433 | padding: 1rem;
434 | border-radius: 8px;
435 | text-align: center;
436 | display: inline-block;
437 | min-width: 200px;
438 | }
439 |
440 | .message {
441 | margin: 0 0 1rem 0;
442 | font-size: 1.5rem;
443 | }
444 |
445 | .button {
446 | background-color: #4a90e2;
447 | color: white;
448 | border: none;
449 | padding: 0.75rem 1.5rem;
450 | border-radius: 4px;
451 | cursor: pointer;
452 | font-size: 1rem;
453 | margin-bottom: 1rem;
454 |
455 | &:hover {
456 | opacity: 0.9;
457 | }
458 | }
459 |
460 | .counter {
461 | font-size: 1.2rem;
462 | font-weight: bold;
463 | }
464 |
465 | :export {
466 | themeVars: t.json-stringify($themeVars);
467 | }
468 | ```
469 |
470 | **What changed**
471 |
472 | Instead of hardcoded colors like `#f5f5f5` and `#333`, we now use:
473 |
474 | - `$backgroundColor` - Uses XMLUI's surface color tokens
475 | - `$textColor` - Uses XMLUI's content color tokens
476 |
477 | The `createThemeVar()` function registers these variables with XMLUI, making them available for customization via the `<Theme>` component and automatic light/dark mode adaptation.
478 |
479 | The `:export { themeVars: t.json-stringify($themeVars); }` exports the theme variables so XMLUI can read them.
480 |
481 | **Update component metadata**
482 |
483 | We also need to tell XMLUI about our theme variables. Update the metadata in `HelloWorld.tsx`:
484 |
485 | ```xmlui copy
486 | import styles from "./HelloWorld.module.scss";
487 | import { createComponentRenderer, parseScssVar, createMetadata } from "xmlui";
488 | import { HelloWorld, defaultProps } from "./HelloWorldNative";
489 |
490 | const HelloWorldMd = createMetadata({
491 | description: "`HelloWorld` is a demonstration component.",
492 | status: "experimental",
493 | props: {
494 | message: {
495 | description: "The message to display.",
496 | isRequired: false,
497 | type: "string",
498 | defaultValue: defaultProps.message,
499 | },
500 | },
501 | themeVars: parseScssVar(styles.themeVars),
502 | defaultThemeVars: {
503 | [`backgroundColor-HelloWorld`]: "$color-surface-50",
504 | [`textColor-HelloWorld`]: "$color-content-primary",
505 | dark: {
506 | [`backgroundColor-HelloWorld`]: "$color-surface-800",
507 | // No textColor override needed - $color-content-primary should auto-adapt
508 | },
509 | },
510 | });
511 |
512 | export const helloWorldComponentRenderer = createComponentRenderer(
513 | "HelloWorld",
514 | HelloWorldMd,
515 | ({ node, extractValue }) => {
516 | return (
517 | <HelloWorld
518 | id={extractValue.asOptionalString(node.props?.id)}
519 | message={extractValue.asOptionalString(node.props?.message)}
520 | />
521 | );
522 | }
523 | );
524 | ```
525 |
526 | **Rebuild and test**
527 |
528 | ```xmlui copy
529 | npm run build:extension
530 | ```
531 |
532 | Now your component uses XMLUI's theme system! It will automatically adapt to light/dark modes and can be customized using the `<Theme>` component.
533 |
534 | **Test the themed component**
535 |
536 | Copy the new `xmlui-hello-world.js` into your standalone app's `xmlui` folder, and update its `Main.xmlui`.
537 |
538 | ```xmlui-pg
539 | ---app display copy
540 | <App>
541 | <VStack gap="2rem" padding="2rem">
542 | <H1>HelloWorld with Theme Variables</H1>
543 |
544 | <HelloWorld message="Default styling" />
545 |
546 | <Card>
547 | <H2>Custom Colors</H2>
548 | <Theme
549 | backgroundColor-HelloWorld="$color-warn-300"
550 | textColor-HelloWorld="$textColor-primary"
551 | >
552 | <HelloWorld message="Custom colors!" />
553 | </Theme>
554 | </Card>
555 |
556 | <ToneSwitch />
557 | </VStack>
558 | </App>
559 | ```
560 |
561 | Notice how the component now uses theme variables instead of hardcoded colors. The `<Theme>` component allows you to override any theme variable at runtime, making your components incredibly flexible for different contexts and user preferences.
562 |
563 | ## Step 10: Add event handling
564 |
565 | The HelloWorld component has a click handler that increments a counter, and a reset that sets the count to zero. Let's add event definitions to signal parent components when these events happen.
566 |
567 | **Add event definitions**
568 |
569 | Update the component metadata in `src/HelloWorld.tsx`:
570 |
571 | ```xmlui copy
572 | import styles from "./HelloWorld.module.scss";
573 | import { createComponentRenderer, parseScssVar, createMetadata } from "xmlui";
574 | import { HelloWorld, defaultProps } from "./HelloWorldNative";
575 |
576 | const HelloWorldMd = createMetadata({
577 | description: "`HelloWorld` is a demonstration component.",
578 | status: "experimental",
579 | props: {
580 | message: {
581 | description: "The message to display.",
582 | isRequired: false,
583 | type: "string",
584 | defaultValue: defaultProps.message,
585 | },
586 | },
587 | events: {
588 | onClick: {
589 | description:
590 | "Triggered when the click button is pressed. " + "Receives the current click count.",
591 | type: "function",
592 | },
593 | onReset: {
594 | description:
595 | "Triggered when the reset button is pressed. " + "Called when count is reset to 0.",
596 | type: "function",
597 | },
598 | },
599 | themeVars: parseScssVar(styles.themeVars),
600 | defaultThemeVars: {
601 | [`backgroundColor-HelloWorld`]: "$color-surface-50",
602 | [`textColor-HelloWorld`]: "$color-content-primary",
603 | dark: {
604 | [`backgroundColor-HelloWorld`]: "$color-surface-800",
605 | // No textColor override needed - $color-content-primary should auto-adapt
606 | },
607 | },
608 | });
609 |
610 | export const helloWorldComponentRenderer = createComponentRenderer(
611 | "HelloWorld",
612 | HelloWorldMd,
613 |
614 | ({ node, extractValue, lookupEventHandler, className }) => {
615 | return (
616 | <HelloWorld
617 | id={extractValue.asOptionalString(node.props?.id)}
618 | message={extractValue.asOptionalString(node.props?.message)}
619 | onClick={lookupEventHandler("onClick")}
620 | onReset={lookupEventHandler("onReset")}
621 | className={className}
622 | />
623 | );
624 | },
625 | );
626 | ```
627 |
628 | **New props**
629 |
630 | - `onClick?: (event: React.MouseEvent) => void` - Called when the click button is pressed
631 | - `onReset?: (event: React.MouseEvent) => void` - Called when the reset button is pressed
632 |
633 | **Event handler changes:**
634 |
635 | - `handleClick` now calls `onClick?.(event)` after updating internal state
636 | - `handleReset` now calls `onReset?.(event)` after resetting the counter
637 | - Both pass the DOM event object (not custom data) to match XMLUI's event system
638 |
639 | **Update the native component**
640 |
641 | Update `src/HelloWorldNative.tsx` to accept and call the event handler.
642 |
643 | ```xmlui copy
644 | import React, { useState } from "react";
645 | import styles from "./HelloWorld.module.scss";
646 |
647 | type Props = {
648 | id?: string;
649 | message?: string;
650 | className?: string;
651 | onClick?: (event: React.MouseEvent) => void;
652 | onReset?: (event: React.MouseEvent) => void;
653 | };
654 |
655 | export const defaultProps = {
656 | message: "Hello, World!",
657 | };
658 |
659 | export const HelloWorld = React.forwardRef<HTMLDivElement, Props>(
660 | function HelloWorld(
661 | {
662 | id,
663 | message = defaultProps.message,
664 | className,
665 | onClick,
666 | onReset
667 | },
668 | ref
669 | ) {
670 | const [clickCount, setClickCount] = useState(0);
671 |
672 | const handleClick = (event: React.MouseEvent) => {
673 | const newCount = clickCount + 1;
674 | setClickCount(newCount);
675 | onClick?.(event);
676 | };
677 |
678 | const handleReset = (event: React.MouseEvent) => {
679 | setClickCount(0);
680 | onReset?.(event);
681 | };
682 |
683 | return (
684 | <div className={`${styles.container} ${className || ''}`} id={id}>
685 | <h2 className={styles.message}>{message}</h2>
686 | <button
687 | className={styles.button}
688 | onClick={handleClick}
689 | >
690 | Click me!
691 | </button>
692 | <div className={styles.counter}>
693 | Clicks: <span className={styles.count}>{clickCount}</span>
694 | </div>
695 |
696 | {clickCount > 0 && (
697 | <button
698 | className={styles.button}
699 | onClick={handleReset}
700 | >
701 | Reset
702 | </button>
703 | )}
704 | </div>
705 | );
706 | }
707 | );
708 | ```
709 |
710 | **Metadata changes:**
711 |
712 | - Added `events` section defining `onClick` and `onReset` event handlers
713 | - Each event includes description and type information for documentation
714 |
715 | **Renderer changes:**
716 |
717 | - Added `lookupEventHandler` to the renderer context
718 | - `lookupEventHandler("onClick")` and `lookupEventHandler("onReset")` convert XMLUI event bindings to function references
719 | - These function references are passed to the native React component
720 |
721 | **The event flow:**
722 |
723 | 1. XMLUI markup: `<HelloWorld onClick="handleHelloClick" />`
724 | 2. Renderer: `lookupEventHandler("onClick")` finds the `handleHelloClick` function
725 | 3. Native component: Receives the function as `onClick` prop
726 | 4. User interaction: Triggers the function with the DOM event
727 |
728 | **Rebuild the extension**
729 |
730 | ```xmlui copy
731 | npm run build:extension
732 | ```
733 |
734 | **Define the handlers**
735 |
736 | This site's `index.html` defines these handler functions. For your standalone app you'll need to add them into its `index.html`.
737 |
738 | ```xmlui copy
739 | <script>
740 | window.handleHelloClick = function(event) {
741 | console.log('Hello World clicked!', event);
742 | alert('Button clicked!');
743 | };
744 |
745 | window.handleHelloReset = function(event) {
746 | console.log('Hello World reset!', event);
747 | alert('Counter was reset!');
748 | };
749 | </script>
750 | ```
751 |
752 | **Test event handling**
753 |
754 | Copy the new `xmlui-hello-world.js` into your standalone app's `xmlui` folder, and update its `Main.xmlui`.
755 |
756 | Now you can use the component with event handling.
757 |
758 | ```xmlui-pg
759 | ---app display copy
760 | <App>
761 | <HelloWorld
762 | onClick="handleHelloClick"
763 | onReset="handleHelloReset"
764 | />
765 | </App>
766 | ```
767 |
768 | ## Step 11: Add component APIs (external methods)
769 |
770 | Update `src/HelloWorldNative.tsx`.
771 |
772 | ```xmlui copy
773 | import React, { useState, useEffect } from "react";
774 | import styles from "./HelloWorld.module.scss";
775 | import type { RegisterComponentApiFn } from "xmlui";
776 |
777 | type Props = {
778 | id?: string;
779 | message?: string;
780 | className?: string;
781 | onClick?: (event: React.MouseEvent) => void;
782 | onReset?: (event: React.MouseEvent) => void;
783 | registerComponentApi?: RegisterComponentApiFn;
784 | };
785 |
786 | export const defaultProps = {
787 | message: "Hello, World!",
788 | };
789 |
790 | export const HelloWorld = React.forwardRef<HTMLDivElement, Props>(
791 | function HelloWorld(
792 | {
793 | id,
794 | message = defaultProps.message,
795 | className,
796 | onClick,
797 | onReset,
798 | registerComponentApi
799 | },
800 | ref
801 | ) {
802 | const [clickCount, setClickCount] = useState(0);
803 |
804 | // Create setValue method for external API access
805 | const setValue = (newCount: number) => {
806 | setClickCount(newCount);
807 | };
808 |
809 | // Register component API
810 | useEffect(() => {
811 | registerComponentApi?.({
812 | setValue,
813 | value: clickCount,
814 | });
815 | }, [registerComponentApi, setValue, clickCount]);
816 |
817 | const handleClick = (event: React.MouseEvent) => {
818 | const newCount = clickCount + 1;
819 | setClickCount(newCount);
820 | onClick?.(event);
821 | };
822 |
823 | const handleReset = (event: React.MouseEvent) => {
824 | setClickCount(0);
825 | onReset?.(event);
826 | };
827 |
828 | return (
829 | <div className={`${styles.container} ${className || ''}`} id={id} ref={ref}>
830 | <h2 className={styles.message}>{message}</h2>
831 | <button
832 | className={styles.button}
833 | onClick={handleClick}
834 | >
835 | Click me!
836 | </button>
837 | <div className={styles.counter}>
838 | Clicks: <span className={styles.count}>{clickCount}</span>
839 | </div>
840 |
841 | {clickCount > 0 && (
842 | <button
843 | className={styles.button}
844 | onClick={handleReset}
845 | >
846 | Reset
847 | </button>
848 | )}
849 | </div>
850 | );
851 | }
852 | );
853 | ```
854 |
855 | **New props**
856 |
857 | - `registerComponentApi?: RegisterComponentApiFn` - Function to register component APIs with XMLUI
858 |
859 | **New imports:**
860 |
861 | - `useEffect` from React - For API registration and state synchronization
862 | - `RegisterComponentApiFn` type from "xmlui" - Type for the API registration function
863 |
864 | **API registration:**
865 |
866 | - `setValue` method - Allows external code to set the click count
867 | - `useEffect` hook registers the API with XMLUI, exposing both `setValue` and `value`
868 | - API updates whenever `clickCount` changes, ensuring `value` is always current
869 |
870 | This enables XMLUI markup to directly call `demo.setValue(5)` and read `demo.value`.
871 |
872 | Update `src/HelloWorldNative.tsx`.
873 |
874 | ```xmlui copy
875 | cat > src/HelloWorld.tsx << 'EOF'
876 | import styles from "./HelloWorld.module.scss";
877 | import { createComponentRenderer, parseScssVar, createMetadata } from "xmlui";
878 | import { HelloWorld, defaultProps } from "./HelloWorldNative";
879 |
880 | const HelloWorldMd = createMetadata({
881 | description:
882 | "`HelloWorld` is a demonstration component that shows basic XMLUI patterns.",
883 | status: "experimental",
884 | props: {
885 | message: {
886 | description: "The greeting message to display.",
887 | isRequired: false,
888 | type: "string",
889 | defaultValue: defaultProps.message,
890 | },
891 | },
892 | events: {
893 | onClick: {
894 | description:
895 | "Triggered when the click button is pressed. " + "Receives the current click count.",
896 | type: "function",
897 | },
898 | onReset: {
899 | description:
900 | "Triggered when the reset button is pressed. " + "Called when count is reset to 0.",
901 | type: "function",
902 | },
903 | },
904 | apis: {
905 | value: {
906 | description: "The current click count value.",
907 | type: "number",
908 | },
909 | setValue: {
910 | description: "Set the click count to a specific value.",
911 | type: "function",
912 | },
913 | },
914 | themeVars: parseScssVar(styles.themeVars),
915 | defaultThemeVars: {
916 | [`backgroundColor-HelloWorld`]: "$color-surface-50",
917 | [`textColor-HelloWorld`]: "$color-content-primary",
918 | dark: {
919 | [`backgroundColor-HelloWorld`]: "$color-surface-800",
920 | // No textColor override needed - $color-content-primary should auto-adapt
921 | },
922 | },
923 | });
924 |
925 | export const helloWorldComponentRenderer = createComponentRenderer(
926 | "HelloWorld",
927 | HelloWorldMd,
928 |
929 | ({ node, extractValue, lookupEventHandler, className, registerComponentApi }) => {
930 | return (
931 | <HelloWorld
932 | id={extractValue.asOptionalString(node.props?.id)}
933 | message={extractValue.asOptionalString(node.props?.message)}
934 | onClick={lookupEventHandler("onClick")}
935 | onReset={lookupEventHandler("onReset")}
936 | className={className}
937 | registerComponentApi={registerComponentApi}
938 | />
939 | );
940 | },
941 | );
942 | EOF
943 | ```
944 |
945 | **Metadata**
946 |
947 | - Added `apis` section defining `value` (number) and `setValue` (function) APIs
948 |
949 | **Renderer Changes**
950 |
951 | - Added `registerComponentApi` to the renderer context
952 | - Passes `registerComponentApi` to the native component for API registration
953 |
954 | **The API flow:**
955 |
956 | 1. XMLUI markup: `<HelloWorld id="demo" />` creates component with ID
957 | 2. Renderer: Registers component APIs via `registerComponentApi`
958 | 3. External access: `demo.setValue(5)` calls the component's setValue method
959 | 4. State reading: `demo.value` returns the current click count
960 |
961 | ```xmlui copy
962 | npm run build:extension
963 | ```
964 |
965 | Copy the new `xmlui-hello-world.js` into your standalone app's `xmlui` folder, and update its `Main.xmlui` to see this final version.
966 |
967 | ```xmlui-pg
968 | ---app display copy
969 | <App xmlns:Extensions="component-ns:XMLUIExtensions">
970 |
971 | <Extensions:HelloWorld id="demo" message="API Demo" />
972 |
973 | <CHStack>
974 | <Button onClick="{ console.log('demo.value', demo.value) }">Get Count</Button>
975 | <Button onClick="{ demo.setValue(5) }">Set to 5</Button>
976 | <Button onClick="{ demo.setValue(0) }">Reset</Button>
977 | </CHStack>
978 |
979 | </App>
980 | ```
981 |
```