This is the recommended approach and comes preconfigured for any SWAT-based application.
Decentralized events will be independent of the main application bundle.
Each repository object referencing events will have its own bundle, which will be lazy-loaded at runtime.
The following directory structure is recommended:
webui
|-- client-logic
|-- _export
|-- <repository_object>.ts
|-- ...
|-- EventNamespaceDomain.ts
|-- ...
|-- ...
|-- index.ts
The EventNamespaceDomain.ts file is used by webpack to "know" that the files in the _export directory should be bundled in separate bundles.
And it will be used to register the namespace domain at runtime in index.ts.
Afterwards, any object added to the _export directory will be available for lazy-load at runtime.
import EventNamespaceDomain from './client-logic/EventNamespaceDomain'; const eventNamespace = new EventNamespaceManager(); eventNamespace.registerDomain('APP', new EventNamespaceDomain()); export default {};
export default class EventNamespaceDomain { async LoadEventNamespace(relativeFilePath: string) { try { const object = await import( /* webpackChunkName: "[request]" */ `./_export/${relativeFilePath}` ); return object; } catch { return null; } } }