search

Accudio / async-alpine

Async Alpine brings advanced code splitting and lazy-loading to Alpine.js components!
https://async-alpine.dev
Apache License 2.0
152 stars 12 forks source link

feat: alias function based module loading #36

Closed whitter closed 9 months ago

whitter commented 9 months ago

Tweaked the alias method to allow the passing of a function to handle the loading of a module based on its alias.

When using a bundler such as webpack it will reduce the number of lines needed to initialise alpine. Instead of doing the following:

AsyncAlpine.init(Alpine);
AsyncAlpine.data('output', () => import('/components/output.js'));
AsyncAlpine.data('output1', () => import('/components/output1.js'));
AsyncAlpine.data('output2', () => import('/components/output3.js'));
...
AsyncAlpine.start();
Alpine.start();

We can make use of dynamic imports:

AsyncAlpine.init(Alpine);
AsyncAlpine.alias((name) => import(`/components/${name}.module.js`));
AsyncAlpine.start();
Alpine.start();
Accudio commented 9 months ago

Thank you, this looks great! I'm pretty busy at the moment but I'll review this when I can and providing all is good it will release in version 1.2.0.