alpinejs-defer
v1.0.2
Published
Defer components until they're needed.
Downloads
131
Readme
alpinejs-defer
An Alpine.js directive designed to address the issue of large running tasks occupying main thread time by deferring components until they are needed.
About
Alpine.js is an amazing tool, but as your component library grows, initializing them all on Alpine.start() or Livewire.start() can cause your application to freeze at the beginning of each request. This means other important tasks can't be performed until Alpine has traversed the entire DOM.
Installation
[!IMPORTANT]
This plugin is only available as an ES module for the time being.
NPM
npm install alpinejs-defer
import Alpine from "alpinejs";
import Defer from "alpinejs-defer";
Alpine.directive('defer', Defer).before('ignore');
Alpine.start();
Usage
x-defer:intersect
Will initialise the component just before it hits the window using the IntersectionObserver
API.
<div x-defer:intersect>
...
</div>
x-defer:event
Will initialise the component when an event you specify is fired on the window
.
eg.
<button x-data @click.window="$dispatch('open-navigation')">
Open Navigation
</button>
<nav x-data="nav">
...
<!-- Some deeply nested component -->
<div x-defer:event="open-navigation">
...
</div>
</nav>
[!IMPORTANT]
Events likeload
will not work properly and will cause components to sometimes not initialise. Events should come from a specific action, like a click that triggers your custom event.
x-defer:interact
Will initialise the element when a user interacts with the page in any way.
x-defer
Using the directive without a name, this will defer the component until after all of the components without x-defer have been initialised. It will put each component onto a new task on the main thread, leaving room for other important tasks.