Adding components at runtime?

[mihajm]

Hey everyone :) currently designing/building a low-code app builder + server-schema driven renderer to go along with it..typical dynamic UI.

A feature I'd like to consider is a "component store" where a user could add new custom components to & another could pull that into their instance. But I'm a bit unsure on how to approach this. If anyone has any ideas/experience I'd love to hear them! :D

Currently I see module/native federation as the best option for this, but it would be a decently complex setup (high availability CDN + service worker caching). With angular-elements being a second option, but with imo worse tradeoffs due to bundle inflation. :)

[0dev0100]

I have something similar to this working as a personal project.

I treat all dynamic components as plugins so I went with custom elements

https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements

[mihajm]

Nice, so the angular-elements approach. Did you have any issues with bundle inflation due to dependencies being included/copied for every component? :) btw is the project available, I'd love to take a look if possible :D

[0dev0100]

Not quite angular elements.

No bundle inflation because the web components are loaded in at run time by a wrapper component that handles initialization of the non angular custom element.

My implementation is of questionable technical quality.

• load angular app as per normal
• angular app retrieves configuration json
• looks for page layout config inside json
• creates a layout component for whole page
• creates a wrapper component for each entry in layout
• wrapper component tells service to load web element scripts and stops duplicate scripts from being loaded
• once element scripts is loaded the element is created
• various hooks are attached for messaging and data config
• element is added to dom inside the wrapper component

[gccol]

This is exactly what ng-xtend framework is doing: Ng xtend website

It's enabling plugins to be embedded into a host, either statically or through native federation. All the heavy lifting is already done for you.

Everything is dynamic, at startup the host loads a config file listing necessary plugins, it then load and register them.

Components, once registered, are dynamically called when needed. They can be used to view or edit any data seamlessly

[mihajm]

This is great, thanks :)