WA boostrapping mechanism?

[hrstoyanov]

I still do not understand why WA uses a custom lazy/loading mechanism (including complications such as: allDefined, whenDefined, additionalElements) instead of a more standard approach:

1. Declare an import map at the start of you html code - this does not load wa modules, but makes referencing them easier in you code later:

{
    "imports": {
      "wa-avatar": "https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.0.0/dist//components/wa-avatar.js",
      "wa-button": "https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.0.0/dist//components/wa-button.js",
      ...
    }
}

2. In you code use standard module imports before use - a JS module is imported and initialized only once with the first import, regardless of how many time you import it elsewhere in your code:

<script type="module">
  import 'wa-button';
  import 'wa-avatar';
</script>

This should work fine with SPA, server-side rendered and html fragments-exchange app, and is more logical and standard - you load only what you need (cherry picking) and only when you need it in a standard way. And I guess, you do not need: allDefined, whenDefined, additionalElements

What am I missing ?

[GedMarc]

W3C Slot and Template - is the standard

[claviska]

I still do not understand why WA uses a custom lazy/loading mechanism (including complications such as: allDefined, whenDefined, additionalElements) instead of a more standard approach

You can import Web Awesome using standard ES module imports with or without import maps. Typically, this is better when you're bundling but it's also possible to cherry pick directly from a CDN.

However, this means you have to match up imports to every Web Awesome tag you use. So the "standard" option is available, but the Projects / CDN / Autoloader option is far more convenient for a lot of folks who just want to put a single script on the page and start using Web Awesome.

We offer allDefined() as sugar for customElements.whenDefined() since the platform's method is very verbose and requires a call for every element you're interested in. You only need to worry about this if you're:

• Using the autoloader
• Access a component's properties or methods before it registers

If you're bundling or cherry picking, you don't need to worry about the autoloader's extras.