livewire #10522: Bump Alpine to 3.16.0

Categories: Chore (5), Upgrade notes (11)

Livewire ships Alpine.js as a bundled dependency rather than asking you to install it separately — it's the reactive engine behind every x-data, x-show, and $wire call. PR #10522 bumps that bundled copy from Alpine 3.15.12 to Alpine 3.16.0, and raises all ten Alpine plugins Livewire packages alongside it (@alpinejs/anchor, collapse, csp, focus, intersect, mask, morph, persist, resize, and sort) to the same version. The change touches only package.json and package-lock.json — no runtime Livewire code was modified — but because these dependencies are compiled into the published JavaScript bundle, the next release of Livewire will serve the 3.16.0 build to your browsers. If you're coming from v3.8.10, here's what that means for you.

What changed

Two files, nothing more. package.json raises the version constraint for alpinejs and every bundled plugin from ^3.15.12 to ^3.16.0, and the lockfile is regenerated to match, with fresh resolved URLs and integrity hashes for each package. The PR also confirms the lockfile resolves every package from the registry with its final integrity hash — relevant if you run supply-chain audits, since npm ci will fail loudly on any hash mismatch rather than silently installing something unexpected.

Because Livewire compiles these packages into the bundle behind @livewireScripts, "bumping" here means the Alpine your users actually execute moves from 3.15.12 to 3.16.0 as part of the release.

Why it matters

Even with no Livewire code changed, everything you write runs through Alpine: wire:model hydration, wire:loading toggling, morph-based DOM diffing (via @alpinejs/morph), focus management, intersection observers, collapsing panels. Staying current with Alpine means inheriting whatever bug fixes and refinements landed upstream between 3.15.12 and 3.16.0, including updates to the libraries the plugins lean on — for example, the anchor plugin builds on @floating-ui/dom, and x-trap behavior depends on the bundled focus-trap version.

Confidence in the bump is high: the PR validated it with a clean npm ci install, the full test suite (npm run test:run, 101 passing, 1 skipped), and a successful production build.

What it looks like in practice

The bundled plugins are ones you're probably already using inside components:

<div x-data="{ open: false }">
    <button @click="open = !open">Toggle details</button>

    <div x-show="open" x-collapse wire:key="details">
        {{-- content here is diffed via @alpinejs/morph --}}
    </div>

    <div x-intersect.once="$wire.trackView()">
        {{-- fires when this block scrolls into view --}}
    </div>
</div>

None of this markup changes with the upgrade. The point of the bump is that the engine executing it — Alpine core plus x-collapse, x-intersect, the $wire integration, and morphing — is now the 3.16.0 build.

Upgrade impact

For most applications, nothing beyond updating the package itself:

composer update livewire/livewire

After that, @livewireScripts serves the new bundle automatically. There are no config changes, no new environment variables, and no directive or Blade syntax changes.

Two situations deserve a closer look:

1. You bundle Alpine yourself. If your build imports alpinejs directly — a common Vite setup where you call Alpine.start() — you effectively have two Alpines in play: yours and Livewire's. Align your dependency to match:

   // package.json in your app
   "alpinejs": "^3.16.0"
   

   import Alpine from 'alpinejs'
   window.Alpine = Alpine
   Alpine.start()
   

   Mismatched versions usually appear to work, but registering custom directives or Alpine.data() components against an older core while Livewire's bundle runs a newer one is a known source of subtle, hard-to-reproduce bugs.

2. You install Alpine plugins separately. Livewire ships the full plugin set listed above; if you additionally install plugin packages via npm (say, @alpinejs/sort for x-sort), bump those to ^3.16.0 as well so behavior stays consistent across both copies.

Takeaways

• Livewire's bundled Alpine moves from 3.15.12 to 3.16.0, along with all ten bundled plugins; no Livewire runtime code changed.
• Upgrading is a routine composer update livewire/livewire — the new build is served automatically through @livewireScripts.
• If you self-host Alpine via npm, align alpinejs and any @alpinejs/* packages to ^3.16.0 to avoid running two divergent copies side by side.
• The change was validated with a clean npm ci, the full test suite (101 passing, 1 skipped), and a production build; updated lockfile integrity hashes keep installs reproducible and audit-friendly.

Sources

• Pull request #10522
• Release v4.4.7