Extension packaging

The components on the ECharts and Tiptap pages are heavy third-party libraries -- ECharts alone is ~1 MB bundled, Tiptap with all its extensions is ~500 KB. Including them all in the monolithic standalone bundle would push it well past what most apps need. Most XMLUI apps don't need charting or rich-text editing.

Extension packaging solves this. Each wrapped component ships as an independent UMD bundle that auto-registers with the XMLUI engine when loaded via a <script> tag. Apps include only the components they need.

How it works

Each extension is a small npm project under packages/xmlui-*:

packages/xmlui-echart/
  src/
    index.tsx          # registers the component
    EChartRender.tsx   # the React render component
    EChartWrapped.tsx  # wrapComponent config
  package.json         # declares third-party deps

Building is one command:

xmlui build-lib

This produces a self-contained UMD .js file that externalizes React and the XMLUI runtime (already loaded by the host app). The bundle includes only the extension's own dependencies.

Loading an extension

In index.html, add a script tag:

<script src="xmlui/xmlui-echart.js"></script>

That's it. The component auto-registers and is immediately available in XMLUI markup as <EChart ... />.

Extension sizes

Each is independent. An app that only needs charting loads xmlui-echart.js and nothing else. An app that needs everything loads all of them. The host app never changes -- just add or remove <script> tags.

The pattern

1. Wrap with wrapComponent or wrapCompound
2. Theme via SCSS bridge or useTheme() in the render component
3. Trace via standard events or captureNativeEvents: true
4. Build as an extension with xmlui build-lib
5. Load via <script> tag -- auto-registers, zero config

No changes to the XMLUI core. The wrapper handles props, events, and tracing. The render component handles library-specific semantics and theming. The extension package handles bundling and registration.

The React ecosystem has thousands of components -- charting, mapping, editing, visualization, media, collaboration. The wrapping approach makes them all accessible to XMLUI, with theming that follows the design system and tracing that enables semantic debugging and test generation.