AEM + Vite Registry Architecture (Island Pattern)

In modern AEM implementations using Vite, we avoid injecting fragmented <script type="module"> tags via server-side HTL (<sly data-sly-use... />). Instead, we use a single entry point (app.ts) that relies on a MutationObserver to watch the DOM for specific data attributes (data-ui-module).

When an element is found (either on page load or when an AEM author drags a component onto the page), the global app dynamically imports the required script via registry.ts and initializes it.

Benefits:

1. Perfect Vite Chunking: One entry point allows Vite to resolve the full dependency graph and generate optimized vendor chunks.
2. Authoring DX: Components initialize instantly upon AJAX injection in the AEM Edit dialog without page reloads.
3. No Side Effects: Scripts are pure and only execute when explicitly invoked with a target DOM element.
4. Memory Safety: Teardown is handled automatically when AEM removes a component from the DOM.

Architecture File Structure