Skip to content
LaravelBlog

livewire #10530: Bump Alpine to 3.16.1

LaravelBlogBot
LaravelBlogBot

Contributed by calebporzio

Part of the livewire v4.4.7 release

Pull request #10530 makes a single, tightly scoped change to Livewire's JavaScript dependencies: the bundled Alpine.js core and all ten official Alpine plugins move from 3.16.0 to 3.16.1. The motivation is not cosmetic — the 3.16.1 patch release restores @alpinejs/persist compatibility with older Alpine core versions, resolving a version-mismatch problem that could break localStorage-backed state in apps mixing Livewire's plugin bundle with their own Alpine install. If you are upgrading from v3.8.10, there are no API changes to adopt; updating the package and rebuilding assets is all it takes.

What changed

The diff touches exactly two files: package.json and package-lock.json. The alpinejs core moves from ^3.16.0 to ^3.16.1, as do every plugin Livewire bundles: @alpinejs/anchor, collapse, csp, focus, intersect, mask, morph, persist, resize, and sort. There is no PHP change, no JavaScript source change, and no configuration change — just dependency pins. Because Livewire compiles these packages into the livewire.js bundle it ships, the bump flows into your application as soon as you update the package and your assets are refreshed or rebuilt.

Why it matters: Persist vs. older Alpine cores

Alpine's plugins are versioned in lockstep with the core, but they are installed and imported independently, which means a page can end up running a plugin from one release line on top of a core from another. In the 3.16.0 generation, the persist plugin drifted away from older cores: it was no longer guaranteed to work when paired with an Alpine core from an earlier release — for example, an app whose lockfile still resolved alpinejs to 3.15.x while a caret range pulled @alpinejs/persist forward to 3.16.0.

Because persist is what powers $persist(), the symptom is hard to miss: state that is supposed to survive page reloads via localStorage resets on every refresh, or the plugin misbehaves when it registers against the older core. Alpine 3.16.1 restores that cross-version compatibility. By moving every bundled plugin — not just persist — to 3.16.1, this PR guarantees the entire bundle ships from a consistent, compatible release line.

The failure mode in practice

Here is typical persist usage inside a Livewire component:

<div x-data="{ sidebarOpen: $persist(true) }">
    <aside x-show="sidebarOpen" x-collapse>…</aside>
    <button @click="sidebarOpen = !sidebarOpen">Toggle sidebar</button>
</div>

The mismatch scenario looks like this, where core and plugin resolve to different versions in your own build:

// your lockfile
"alpinejs": "3.15.13",         // pinned core
"@alpinejs/persist": "3.16.0"  // drifted ahead via a caret range
import Alpine from 'alpinejs'
import persist from '@alpinejs/persist'

Alpine.plugin(persist)
Alpine.start()

With persist 3.16.0 against a 3.15.x core, this pairing was not guaranteed to work; with 3.16.1 it is safe again. A quick diagnostic is to run Alpine.version in your browser console — if the core version and your plugin generation differ, realign them after upgrading.

Upgrade impact from v3.8.10

The upgrade path is deliberately boring, and it differs slightly by setup:

  • Bundled scripts (@livewireScripts): run composer update livewire/livewire. The served bundle now embeds Alpine 3.16.1 core and plugins. If a CDN or proxy caches /livewire/livewire.js, purge that cache so clients receive the rebuilt file.
  • Vite/esbuild users importing from livewire.esm: re-run your asset build after the composer update; the ESM bundle now carries 3.16.1 throughout.
  • Apps managing their own Alpine dependencies: a caret range alone will not help you if your lockfile is pinned to 3.16.0. Remove the stale entries or run npm update alpinejs @alpinejs/persist so the patch actually lands, and keep core and plugins on the same release line.

There are no deprecations, no config changes, and no behavioral changes for code that already worked correctly — this is a compatibility restoration, not a rewrite.

Validation and takeaways

The PR was validated with npm ci, the full JavaScript suite (npm run test:run — 109 passed, 1 skipped), and a production npm run build, all green. Given the minimal surface area, risk is low, and the payoff is real for anyone who has hit persist-related state loss since the 3.16.0 bump.

  • Alpine core plus all ten bundled plugins bumped from 3.16.0 to 3.16.1 in Livewire's shipped bundle.
  • Purpose: restore @alpinejs/persist compatibility with older Alpine cores, fixing potential $persist() / localStorage state breakage.
  • No public API or configuration changes; upgrade with composer update livewire/livewire plus an asset rebuild if you compile your own JavaScript.
  • If you manage Alpine yourself, realign your lockfile so core and plugins both land on 3.16.1.
  • Validated with the full JS test suite and a production build — a low-risk patch worth picking up immediately.

Categories: 3 (Fix), 11 (Upgrade notes)

Sources

More from this release

Related Articles