StencilJS: How to compile a component production-ready (so it's simple to be used in projects)

Question

A group of volunteers has created a single/multi-select component using StencilJS: https://github.com/NothingAG/adg-components

Now we want to hand it over to the client so they can use it in their project.

My expectation was that the final result could be made available as a single JavaScript file and be included by a website like this:

<script type="module" src="/build/adg-components.esm.js"></script>
<script nomodule src="/build/adg-components.js"></script>

<adg-combobox
  id="hobbies"
  name="hobbies"
  label="Please select your hobbies"
  optionslabel="Hobbies"
  multi="true"
  lang="de"
></adg-combobox>

But it turns out that the command npm run build creates a whole bunch of different files, and all need to be available:

We also included some translation feature, whose files need to be available, too:

My question is: is this just the way it is? Does the client to make all those files available so that the <script type="module" src="/build/adg-components.esm.js"></script> call can find them? Or did we misconfigure the compilation, or forgot about something important?

Answer 1

In a nutshell - yes, that's the way it is. So you need to distribute not just adg-components.esm.js but everything else in the folder as well. The Stencil docs explain this, but to summarize, the purpose is so that components are selectively lazy loaded. If you have a library with 100 components, the browser only needs to download the components that are actually used on the page, not all 100.