Discussion on: Build modular app with Alpine.js

View post

<script defer type="module">

Adding defer attribute to inlined scripts has no effect. It only works here because modules are deferred by default.

Why don't you just add alpine import to index.ts and do component initialization there? Using this loader here makes no sense to me.
If you don't want to repeat initialization in every index.ts, you can do this in an inlined module:

<script type="module">
    import alpinejs from 'https://cdn.skypack.dev/alpinejs';
    import * as comps from '/dist/demo/index.js';
    Object.keys(comps).forEach(comp => {
      let data = comps[comp]();
      alpinejs.data(comp, () => data);
    });
    alpinejs.start();
</script>

Also, you're awaiting for alpine before starting components loading. You might start loading it in parallel and then continue component initialization when it's ready:

export async function loader(moduleURLs) {
    const alpineP = import('https://cdn.skypack.dev/alpinejs');
    const modules = await Promise.all(moduleURLs.map(async (modURL) => {
      const module = await import(modURL);
      const { default: alpinejs } = await alpineP;
      Object.keys(module).forEach(attr => {
        let data = module[attr]();
        alpinejs.data(attr, () => data);
      })
      return module;
    }));
    alpinejs.start();
    return modules;
}